如何通过Playwright/Selenium获取Chrome生成的完整Accessibility Tree/AOM

默认情况下，page.accessibility.snapshot()会返回扁平化的“关键元素”列表（对应interestingOnly: true的默认配置），只包含交互性或描述性元素，且没有父子层级。要获取和Chrome DevTools中完全一致的树形结构，只需调整调用参数：

修改后的代码示例 #

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);

// 获取完整的带父子结构的Accessibility Tree
const fullAccessibilityTree = await page.accessibility.snapshot({
  interestingOnly: false, // 关闭仅显示关键元素，返回完整树
  // 可选：如果只需要某个根元素下的树，可指定root参数
  // root: await page.locator('#some-root-element').elementHandle()
});

console.log(JSON.stringify(fullAccessibilityTree, null, 2));

参数说明 #

• interestingOnly: false：禁用默认的“仅提取关键元素”逻辑，返回包含所有可访问性节点的完整树结构，每个节点会带有children属性，对应其子节点。
• root（可选）：如果不需要整个页面的树，可指定某个DOM元素作为根节点，只提取该节点下的可访问性子树。

验证与Chrome的一致性 #

Chrome DevTools中的Accessibility Tree展示的是完整层级结构，修改后的代码返回的结果会包含相同的父子关系、角色、名称等属性，和浏览器中的结构完全对齐。

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