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

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

npm install @axe-core/playwright axe-core

const playwright = require('playwright');
const { AxeBuilder } = require('@axe-core/playwright');

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

    try {
        await page.goto(url, { waitUntil: 'networkidle' });

        // 创建AxeBuilder实例并运行审计
        const accessibilityScanResults = await new AxeBuilder({ page })
            .analyze();

        // 打印审计结果
        console.log(`URL: ${url}`);
        console.log('--- Accessibility Scan Results ---');

        if (accessibilityScanResults.violations.length > 0) {
            console.log('Violations Found:');
            accessibilityScanResults.violations.forEach((violation, index) => {
                console.log(`  ${index + 1}. Rule: ${violation.id}`);
                console.log(`     Impact: ${violation.impact}`);
                console.log(`     Description: ${violation.description}`);
                console.log(`     Help: ${violation.helpUrl}`);
                console.log(`     Nodes:`);
                violation.nodes.forEach(node => {
                    console.log(`       - Selector: ${node.target.join(', ')}`);
                    console.log(`         HTML: ${node.html}`);
                    console.log(`         Fixes: ${node.failureSummary}`);
                });
            });
        } else {
            console.log('No accessibility violations found!');
        }

        console.log(`Passes: ${accessibilityScanResults.passes.length}`);
        console.log(`Incomplete: ${accessibilityScanResults.incomplete.length}`);
        console.log(`Inapplicable: ${accessibilityScanResults.inapplicable.length}`);

    } catch (error) {
        console.error(`Error during accessibility audit for ${url}:`, error);
    } finally {
        await browser.close();
    }
}

// 示例用法
runAccessibilityAudit('https://www.google.com');
// runAccessibilityAudit('https://your-website-with-issues.com');

// 示例：使用getByRole验证元素的可访问性名称
await page.getByRole('textbox', { name: 'email' }).click();
// 如果此行代码能够成功执行，说明一个角色为“textbox”且可访问性名称为“email”的元素存在于AT中