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

The accessibility tests 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