UI Automation with Playwright
A practical guide to end-to-end UI testing with Playwright: from install and recording through page objects, authentication and CI. Written in the same order I use on a project. New to automation? Read Automation first for the mental model.
Important: This track is in progress. Every code sample lives in
playwright/sample/and the status table below says which pages have been run end to end on Playwright 1.63 and which have not. Pages marked "Not yet validated" follow the official docs but have not been exercised on a real project yet.
Status
| Page | Status | Notes |
|---|---|---|
| 1. Install Tools | Validated | Init command and first run executed on macOS |
| 2. Understand What to Automate | Reviewed | Conceptual page, nothing to run |
| 3. Playwright Concepts | Reviewed | Conceptual page, code samples come from the validated sample project |
| 4. Recording with Codegen | Partly validated | CLI flags checked against 1.63. Recorder session and VS Code flow not yet captured |
| 5. Locators and Assertions | Validated | All examples run in the sample project |
| 6. Test Structure and Page Objects | Validated | Page objects, fixtures and data file run in the sample project |
| 7. Debug | Partly validated | Trace recording, trace CLI and run flags verified. UI mode and Inspector not yet captured |
| 8. Configuration and Running | Validated | Config and commands run in the sample project |
| 9. Authentication and State | Validated | Setup project and storageState run in the sample project |
| 10. Running in CI | Not yet validated | Workflow matches the official docs and the generated file. Not yet run on this repo's CI |
Basics
| # | Topic | Description |
|---|---|---|
| 1 | Install Tools | Node, VS Code extension, Playwright project, browsers |
| 2 | Understand What to Automate | Which flows deserve a UI test |
| 3 | Playwright Concepts | Tests, locators, actions, assertions, fixtures, projects |
| 4 | Recording with Codegen | Record a flow, then clean it up |
| 5 | Locators and Assertions | Finding elements that survive redesigns, checks that retry |
| 6 | Test Structure and Page Objects | Naming, hooks, page objects, fixtures, test data |
| 7 | Debug | UI mode, trace viewer, inspector, common failures |
Running
| # | Topic | Description |
|---|---|---|
| 8 | Configuration and Running | The config file, projects, parallelism, reports |
| 9 | Authentication and State | Log in once, reuse the session |
| 10 | Running in CI | GitHub Actions, artifacts, sharding, flaky policy |
Appendix
| Topic | Description | |
|---|---|---|
| Future / To Explore | API testing, mocking, visual and aria snapshots, agents |
The Sample Project
Everything shown in these pages runs from playwright/sample/ in the repository:
cd playwright/sample
npm ci
npx playwright install chromium
npx playwright test
Nine tests against two public demo apps: Playwright's TodoMVC demo and saucedemo.com.