- Description
- How to build, run the app, run tests and view the test results
- Playwright configuration
- Accessibility testing
The demo at /demos/accessibility-axe shows how to use Playwright to test your application for many types of accessibility issues.
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.
- Clone the repo.
- Using your favorite shell go to
/demos/accessibility-axe
. - Install the required npm packages with:
npm install
- Install the playwright browsers with:
npx playwright install
- Run the tests with:
This will start the app and run the playwright tests against it.
npm test
- After running the tests you can view test results with:
npm run test:show-report
- If you just want to run the app execute the command:
Once the command finishes the app should open in your default browser at http://127.0.0.1:4200/.
npm start
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
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:
- Declared a few variables at the start that are reused throughout the playwright configuration.
- Updated the
reporter
array. In addition to using the default html reporter, we've added the built-in list reporter. - Defined a baseURL so that we can use relative URLs when doing page navigations on the tests.
- 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 thewebServer.command
so that it launches your app and set thewebServer.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:
- a playwright.cli-options.ts file: to represent Playwright CLI options we care about.
- a playwright.env-vars.ts file: to represent environment variables we care about.
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.
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.