如何使用 Watir 访问 Shadow DOM 并与之交互? [英] How to access and interact with Shadow DOM using Watir?

问题描述

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

I need to access this page chrome://downloads/ and check that a file has been downloaded but it's Shadow DOM.

我发现这篇文章如何使用 Selenium Webdriver 访问 DOM 元素.http://jeremysklarsky.github.io/blog/2015/06/13/accessing-shadow-dom-elements-with-selenium-webdriver/

I've found this article how to access DOM Elements With Selenium Webdriver. 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 语法后，我的代码可以工作，但没有返回我想要的结果:

Having changed that to Watir syntax, my code works but doesn't return me the desired results:

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

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

我只是在控制台中得到 nils.

I'm just getting nils in the console.

在此处输入图片描述

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

But what I'd like to get is to make sure that the element is present.

推荐答案

正如titusfortner 删除的回答提到的，Selenium Easy 有一篇相关文章，使用 Webdriver 处理 Shadow DOM 元素".事实证明，你可以通过 JavaScript 获取一个 shadow 元素，然后像往常一样与它的后代交互.

As mentioned by titusfortner's deleted answer, Selenium Easy had a related article, "Working with Shadow DOM Elements using Webdriver". It turns out that you can get a shadow element via JavaScript and then interact with it's descendants as normal.

然而，由于 Watir 的编写方式，我不得不对 Watir::Browser 进行猴子补丁以使其工作.我会看看我是否能得到一个更永久的修复，但现在，这是一个有效的例子:

However, due to the way Watir is written, I had to monkey-patch Watir::Browser to make it work. I'll see if I can get a more permanent fix, but for now, here's a working example:

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

这篇关于如何使用 Watir 访问 Shadow DOM 并与之交互?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！