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

时间:2017-11-27 21:59:44

标签: jquery ruby selenium watir shadow-dom

我需要访问此页面chrome:// downloads /并检查文件是否已下载,但它是Shadow DOM。

我发现这篇文章如何使用Selenium Webdriver访问DOM Elements。 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

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

2 个答案:

答案 0 :(得分:0)

如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

答案 1 :(得分:0)

我想让人们知道这个猴子补丁不再有效,我不知道有什么好的解决办法。

Justin 解决的最初问题是附加到元素的 shadow dom 实际上没有标签名称。因此他的猴子补丁。但是随着更新,该补丁不再有效。最初的错误是 JS 错误的变化(参见下面的第 1 项)。新问题是 shadow dom 附加到真实元素,但 shadowRoot 本身不是真实元素。它就像一个准元素。

  • 错误现在是 Selenium::WebDriver::Error::JavascriptError,因此您的救援线路需要更新以获取正确的错误。
  • 即使您修复了该问题,也会收到更多错误 javascript error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 这是对有线协议进行内部 API 调用的结果。例如,我将错误追踪到 selenium-webdriver-3.142.7/lib/selenium/webdriver/remote/http/default.rb:81 API 调用返回内部 500 错误,负载为 "{"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)" 我不知道如何解决这个问题。