Testing Accessibility with AXE

Detects whether a page or elements are accessible. More information in the package README or in the Playwright docs.

@axe-core/playwright and axe-html-reporter are pre-installed.

import { test, expect } from '@liquidlight/playwright-framework';
import AxeBuilder from '@axe-core/playwright';
import { createHtmlReport } from 'axe-html-reporter';

/**
 * Ensure our base page template is accessible
 */
test('"Tests" page is accessible', async ({ page }, testInfo) => {
	await page.goto('/tests');

	// Generate results if not passed in
	if (!results) {
		results = await new AxeBuilder({ page }).analyze();
	}

	// Generate a HTML report
	createHtmlReport({
		results,
		options: {
			outputDir: 'playwright-report/data'
		},
	});

	// Attach the report
	await testInfo.attach('accessibility-scan-results', {
		path: 'playwright-report/data/accessibilityReport.html',
	});

	expect(results.violations).toEqual([]);
});