如何使用Watir点击浏览器弹窗内的按钮

你遇到的是页面内jQuery UI模态对话框的元素定位问题，并非浏览器原生弹出窗口，按以下步骤排查即可解决：

1. 增加显式等待，确保模态框完全渲染 #

该弹窗是点击后动态插入DOM的元素，Watir默认不会等待动态内容渲染完成就执行查找操作，需要先确认弹窗加载完成再操作内部控件：

# 点击添加笔记按钮后，先等待弹窗标题出现，确认弹窗已加载
browser.span(id: 'ui-id-2', text: 'Add Note').wait_until(&:present?)
# 等待Save按钮可点击后再执行点击
browser.button(id: 'Save').wait_until(&:enabled?).click

如果以上代码仍无效，说明弹窗内容大概率嵌套在iframe中，继续执行下一步。

2. 切换到弹窗对应的iframe上下文 #

很多模态框会把内容嵌套在独立iframe中，直接在主页面上下文无法找到iframe内的元素，需要先切换上下文：

1. 打开浏览器开发者工具，选中Save按钮，查看元素路径上是否存在<iframe>标签，记录该iframe的id、class等属性
2. 按以下示例代码调整操作逻辑：

# 替换参数为你实际查到的iframe属性
note_iframe = browser.iframe(id: '弹窗iframe的实际id')
# 切换到iframe内部上下文查找元素
note_iframe.use do
  note_iframe.button(id: 'Save').wait_until(&:enabled?).click
end

3. 限定元素查找范围到弹窗容器 #

如果主页面也存在id为Save的隐藏元素，会导致Watir优先匹配到主页面的无效元素，直接限定查找范围到弹窗容器即可避免冲突：

# 先定位整个Add Note弹窗的容器
note_dialog = browser.div(class: 'ui-dialog', has: {span(id: 'ui-id-2', text: 'Add Note')})
# 仅在弹窗容器范围内查找Save按钮
note_dialog.button(id: 'Save').wait_until(&:enabled?).click

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