如何获取 iframe 内容的 puppeteer 可访问性树

Question

我正在使用

puppeteer.accessibility.snapshot()

获取带有 iframe 的完整页面的可访问性树快照。但是，我看不到 iframe 内的可访问元素。

Chrome DevTools Protocol

中的

Accessibility.getFullAXTree也没有帮助，因为它也只显示 iframe 元素。

我无法拍摄

iframe.contentFrame()

，因为它没有辅助功能

即使

await page.accessibility.snapshot({ root: await page.$("iframe") })

 是元素句柄，

await page.$("iframe")

也会返回 null

如何获取整个页面的可访问性树？

Answer 1

我最终使用开发工具协议手动获取辅助功能树

async function retrieveIframeAxTreeFromJS({ page, jsIframeSelectorExpresson }) {
  const client = await page.target().createCDPSession();
    await client.send("Accessibility.enable");
    //get the frameId using dev tools protocol , page.$('iframe').id is a different value
  const {
    result: { objectId: iframeId },
  } = await client.send("Runtime.evaluate", {
    expression: jsIframeSelectorExpresson,
  });
  const iframeNodeDescribed = await client.send("DOM.describeNode", {
    objectId: iframeId,
  });

  return await client.send("Accessibility.getFullAXTree", {
    frameId: iframeNodeDescribed.node.frameId,
  });
}

然后我重写了 Accessibility 类以在自己的中使用它。

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto(`page with iframe`);
  const client = await page.target().createCDPSession();
  await client.send("Accessibility.enable");

  const newAccesbilityClass = new Accessibility(client);
 
  console.log(
    await newAccesbilityClass.snapshot({
      tree: await retrieveIframeAxTreeFromJS({
        page,
        jsIframeSelectorExpresson: "document.querySelector('iframe')",
      }),
    }),