Copied to Clipboard
Then, we can start writing our first A11Y test with Playwright:
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright'; // 1
test.describe('homepage', () => { // 2
test('should not have any automatically detectable accessibility issues', async ({ page }) => {
await page.goto('https://your-site.com/'); // 3
const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4
expect(accessibilityScanResults.violations).toEqual([]); // 5
});
});
Let's stop for a minute and explain each of the steps marked with numbers individually:
- Imports the @axe-core/playwright package
- Uses normal Playwright Test syntax to define a test case
- Uses normal Playwright syntax to navigate to the page under test
- Awaits AxeBuilder.analyze() to run the accessibility scan against the page
- Uses normal Playwright Test assertions to verify that there are no violations in the returned scan results
Apart from using the default preset of Axe, we can also customize it to check for certain WCAG violcations like A or AA like following:
test('should not have any automatically detectable WCAG A or AA violations', async ({ page }) => {
await page.goto('https://your-site.com/');
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.analyze();
expect(accessibilityScanResults.violations).toEqual([]);
});
If we run this test locally, we should see similar result:
Local Playwright Accessibility test
If you would like to learn more about accessibility testing in playwright, check out here.
Now finally, the last step is to add the logic of running this test to CI (which we probably already have if we are using Playwright):
name: Playwright Tests
on:
push:
branches: main
jobs:
test:
//
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
And that's it! You have now implemented Accessibility audits in your Continuous Integration pipeline. Nicely done!
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
Vue School Link
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
✅ Summary
Well done! You have just learned how to implement Accessibility audits in your CI Pipeline.
Take care and see you next time!
And happy coding as always 🖥️