如何使用Watir访问Shadow DOM并与之交互？

Question

我需要访问这个页面chrome://downloads/并检查是否已经下载了一个文件，但它是Shadow DOM。

我找到了一篇关于如何使用Selenium Webdriver访问DOM元素的文章。http://jeremysklarsky.github.io/blog/2015/06/13/accessing-shadow-dom-elements-with-selenium-webdriver/

但这是用JS编写的。

​

driver.executeScript("return $('body /deep/ <#yourSelector>')")

driver.executeScript("return $('body /deep/ ._mm_column')[0].textContent").then(function(title){
  title.should.contain(segmentName);
});

​

将其更改为Watir语法后，我的代码可以工作，但没有返回所需的结果：

    execute_script("return $('<#file-link>')")

    execute_script("return $( '<:contains(test-file.mp3)>')")

我只是在控制台中获取nils。

enter image description here

但我想要得到的是确保元素存在。

Answer 1

正如titusfortner的已删除答案所提到的，Selenium Easy有一篇相关文章"Working with Shadow DOM Elements using Webdriver“。事实证明，您可以通过JavaScript获取阴影元素，然后正常地与其后代进行交互。

然而，由于Watir的编写方式，我不得不对Watir::Browser打补丁才能使其工作。我会看看我是否可以得到一个更持久的修复，但现在，这里有一个有效的示例：

require 'watir'

# Monkey-patch due to being unable to check the tag name of the shadow root
class Watir::Browser
  def wrap_element(scope, element)
    Watir.element_class_for(element.tag_name.downcase).new(scope, element: element)
  rescue Selenium::WebDriver::Error::UnknownError # need a better rescue
    Watir::Element.new(scope, element: element)
  end
end

def expand_root_element(element, browser)
    browser.execute_script("return arguments[0].shadowRoot", element)
end

browser = Watir::Browser.new

# Create a download item
browser.goto('https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zip')
browser.goto('chrome://downloads')

# Navigate the shadow DOM to the download items
download_manager = browser.element(css: 'downloads-manager')
shadow_download_manager = expand_root_element(download_manager, browser)

download_items = shadow_download_manager.elements(css: '#downloads-list downloads-item')
shadow_download_items = download_items.map { |s| expand_root_element(s, browser) }

# Find a specific download item by file name
expected_file = /chromedriver_win32/
download = shadow_download_items.find { |s| s.span(id: 'name').text_content =~ expected_file }

# Do something with the download - eg wait for the download to complete
download.link(id: 'show').wait_until_present

Answer 2

我想让人们知道这个猴子补丁不再起作用了，我不知道有什么好的工作可以解决。

Justin最初解决的问题是附加到元素的阴影dom实际上没有标记名。这就是他的猴子补丁。但随着更新，该补丁不再有效。最初的错误是JS错误的变化(参见下面的项目符号#1 )。新的问题是，影子shadowRoot被附加到实数元素上，但dom本身并不是实数元素。它就像一个准元素。

• 错误现在是一个Selenium::WebDriver::Error::JavascriptError，所以你的救援线需要更新以纠正错误。
• 即使你修复了它，你也会得到更多的错误javascript error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'这是在wire协议上的一个内部API调用的结果。例如，我跟踪错误到selenium-webdriver-3.142.7/lib/selenium/webdriver/remote/http/default.rb:81 API调用返回一个有效负载为"{"value":{"error":"javascript error","message":"javascript error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.\n (Session info: chrome=87.0.4280.88)"的内部500错误，我不知道如何解决这个问题。