使用Watir 7.2时，如何避开Shadow Root场景下的元素定位迭代？

你可以利用Watir对Shadow DOM的原生支持，通过链式定位或块定位器直接筛选目标元素，无需手动遍历所有选项。以下是具体实现方案：

优化代码示例1：使用块定位器 #

require 'watir'    
b = Watir::Browser.new    
b.goto 'url'       

# 触发下拉选项展开
b.element(id: "login-combo").shadow_root.element(id: 'toggleButton').click

# 直接定位并点击目标选项
b.element(id: 'overlay')
 .shadow_root
 .div(id: 'overlay')
 .div(id: 'content')
 .shadow_root
 .div(id: 'scroller')
 .element(role: 'option') do |option|
  option.shadow_root.div(text: 'training_us_02').exists?
end.shadow_root.div(text: 'training_us_02').click

代码说明 #

• 借助Watir的块定位器特性，在定位role: 'option'元素时传入判断逻辑，Watir会自动遍历并返回第一个满足条件的元素，替代手动each循环和break操作。
• 块内逻辑检查选项Shadow Root下是否存在指定文本的div，符合条件即停止查找。

优化代码示例2：使用Shadow Root定位参数 #

require 'watir'    
b = Watir::Browser.new    
b.goto 'url'       

b.element(id: "login-combo").shadow_root.element(id: 'toggleButton').click

# 直接通过定位器嵌套Shadow Root条件
target_option = b.element(id: 'overlay')
 .shadow_root
 .div(id: 'overlay')
 .div(id: 'content')
 .shadow_root
 .div(id: 'scroller')
 .element(role: 'option', shadow_root: {div: {text: 'training_us_02'}})

target_option.shadow_root.div(text: 'training_us_02').click

代码说明 #

• Watir 7+支持在元素定位器中通过shadow_root参数，直接指定Shadow DOM内部元素的定位条件，无需手动遍历筛选。
• 这种写法更简洁，适合结构明确的Shadow DOM场景。

内容的提问来源于stack exchange，提问作者Rajagopalan