How to retrieve the exact Accessibility Tree or Accessibility Object Model (AOM) produced by Chrome with Playwright/Selenium?

Question

Google Chrome (as far as I know, every other browser) analyzes the DOM and produces something called Accessibility Tree (AT) where only the interactive and descriptive elements are shown (e.g. <input>, <button> etc. as interactive ones, <span>, <label> etc. as descriptive ones matched with the interactive ones). From the following implementation:

const browser = await playwright.chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();

const endpoint = "url";


await page.goto(endpoint);

await page.getByRole('textbox', { name: 'email' }).click()

I can conclude that the AT is also available to Playwright. What I need is to extract it as it is in Chrome.

Following implementation should retrieve the tree.

const browser = await playwright.chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();

const endpoint = "url";


await page.goto(endpoint);

const snapshot = await page.accessibility.snapshot();
console.log(snapshot);

However, returned tree is not structured as it should have been (Parent-children information do not exists in it in anyway), it is just a list of elements represented in some words. Are there any way in which resulting tree can be improved further?

Answer 1

That accessibility feature is deprecated,

So you'd better use @axe-core/playwright and see Playwright accessibility docs