How do I use the @axe-core/playwright package to run accessibility tests in Playwright?


Adding Accessibility Tests with Playwright

You can add accessibility tests in Playwright using the @axe-core/playwright package. This package allows you to run the axe accessibility testing engine as part of your Playwright tests.

import { AxeBuilder } from '@axe-core/playwright';

test('should have no accessibility violations', async ({ page }) => {
  await page.goto('https://ray.run/');
  const results = await new AxeBuilder({ page }).analyze();

This test navigates to a page and runs an accessibility scan. The analyze() method returns scan results, which you can then assert using Playwright Test assertions.

You can also add scan results as a test attachment using testInfo.attach(). This is useful for debugging purposes.

test('should have no accessibility violations', async ({ page, testInfo }) => {
  await page.goto('https://ray.run/');
  const results = await new AxeBuilder({ page }).analyze();
  testInfo.attach(results, 'application/json');

You can share common AxeBuilder configuration across tests using test fixtures. This is useful when you want to use a common set of rules or suppress known violations.

const test = baseTest.extend({
  axeBuilder: async ({ page }, use) => {
    const axeBuilder = new AxeBuilder({ page });
    axeBuilder.withTags(['wcag2a', 'wcag2aa']);
    await use(axeBuilder);

In this example, the withTags() method is used to constrain the accessibility scan to rules tagged as corresponding to WCAG success criteria.

For more details, check out our blog post on Accessibility Testing with Playwright.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.