How do I create and use a fixture for managing access levels in Playwright tests?

Answer

To create a fixture for access levels in @playwright/test, first, extend the base test by providing a makeAxeBuilder function. This new test can be used in multiple test files, and each of them will get a consistently configured AxeBuilder instance.

Here's an example of how to create and use this fixture:

import { test as baseTest } from '@playwright/test';
import { AxeBuilder } from 'axe-playwright';

const test = baseTest.extend<{ makeAxeBuilder: () => AxeBuilder }>({
  makeAxeBuilder: async ({ page }, use) => {
    const axeBuilder = new AxeBuilder({ page });
    // Add common configuration here
    await use(axeBuilder);
  },
});

test('Accessibility check on ray.run', async ({ page, makeAxeBuilder }) => {
  await page.goto('https://ray.run/');
  const axeBuilder = makeAxeBuilder();
  // Add test-specific configuration here
  const results = await axeBuilder.analyze();
  // Attach results to test output
  testInfo.attach(results, 'application/json');
});

Replace the earlier examples' new AxeBuilder({ page }) with the newly defined makeAxeBuilder fixture. You can then include additional test-specific configuration as needed.

If you want to include all of the scan results as part of your test results for debugging purposes, you can add the scan results as a test attachment with testInfo.attach(). Reporters can then embed or link the full results as part of your test output.

By using fixtures like this one, you can streamline your testing process while ensuring consistent accessibility standards across your entire application.