Playwright enables reliable end-to-end testing for modern web apps and it has become my preferred approach to test web apps. This repo aims to consolidate and share some of the experiences I've had and the solutions I've come up with whilst using Playwright.
My experiences with Playwright focused on using it as the test tool whilst developing web apps, where the main goal was to get better tests, including Visual Regression and Accessibility tests, which could run on a developer's machine as part of their development loop as well as run as part of the build pipeline of the web app, before the app is even deployed to an environment.
Important
Although the code demos presented here use Angular for the target app of the Playwright tests, the Playwright concepts that are demoed are frontend framework agnostic which means they and can be applied to any frontend framework.
| Demo | Description |
|---|---|
| code-coverage-with-monocart-reporter | Playwright code coverage using monocart-reporter. |
| code-coverage-with-istanbul-via-webpack-babel-plugin | Playwright code coverage using Istanbul via Webpack Babel plugin. |
| docker | Run Playwright tests in Docker. Also shows how to use Playwright tests UI mode in Docker. Especially helpful to eliminate screenshot differences when running the tests across different Operating Systems. For instance, if you develop in Windows but your CI runs on Linux. |
| stale-screenshots-cleanup | Delete stale Playwright test screenshots. |
| fixtures | Shows useful Playwright fixtures you can reuse: - time/date emulation: so that you can do reliable asserts on screenshots or text that contains time/date information; - capture console messages: so that you can assert on console messages. - fail tests upon unexpected console messages: allows you to define allowed console messages and will fail the tests if any unexpected console message is produced. Good to catch left over debug/temp console messages. - capture page error: so that you can assert on uncaught exceptions. - fail tests on page errors: fails tests if any uncaught exception is produced. - project name: allows you to control test behaviour depending on the Playwright project. - annotations: shows how to add custom annotations to tests. |
| monocart-reporter-advanced-config | Shows some advanced features of the monocart-reporter HTML report: - add report metadata. - customize the style of test tag. - automatically collect test comments and add them to the test report. |
| accessibility-axe | How to use Playwright for accessiblity testing using the @axe-core/playwright npm package. |
| accessibility-lighthouse | How to use lighthouse with Playwright for accessiblity, SEO, performance and best-practices recommendations. |
- Which code coverage should I use with Playwright? monocart-reporter or Istanbul with Webpack Babel plugin?
- How to debug Playwright tests
- Should you use Git LFS when you use screenshots?
- The
webServer.reuseExistingServerconfiguration option - Which reporters should I use?
- Limit reporters when running in UI mode
- Add start up logs
- You might not need to run all your tests against all your projects
- Avoid using watch mode on the target test apps
- What are the available devices for test projects configuration?
- Use test parallelization even on CI
- Set the filepath for screenshots
- webServer.url: beware of
localhostvs127.0.0.1when using Node - You can inject test only code into your app with
page.addInitScript - Beware of font kerning/CSS issues with Visual Regression Tests
- Playwright docs: official documentation.
- Playwright API reference: official API reference.
- Playwright's YoutTube channel: small sized videos about what's new with each Playwright release. Great way to keep up to date.
- Using Playwright Test to run Unit Tests: good explanation of why you should use Playwright even for unit tests.
- Learn Playwright - Resources for learning end-to-end testing using Playwright automation framework: great curated collection of Playwright resources. From blogs, to FAQS, to videos, etc.
- CommitQuality Playwright's YouTube Playlist: small sized tutorials that will help you master Playwright.
- Playwright's Discord channel: great for interacting with community members and asking questions.
- Playwright's GitHub issues: always worth searching through when you're trying to learn new concepts or in case others have faced some problem you might be facing.