How to get puppeteer accessibility tree of iframe content

Question

I'm using puppeteer.accessibility.snapshot() to obtain an accessibility tree snapshot of a full page with an iframe. However, I can't see the accessible elements inside the iframe.

Accessibility.getFullAXTree in the Chrome DevTools Protocol does not help either because it only shows the iframe element too.

I cannot snapshot aniframe.contentFrame() because it does not have accessibility methods

await page.accessibility.snapshot({ root: await page.$("iframe") }) returns null even though await page.$("iframe") is an element handle

How do I get the accessibility tree of the entire page?

Answer 1

From the Accessibility class the only thing that selects the main page instead of an iframe is this line here

const { nodes } = await this.#client.send("Accessibility.getFullAXTree");

You can override the client.send function to request an iframe.

//get any frame
const frame = page.frames()[1];
page.client.oldSendFunction = page.client.send;

page.client.send = (...params) => {
  if (params.length == 1 && params[0] === "Accessibility.getFullAXTree") {
    return page.client.oldSendFunction("Accessibility.getFullAXTree", {
      frameId: frame._id,
    });
  }
  return page.client.oldSendFunction(...params);
};
// this now snapshots the iframe
console.log(await page.accessibility.snapshot());

page.client.send = page.client.oldSendFunction;
// this now snapshots the main page like before
console.log(await page.accessibility.snapshot());