Add accessibility checks to your Playwright end-to-end tests

Add accessibility checks to your Playwright end-to-end tests

Mar 18, 2024

Join us in today's video as we dive into the world of web accessibility testing with "axe-core". "axe-core" is used in Google Chrome's lighthouse and is quickly integrated in your Playwright end-to-end tests.

We'll integrate "axe-core/playwright", detect accessibility issues, attach these to test reports and even integrate accessibility checks in Checkly's synthetic monitoring thanks to a new beta runtime.

Happy Playwright accessibility testing!

Lighthouse "" call:
Lighthouse "hidden checks" code:
Playwright accessibility testing docs:
Checkly Synthetic Monitoring:

0:00 Intro

0:43 How does Lighthouse evaluate accessibility?

1:22 How does "axe" work?

2:08 Checkly's new runtime with "axe-core/playwright" support

2:34 Implement "axe-core/playwright" in your end-to-end tests

4:36 Make tests more readable with "test.step()"

5:48 Why does "axe-core" report more errors than Lighthouse?

6:34 Configure "axe-core/playwright"

7:45 Attach JSON to test reports

8:53 Lighthouse hides accessibility checks?

9:55 Accessibility checks in your synthetic monitoring

10:43 Outro

#playwright #syntheticmonitoring #testing #checkly