Every browser, including Google Chrome, analyzes the DOM and generates an Accessibility Tree (AT) that displays only interactive and descriptive elements (e.g. <input>, <button> as interactive, <span>, <label> as descriptive along with interactive ones). The code snippet below demonstrates how Playwright can utilize the AT:
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()
It is evident that Playwright also has access to the Accessibility Tree. The objective is to extract it similar to Chrome.
The following code snippet aims to 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, the resulting tree is not structured as expected (lacks parent-children information), appearing only as a list of elements in text format. Is there a way to enhance the structure of the generated tree further?