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进行可访问性测试的示例：

Mistral AI

Mistral AI被称为“欧洲版的OpenAI”，也是目前欧洲最强的 LLM 大模型平台

182

查看详情

const playwright = require('playwright');
const { injectAxe, get// 尝试获取可访问性快照
  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进行可访问性测试的示例：

const playwright = require('playwright');
const { injectAxe, getAxeResults } = require('axe-core-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);

  // 1. 将axe-core引擎注入到页面中
  await injectAxe(page);

  // 2. 运行可访问性检查并获取结果
  const accessibilityScanResults = await getAxeResults(page);

  // 打印发现的所有可访问性违规
  if (accessibilityScanResults.violations.length > 0) {
    console.log('发现以下可访问性违规：');
    accessibilityScanResults.violations.forEach((violation, index) => {
      console.log(`\n--- 违规 #${index + 1} ---`);
      console.log(`ID: ${violation.id}`);
      console.log(`描述: ${violation.description}`);
      console.log(`帮助链接: ${violation.helpUrl}`);
      console.log('受影响的元素:');
      violation.nodes.forEach(node => {
        console.log(`  - HTML: ${node.html}`);
        console.log(`    影响: ${node.failureSummary}`);
      });
    });
  } else {
    console.log('当前页面未发现可访问性违规。');
  }

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

@axe-core/playwright 的优势

• 全面的规则集： axe-core实现了WCAG（Web内容可访问性指南）等标准，能够检测出多种常见的可访问性问题。
• 详细的报告： 它不仅指出问题，还会提供问题的描述、严重性、受影响的元素以及如何修复的建议链接。
• 集成简单： 与Playwright的集成非常流畅，可以在现有测试框架中轻松加入可访问性检查。
• 持续更新： axe-core由Deque Systems维护，持续更新以适应最新的可访问性标准和最佳实践。

注意事项与总结

1. 侧重点转变： 从尝试“提取”原始的、层级化的可访问性树，转变为“测试”页面的可访问性合规性。@axe-core/playwright提供了更具操作性的结果，帮助开发者发现并修复问题。
2. page.accessibility.snapshot()的用途： 尽管它不提供层级结构，但其输出仍然包含每个可访问性节点的角色、名称等基本信息。在某些特定场景下，如果仅需获取这些扁平化的属性信息，它仍然可以使用。然而，对于全面的可访问性审计，它并非首选。
3. 结合手动测试： 自动化工具如axe-core可以检测约30-50%的可访问性问题。对于更复杂的用户体验问题和某些语义理解问题，仍然需要结合手动测试和专家评估。
4. 官方文档： 始终参考Playwright官方的可访问性测试文档（playwright.dev/docs/accessibility-testing），以获取最新的信息和最佳实践。

通过采纳@axe-core/playwright，开发者可以有效地将可访问性测试集成到其CI/CD流程中，从而在开发早期阶段发现并解决问题，确保构建出对所有用户都友好的高质量Web应用。

以上就是Playwright中可访问性树的提取与高级测试指南的详细内容，更多请关注php中文网其它相关文章！