Is it possible to use Playwright to do Accessibility Testing?
Yes it's possible! Deque labs provides a tool called axe to assist with this. For use in playwright they specifically provide the axe-core/playwright package, and getting started is easier than ever.
The below code snippet walks through how to use AxeBuilder function from the axe-core/playwright package. Calling analyze() will return a promise that can be awaited to get all the details from the scan. I've also included a few ways to interact with the results. Either by printing them out in the console, attaching the violations to the test report that gets generated when using the playwright test runner. And finally the expect block that will fail the test if any violations are present.
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
test("Visit home page and run an axe test @axe", async ({ page }, testInfo) => {
await page.goto("https://broken-workshop.dequelabs.com/");
//Analyze the page with axe
const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
//Attached the violations to the test report
await testInfo.attach("accessibility-scan-results", {
body: JSON.stringify(accessibilityScanResults.violations, null, 2),
contentType: "application/json",
});
//Console log the violations
let violation = accessibilityScanResults.violations;
violation.forEach(function (entry) {
console.log(entry.impact + " " + entry.description);
});
//Expect violations to be empty
expect(accessibilityScanResults.violations).toEqual([]);
});
The above example [source] is simple but taking a look at the Playwright docs, you will see examples showing the ability to:
- Configure axe to scan a specific part of a page
- Exclude individual elements from a scan
- Disable individual scan rules (Complete list of Axe Rules here)
- Using Snapshots to allow specific known issues
- Creating a fixture for AxeBuilder to DRY up your code
You are also able to call the AxeBuilder with certain tags for the checks you want to make based on the types of tests you want to run.
//Analyze the page with axe
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.analyze();
Axe is a tool that is used across many different automation solutions, if you want to try it out as a chrome extension you can install it here.
The more I use and experiment with Playwright the more I am impressed in what all the tool can do.
