Answer

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();
  expect(results.violations).toHaveLength(0);
});

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');
  expect(results.violations).toHaveLength(0);
});

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.