typescript-selenium-webdriver-sample

typescript-selenium-webdriver-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 using Jest Snapshot Testing.

This sample uses Selenium WebDriver for browser automation and uses the corresponding @axe-core/webdriverjs library to integrate Axe and Selenium. But you don't have to use Selenium 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 Playwright, see our typescript-playwright-sample
• For Puppeteer, see our typescript-playwright-sample and use @axe-core/puppeteer
• For Cypress, use cypress-axe
• For WebdriverIO, use @axe-core/webdriverio
• For Protractor, keep using @axe-core/webdriverjs like the 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/index.test.ts: Jest test file that opens src/index.html in a browser with Selenium and runs accessibility scans against it with @axe-core/webdriverjs
• azure-pipelines.yml: Azure Pipelines config file that sets up our Continuous Integration and Pull Request builds
• jest.config.js: Jest configuration file that enables TypeScript (using ts-jest) and test result reporting in Azure Pipelines (using jest-junit)

Tools and libraries used

• TypeScript to author our test code
• Jest as our test framework, with Jest Snapshot Testing for baselining and ts-jest for TypeScript support
• selenium-webdriver to automate browsing to the page from the tests
• node-chromedriver to enable Selenium to drive Chrome
• @axe-core/webdriverjs to run an axe accessibility scan on the page from the Selenium 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. Install the stable version of Chrome

2. Clone this sample repository

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

3. Install the dependencies

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

4. Run the tests!

   yarn test # or npm test