如何获取包含iframe页面的Puppeteer可访问性树？

要拿到包含iframe的完整页面可访问性树，核心思路是分别获取主页面和每个iframe内部的可访问性树，再将数据合并。由于Puppeteer的contentFrame没有封装可访问性方法，我们可以直接通过CDP（Chrome DevTools Protocol）来调用接口获取iframe内的树数据。

具体实现步骤 #

• 先获取主页面的可访问性树快照
• 遍历页面中所有iframe，对每个iframe执行：
  1. 获取iframe对应的contentFrame对象
  2. 通过contentFrame创建CDP会话，调用Accessibility.getFullAXTree接口拿到内部可访问性树
  3. 将iframe的树数据合并到主树中（可根据需求调整层级逻辑）

代码示例 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('目标页面URL');

  // 1. 获取主页面可访问性树
  const mainAXTree = await page.accessibility.snapshot();

  // 2. 获取所有iframe元素句柄
  const iframeHandles = await page.$$('iframe');

  // 3. 遍历每个iframe，获取内部可访问性树并合并
  for (const handle of iframeHandles) {
    const frame = await handle.contentFrame();
    if (!frame) continue; // 跳过跨域或无法获取的iframe

    // 通过CDP会话调用接口获取iframe内的可访问性树
    const cdpSession = await frame.createCDPSession();
    const iframeAXTree = await cdpSession.send('Accessibility.getFullAXTree');

    // 合并逻辑：将iframe的节点作为主树中对应iframe元素的子节点（可根据需求调整）
    // 先找到主树中的iframe节点
    const iframeMainNode = mainAXTree.children?.find(node => node.role === 'iframe');
    if (iframeMainNode) {
      iframeMainNode.children = [...(iframeMainNode.children || []), ...iframeAXTree.nodes];
    } else {
      // 如果主树中没找到iframe节点，直接追加到根节点子元素
      mainAXTree.children = [...(mainAXTree.children || []), ...iframeAXTree.nodes];
    }
  }

  console.log('完整可访问性树:', mainAXTree);

  await browser.close();
})();

注意事项 #

• 跨域iframe无法获取contentFrame，这种情况需要提前处理页面跨域限制（比如启动浏览器时添加--disable-web-security参数，仅用于测试环境）
• 合并逻辑可根据实际需求调整，比如保持iframe节点的层级关系，将内部树挂载到主树中对应的iframe节点下，而非直接追加到根节点

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