Playwright中可访问性树的提取与高级测试指南

本文旨在探讨在playwright中获取精确的可访问性树（accessibility tree, at）的挑战与解决方案。针对playwright中`page.accessibility.snapshot()`方法无法提供所需层级结构的问题，我们将介绍该方法已弃用的事实，并推荐使用行业标准的`@axe-core/playwright`库作为现代且高效的替代方案，以实现全面的自动化可访问性测试，从而确保web应用的用户体验和合规性。

理解可访问性树（Accessibility Tree）

可访问性树（Accessibility Tree, AT）是浏览器根据DOM（Document Object Model）构建的一个并行结构，它只包含对辅助技术（如屏幕阅读器）有意义的元素。这个树简化了DOM，移除了纯样式或布局元素，并为交互式和描述性元素（如、、、等）提供了语义信息。辅助技术正是通过解析这个AT来理解页面结构和内容，从而为残障用户提供服务。开发者有时需要访问AT来验证其Web应用的可访问性语义是否正确。

Playwright中获取可访问性树的挑战

在Playwright中，确实存在一个API用于获取页面的可访问性信息，即page.accessibility.snapshot()。然而，正如许多开发者所发现的，该方法返回的结构并非一个带有父子关系的层级树，而更像是一个扁平化的元素列表，其中包含了元素的角色（role）、名称（name）等属性。

例如，以下代码尝试使用page.accessibility.snapshot()来获取可访问性快照：

const playwright = require('playwright');

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

  const endpoint = "https://www.example.com"; // 替换为你的目标URL

  await page.goto(endpoint);

  // 尝试获取可访问性快照
  const snapshot = await page.accessibility.snapshot();
  console.log(JSON.stringify(snapshot, null, 2));

  await browser.close();
})();

登录后复制

执行上述代码后，输出结果通常是一个JSON数组，每个对象代表一个可访问性节点，但缺乏明确的父子层级关系，这与Chrome开发者工具中可视化展示的层级结构有所不同。

现代可访问性测试的推荐方案：@axe-core/playwright

实际上，Playwright的page.accessibility.snapshot()方法在获取精确的、层级化的可访问性树方面存在局限性，并且在现代可访问性测试实践中，其主要功能已被更强大的工具所取代。官方文档和社区的推荐都倾向于使用专门的可访问性测试库。

对于Playwright中的自动化可访问性测试，推荐使用@axe-core/playwright。axe-core是一个业界领先的开源可访问性规则引擎，它能够检测Web内容中的多种可访问性问题，并提供详细的报告。通过与Playwright集成，开发者可以在自动化测试流程中无缝地进行可访问性检查。

1. 安装 @axe-core/playwright

首先，需要在项目中安装@axe-core/playwright：

npm install @axe-core/playwright

登录后复制

2. 集成并使用 @axe-core/playwright

以下是一个使用@axe-core/playwright进行可访问性测试的示例：

标签： html js json node go npm 浏览器 access 工具 ai json数组