Playwright无障碍性测试实践：从DOM到可访问性树的探索与现代工具应用

本文探讨了使用playwright进行无障碍性测试时，如何有效获取和分析页面的可访问性树（accessibility tree, at）。针对`page.accessibility.snapshot()`方法的局限性及其已弃用状态，文章重点推荐并演示了如何集成和使用业界标准的`@axe-core/playwright`库进行自动化无障碍性审计，并强调了结合浏览器开发者工具进行手动验证的重要性。

理解可访问性树（Accessibility Tree）

可访问性树（Accessibility Tree，简称AT）是浏览器根据文档对象模型（DOM）构建的一个特殊表示，旨在为辅助技术（如屏幕阅读器、语音识别软件等）提供页面内容的语义和结构信息。与DOM不同，AT只包含对辅助技术有意义的元素，例如交互式元素（按钮、输入框）和描述性元素（标签、标题）。它提供了一种简化且语义化的视图，帮助用户理解和操作网页。Playwright等自动化工具通过与浏览器引擎交互，间接或直接地利用了AT信息，例如通过getByRole等选择器。

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

在Playwright中，曾有一个page.accessibility.snapshot()方法，其设计初衷是为了获取页面的可访问性信息。然而，实际使用中，该方法存在显著局限性，并且目前已被弃用。

最初的尝试可能如下所示：

const playwright = require('playwright');

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

    await page.goto(url);

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

    await browser.close();
}

// 示例用法
// getAccessibilitySnapshot('https://example.com');

登录后复制

然而，page.accessibility.snapshot()返回的通常是一个扁平化的元素列表，而非一个具有父子层级关系的完整可访问性树结构，这与在Chrome开发者工具中观察到的层次化AT大相径庭。由于其输出的结构不符合预期，且该功能已被标记为弃用，因此不建议依赖此方法来获取精确的、结构化的可访问性树。

现代化无障碍性测试方案：集成@axe-core/playwright

鉴于page.accessibility.snapshot()的局限性，进行全面的无障碍性测试应转向使用更专业、更强大的工具。业界标准的选择是集成axe-core，特别是其Playwright版本——@axe-core/playwright。

axe-core是一个高度优化的无障碍性规则引擎，能够识别出网页中常见的无障碍性问题，并提供详细的报告和修复建议。它遵循WCAG（Web内容无障碍指南）标准，能够检测出包括对比度不足、缺少替代文本、键盘导航问题等多种缺陷。

安装与配置

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

npm install @axe-core/playwright axe-core

登录后复制

使用示例

以下是如何在Playwright测试脚本中集成@axe-core/playwright来执行无障碍性审计的示例：

标签： html js json node go npm 浏览器 app access 工具 ai google 常见问题