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.
If you still have questions, please ask a question and I will try to answer it.
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 [email protected].