This sample demonstrates how you might set up a CI build for a simple, static html page to perform end to end accessibility tests in a browser, including how to suppress pre-existing or third-party failures.
This sample uses Playwright for browser automation and uses the corresponding @axe-core/playwright
library to integrate Axe and Playwright. But you don't have to use Playwright to use Axe! If you prefer a different browser automation tool, you can still follow the same concepts from this sample by using the integration library appropriate for your framework:
- For Selenium, see our typescript-selenium-webdriver-sample
- For Puppeteer, use @axe-core/puppeteer
- For Cypress, use cypress-axe
- For WebdriverIO, see our typescript-selenium-webdriver-sample and use @axe-core/webdriverio
- For Protractor, see our typescript-selenium-webdriver-sample; keep using
@axe-core/webdriverjs
like that sample shows, but instead of creating your own Webdriver object, passbrowser.webdriver
to@axe-core/webdriverjs
.
The individual files in the sample contain comments that explain the important parts of each file in context.
Some good places to start reading are:
- tests/passing-examples.spec.ts: Playwright test file that opens src/index.html in a browser with Playwright and runs accessibility scans against it with
@axe-core/playwright
- azure-pipelines.yml: Azure Pipelines config file that sets up our Continuous Integration and Pull Request builds
- playwright.config.ts: Playwright configuration file that enables test result reporting in Azure Pipelines (using the
junit
reporter)
- TypeScript to author our test code
- Playwright as our test framework and browser automation library
- @axe-core/playwright to run an axe accessibility scan on the page from the Playwright browser
- Azure Pipelines to run the tests in a CI build with every Pull Request
- axe-sarif-converter to convert axe results to SARIF format
- SARIF SAST Scans Tab to visualize the results in Azure Pipelines
These two Azure Pipelines demonstrate what it looks like to incorporate passing or failing accessibility tests into your CI.
The passing accessibility tests included in passing-examples.spec.ts run as part of the yarn test
build step:
The test pass results display in the Tests tab of the build logs:
Detailed accessibility scan information also appears in the Scans tab, courtesy of the SARIF SAST Scans Tab extension:
The failing accessibility tests included in failing-examples.spec.ts run as part of the yarn test
build step:
The test pass/fail results display in the Tests tab of the build logs:
Detailed accessibility scan information also appears in the Scans tab, courtesy of the SARIF SAST Scans Tab extension:
-
Clone this sample repository
git clone https://github.com/microsoft/axe-pipelines-samples
-
Install the dependencies
cd ./axe-pipelines-samples/typescript-playwright-sample yarn install # or npm install, whichever your project prefers
-
Run the tests!
yarn test # or `npm test`. You can also append a file name to only run passing or failing tests (ex: `yarn test passing-examples.spec.ts`)