typescript-playwright-sample

typescript-playwright-sample

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, pass browser.webdriver to @axe-core/webdriverjs.

Getting Started

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)

Tools and libraries used

• 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

See it in action in Azure Pipelines

These two Azure Pipelines demonstrate what it looks like to incorporate passing or failing accessibility tests into your CI.

Passing examples

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:

Failing examples

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:

See it in action on your local machine

1. Clone this sample repository

   git clone https://github.com/microsoft/axe-pipelines-samples

2. Install the dependencies

   cd ./axe-pipelines-samples/typescript-playwright-sample
   yarn install # or npm install, whichever your project prefers

3. 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`)