Watir递归查找嵌套iframe/embed/object内元素遇动态内容识别问题

我需要定位顶级文档或嵌套容器（iframe/embed/object）内的元素，已编写elements方法的递归版本，但测试发现：对于加载并渲染动态内容的容器元素，内容虽正常渲染，却无法被Watir识别。示例HTML代码为<embed src="https://example.com/">，Ruby代码遍历embed元素并输出其内部元素数量时结果为0，而我预期应能获取embed的内容，请问我遗漏了什么？

原因分析 #

• 容器处理逻辑差异：Watir对iframe有专门的上下文切换API，但embed/object这类容器并没有默认的支持。这类容器的内部文档在浏览器中的访问机制和iframe不同，Watir不会自动切换到其内部上下文。
• 同源策略限制：如果embed加载的是跨域内容（比如示例中的example.com），浏览器的同源安全策略会阻止Watir（底层依赖Selenium）访问其内部文档，哪怕内容已经渲染完成，也无法通过脚本获取元素。
• 未等待内容加载完成：即使是同源内容，若没有等待embed内部内容完全加载就去遍历元素，此时内部文档可能还未初始化，导致返回元素数量为0。

解决方法 #

同源embed内容的处理 #

1. 获取embed元素的原生DOM对象：

   embed_element = browser.embed
   

2. 通过JavaScript获取其内部文档（不同类型的embed可能需要不同的方法，比如SVG用getSVGDocument，通用用contentDocument）：

   inner_doc = browser.execute_script(<<~JS, embed_element)
     return arguments[0].getSVGDocument ? arguments[0].getSVGDocument() : arguments[0].contentDocument;
   JS
   

3. 基于内部文档查询元素：

   element_count = browser.execute_script('return arguments[0].querySelectorAll("*").length;', inner_doc)
   puts element_count
   

跨域embed内容的处理 #

受浏览器同源策略限制，无法直接访问跨域embed的内部内容，可尝试以下方案：

• 将目标内容部署到与主页面同源的域名下
• 本地测试时，使用浏览器的跨域调试参数（如Chrome的--disable-web-security），但该方法仅适用于测试场景，不能用于生产环境

等待内容加载完成 #

添加等待逻辑，确保embed内部内容加载完毕：

browser.wait_until do
  browser.execute_script('return arguments[0].readyState === "complete";', browser.embed)
end

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