Skip to content

Latest commit

 

History

History
87 lines (66 loc) · 5.42 KB

README.md

File metadata and controls

87 lines (66 loc) · 5.42 KB
Raw

Accessibility using @axe-core/playwright

Description

The demo at /demos/accessibility-axe shows how to use Playwright to test your application for many types of accessibility issues.

How to build, run the app, run tests and view the test results

Important

Required dependencies:

  • Node. Tested working with v20.10.0. If you need to have different versions of node installed it's recommended that you use Node Version Manager to install and swap between node versions.
  • npm@latest: package manager used on the demos. Tested working on 10.2.5.
  • VS Code is recommended as a code editor but you can use whatever you prefer.
  1. Clone the repo.
  2. Using your favorite shell go to /demos/accessibility-axe.
  3. Install the required npm packages with: 
    npm install
  4. Install the playwright browsers with: 
    npx playwright install
  5. Run the tests with: 
    npm test
    This will start the app and run the playwright tests against it.
  6. After running the tests you can view test results with: 
    npm run test:show-report
  7. If you just want to run the app execute the command: 
    npm start
    Once the command finishes the app should open in your default browser at http://127.0.0.1:4200/.

Note

When you run the tests in this demo with npm test you will have 3 tests that pass and 3 that fail. This is intentional. The app being tested does have accessability issues and this demo shows how to write a test that captures them as well as how to write tests to exclude certain accessibility rules. For more information see the comments at example.spec.ts.

The accessibility scan report can be found attached to the tests.

accessibility-axe.mp4

Playwright configuration

The majority of the content of the playwright.config.ts file is what you get by default after adding Playwright to your project with npm init playwright@latest.

The main changes are:

  1. Declared a few variables at the start that are reused throughout the playwright configuration.
  2. Updated the reporter array. In addition to using the default html reporter, we've added the built-in list reporter.
  3. Defined a baseURL so that we can use relative URLs when doing page navigations on the tests.
  4. Configured the webServer block to run the Angular app locally so that the tests can be executed against it. If you're not testing an Angular app that's fine, you just need to adjust the webServer.command so that it launches your app and set the webServer.url to the url your app will be running at. For more information see the webServer docs.

Note

The _isRunningOnCI variable used on the playwright.config.ts changes the value of some options when running tests on CI. To set the _isRunningOnCI variable to true you must set the environment variable CI to true before running the tests. For more information regarding using Playwright on a CI environment see Playwright docs on Continuous Integration.

Furthermore, we have created:

Note

You don't have to create the playwright.cli-options.ts or the playwright.env-vars.ts file. You can have all of this on the playwright.config.ts. Code structure is up to you.

Note

Depending on your playwright.config.ts, make sure you update your .gitignore to exclude any directory used by test results, report results, etc. Scroll to the end of this demo's .gitignore to see an example.

Accessibility testing

This demo is the recommended approach to doing accessibility testing with Playwright. It relies on the @axe-core/playwright package which adds support for running the axe accessibility testing engine as part of your Playwright tests. For more information see Playwright documentation on accessibility testing.

For another approach to accessibility testing with Playwright see the accessibility-lighthouse demo which uses the Chrome only lighthouse library.