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 "axe.run()" call: https://github.com/GoogleChrome/lighthouse/blob/main/core/gather/gatherers/accessibility.js#L28-L36
Lighthouse "hidden checks" code: https://github.com/GoogleChrome/lighthouse/blob/main/core/config/default-config.js#L586-L592
Playwright accessibility testing docs: https://playwright.dev/docs/accessibility-testing
Checkly Synthetic Monitoring: https://www.checklyhq.com/product/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