Ruby：在 Shadow-Root DOM 中获取 Web 元素

Posted 2023-02-21

【中文标题】Ruby：在 Shadow-Root DOM 中获取 Web 元素

【英文标题】：Ruby: get web elements inside the Shadow-Root DOM

【发布时间】：2021-06-09 07:39:06

【问题描述】：

我是使用 cucumber 和 selenium-webdriver 进行 Ruby 自动化测试的新手。 我从另一个人那里收到了源代码自动化。他在页面上找到元素的方式看起来像： element(:error_message) browser.elements(class: 'input-invalidate')

现在我需要访问 ShadowRoot 中的元素，做了一些研究，但无法得到 Ruby 代码的答案。 下图是一个例子，我想在shadowroot里面获取id="maincontainer"的div标签，有人可以帮忙吗？

谢谢你

【问题讨论】：

在 Ruby Selenium Binding 提问时添加 selenium 标签和 watir 标签。

IF DOM 节点在您查询的那一刻存在； document.querySelector("downloads-manager").shadowRoot.querySelector("#mainContainer") 应该这样做

@Danny'365CSI'Engelman 使用 javascript 似乎是一种解决方法，看起来 Selenium 仍然不支持 Shadow DOM，嗯？

我越来越认为您不应该在现代工具领域使用 oldskool 工具进行测试。特斯拉在电池安装到汽车后也没有对其进行全面测试。与电池一样，Web 组件应作为半成品进行测试。您在使用手机之前是否测试 G4 连接？它要么有效，要么无效。

@Danny '365CSI' Engelman 你明白我在说什么吗？ Selenium 无法在 shadow DOM 中定位元素。

【参考方案1】：

现在 Selenium 4.0 支持此功能，这是一个工作示例：

driver.get('http://watir.com/examples/shadow_dom.html')

shadow_host = driver.find_element(id: 'shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(id: 'shadow_content')

【参考方案2】：

还要验证您是否安装了selenium devtools gem，并且至少安装了chrome v96 和最新的chromedriver

这将像 Titus 在使用 Selenium 定位元素时指出的那样工作

browser = Watir::Browser.new
browser.goto "http://watir.com/examples/shadow_dom.html"

shadow_host = browser.driver.find_element(id: 'shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(id: 'shadow_content')

您还可以使用 Watir 定位元素，然后在底层 Selenium 元素上调用 shadow_root

shadow_host = browser.div(id: 'shadow_host') #Watir::Div
shadow_root = shadow_host.wd.shadow_root

编辑：理论上这也应该有效 - 将 ShadowRoot 转换为 Watir 元素，但之后会中断。

browser.goto "http://watir.com/examples/shadow_dom.html"
shadow_host = browser.div(id: 'shadow_host') #Watir::Div
shadow_root = shadow_host.wd.shadow_root #Selenium::WebDriver::ShadowRoot
watir_shadow = browser.div(element: shadow_root) #Watir::Div
watir_shadow.divs.count #undefined method `keys' for nil:NilClass

我可能做错了什么:) 最好问@titusfortner

/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:73:in `merge_scope?'
/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:50:in `normalize_selector'
/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:28:in `build'
/watirs/watir-7.1.0/lib/watir/element_collection.rb:47:in `build'
/watirs/watir-7.1.0/lib/watir/element_collection.rb:18:in `initialize'
/watirs/watir-7.1.0/lib/watir/container.rb:28:in `new'
/watirs/watir-7.1.0/lib/watir/container.rb:28:in `elements'