Playwright Test Automation for QA Engineers
A full working course on Playwright with TypeScript for QA engineers in large professional-services firms (Big 4 and similar). It covers the same ground as a comprehensive "zero to hero" Playwright curriculum: TypeScript essentials for test code, installation and project layout, running and debugging (CLI, UI mode, Inspector, codegen, Trace Viewer), locators and the strictness rule, web-first assertions, auto-waiting and the timeout hierarchy, every common UI component (inputs, checkboxes, radios, dropdowns, tooltips, dialogs, tables, date pickers, sliders, iframes), the Page Object Model and a scalable page architecture, custom fixtures, configuration and projects, environment variables and mobile emulation, authentication reuse through storageState, artifacts and reporters, visual regression testing, API requests, network interception and mocking, parallelism, retries, tags and flakiness control, Docker and CI on GitHub Actions. Every topic is taught the same way: the problem that exists without the feature, the feature that solves it, and the price you pay for using it. The course is written for people who will maintain a suite on a client engagement for years, not for people writing a demo test once — so review criteria, evidence for audit, secret handling and cost of maintenance are part of the material, not an appendix. By the end you should be able to build and maintain a Playwright suite unaided, and to pass an external certification-style exam on the same syllabus.
Path through the course · 27 units
any order · units can be taken in any order you likeView: map · steps
Stage 1
~1 h
1 · can start · Core
Why Playwright, and what it actually does
~1 h
Stage 2
~2.5 h
can start · Core
Stage 3
~1.5 h
4 · can start · Core
Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer
~1.5 h
Stage 4
~1 h
5 · can start · Core
The anatomy of a test: describe, hooks, steps, annotations
~1 h
Stage 5
~1 h
6 · can start · Core
Locator syntax: CSS, text, XPath and chaining
~1 h
Stage 6
~1.5 h
7 · can start · Core
User-facing locators and the strictness rule
~1.5 h
Stage 7
~2.5 h
can start · Core
Stage 8
~2.5 h
can start
10 · Core
Auto-waiting and the timeout hierarchy
~1.5 h
11 · UI components
Text inputs, keyboard and mouse
~1 h
Stage 9
~8.5 h
can start
12 · UI components
Checkboxes, radios, dropdowns and tooltips
~1.5 h
13 · UI components
Dialogs, alerts and web tables
~1.5 h
14 · UI components
Date pickers, sliders and iframes
~1.5 h
15 · Architecture
Page Object Model: the first objects
~1.5 h
20 · Evidence
Evidence: screenshots, video, traces and reporters
~1 h
22 · API
~1.5 h
Stage 10
~4 h
can start
16 · Architecture
Page architecture: base helpers and a page manager
~1.5 h
21 · Evidence
~1 h
23 · API
Network interception and mocking
~1.5 h
Stage 11
~1.5 h
17 · can start · Architecture
Fixtures: built-in, custom, and worker-scoped
~1.5 h
Stage 12
~1.5 h
18 · can start · Architecture
Configuration, projects, environments and mobile emulation
~1.5 h
Stage 13
~3 h
can start
19 · Architecture
Authentication once: setup projects, storageState and API login
~1.5 h
24 · Scale
Parallelism, retries, tags and flakiness
~1.5 h
Stage 14
~1.5 h
25 · can start · Scale
Docker and continuous integration
~1.5 h
Stage 15
~3 h
can start · Review
Exam
closed
final
Exam
The path in words
- Stage 1 · Why Playwright, and what it actually does — can start; ~1 h
- Stage 2 · The TypeScript you actually need for test code — can start; ~1.5 h
- Stage 2 · Installing Playwright and laying out the project — can start; ~1 h
- Stage 3 · Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer — can start; ~1.5 h
- Stage 4 · The anatomy of a test: describe, hooks, steps, annotations — can start; ~1 h
- Stage 5 · Locator syntax: CSS, text, XPath and chaining — can start; ~1 h
- Stage 6 · User-facing locators and the strictness rule — can start; ~1.5 h
- Stage 7 · Filtering, relationships and lists of elements — can start; ~1 h
- Stage 7 · Assertions and extracting values — can start; ~1.5 h
- Stage 8 · Auto-waiting and the timeout hierarchy — can start; ~1.5 h
- Stage 8 · Text inputs, keyboard and mouse — can start; ~1 h
- Stage 9 · Checkboxes, radios, dropdowns and tooltips — can start; ~1.5 h
- Stage 9 · Dialogs, alerts and web tables — can start; ~1.5 h
- Stage 9 · Date pickers, sliders and iframes — can start; ~1.5 h
- Stage 9 · Page Object Model: the first objects — can start; ~1.5 h
- Stage 9 · Evidence: screenshots, video, traces and reporters — can start; ~1 h
- Stage 9 · API requests with Playwright — can start; ~1.5 h
- Stage 10 · Page architecture: base helpers and a page manager — can start; ~1.5 h
- Stage 10 · Visual regression testing — can start; ~1 h
- Stage 10 · Network interception and mocking — can start; ~1.5 h
- Stage 11 · Fixtures: built-in, custom, and worker-scoped — can start; ~1.5 h
- Stage 12 · Configuration, projects, environments and mobile emulation — can start; ~1.5 h
- Stage 13 · Authentication once: setup projects, storageState and API login — can start; ~1.5 h
- Stage 13 · Parallelism, retries, tags and flakiness — can start; ~1.5 h
- Stage 14 · Docker and continuous integration — can start; ~1.5 h
- Stage 15 · Confusion pairs and exam readiness — can start; ~1.5 h
- Stage 15 · Delivery practice: strategy, review and evidence on an engagement — can start; optional; ~1.5 h
Programme · 27 units
| 1 | Why Playwright, and what it actually does Explain the two failure modes of legacy UI automation — timing flakiness and driver overhead — and how Playwright's architecture removes each | ~1 h | can start |
| 2 | The TypeScript you actually need for test code Read and write the JavaScript constructs that appear in every Playwright test: const/let, arrow functions, template literals, destructuring, objects and arrays | ~1.5 h | can start |
| 3 | Installing Playwright and laying out the project Install Playwright into a new repository and into an existing front-end repository without breaking either | ~1 h | can start |
| 4 | Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer Run the suite, a file, a single test and a tagged subset from the command line | ~1.5 h | can start |
| 5 | The anatomy of a test: describe, hooks, steps, annotations Structure a spec file with describe blocks and the four hooks, and say when each hook runs relative to workers | ~1 h | can start |
| 6 | Locator syntax: CSS, text, XPath and chaining Read the DOM vocabulary a locator depends on: tag, attribute, class, id, text node, parent and child | ~1 h | can start |
| 7 | User-facing locators and the strictness rule Apply the locator priority order: role, label, placeholder, text, alt, title, test id, CSS or XPath last | ~1.5 h | can start |
| 8 | Filtering, relationships and lists of elements Use filter() with hasText, hasNotText, has and hasNot to narrow a set by content or by a descendant | ~1 h | can start |
| 9 | Assertions and extracting values Distinguish web-first assertions from generic ones and default to the former | ~1.5 h | can start |
| 10 | Auto-waiting and the timeout hierarchy List the actionability checks and explain which action requires which of them | ~1.5 h | can start |
| 11 | Text inputs, keyboard and mouse Choose between fill, clear and pressSequentially, and say when character-by-character typing is required | ~1 h | can start |
| 12 | Checkboxes, radios, dropdowns and tooltips Use check, uncheck and setChecked correctly, and justify force: true on a visually hidden native input | ~1.5 h | can start |
| 13 | Dialogs, alerts and web tables Handle native alert, confirm, prompt and beforeunload dialogs, and explain Playwright's default behaviour | ~1.5 h | can start |
| 14 | Date pickers, sliders and iframes Automate a date picker by typing where possible and by navigating the calendar where not, using computed dates rather than literals | ~1.5 h | can start |
| 15 | Page Object Model: the first objects State the specific duplication a page object removes and the specific change it makes cheap | ~1.5 h | can start |
| 16 | Page architecture: base helpers and a page manager Extract shared behaviour into a shallow base class without building an inheritance tree | ~1.5 h | can start |
| 17 | Fixtures: built-in, custom, and worker-scoped Name the built-in fixtures and say what each provides | ~1.5 h | can start |
| 18 | Configuration, projects, environments and mobile emulation Use projects to run the same tests across browsers, devices, roles and environments | ~1.5 h | can start |
| 19 | Authentication once: setup projects, storageState and API login Build a setup project that authenticates once and saves the session to storageState | ~1.5 h | can start |
| 20 | Evidence: screenshots, video, traces and reporters Capture screenshots of the page, of an element and into a buffer, and attach them to the report | ~1 h | can start |
| 21 | Visual regression testing Write a screenshot comparison with toHaveScreenshot and manage the baseline files | ~1 h | can start |
| 22 | API requests with Playwright Use the request fixture to write pure API tests and assert on status, headers and body | ~1.5 h | can start |
| 23 | Network interception and mocking Intercept requests with page.route and fulfil, abort or modify them | ~1.5 h | can start |
| 24 | Parallelism, retries, tags and flakiness Configure workers and fullyParallel, and explain what a worker is | ~1.5 h | can start |
| 25 | Docker and continuous integration Run the suite in the official Playwright container and say why the image version must match the package version | ~1.5 h | can start |
| 26 | Confusion pairs and exam readiness Separate the pairs of Playwright concepts that are most often confused | ~1.5 h | can start |
| 27 | Delivery practice: strategy, review and evidence on an engagement Decide what to automate and at which level, and defend the decision to a client | ~1.5 h | can start |