Skip to content
L-SYSTEM

recommendedintermediate

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

the order is free · the steps below are the order the author suggests, not a conditionView: map · steps

  1. Stage 1

    ~1.2 h

  2. Stage 2

    ~2.9 h

    Core · by the author’s design, after “Why Playwright, and what it actually does”

  3. Stage 3

    ~1.8 h

  4. Stage 4

    ~1.2 h

  5. Stage 5

    ~1.2 h

  6. Stage 6

    ~1.7 h

  7. Stage 7

    ~2.9 h

    Core · by the author’s design, after “User-facing locators and the strictness rule”

  8. Stage 8

    ~3 h

  9. Stage 9

    ~9.8 h

  10. Stage 10

    ~4.7 h

  11. Stage 11

    ~1.8 h

  12. Stage 12

    ~1.7 h

  13. Stage 13

    ~3.5 h

    by the author’s design, after “Configuration, projects, environments and mobile emulation”

  14. Stage 14

    ~1.7 h

    • 25 · Scale · by the author’s design, after 2 of these: “Authentication once: setup projects, storageState and API login”, “Evidence: screenshots, video, traces and reporters”, “Parallelism, retries, tags and flakiness”

      Docker and continuous integration

      ~1.7 h

  15. Stage 15

    ~3.4 h

    Review

  16. Exam

    closed · enrol on the course

    • final · in the browser, without the assistant

      Exam

The path in words
  • Stage 1 · Why Playwright, and what it actually does — ~1.2 h
  • Stage 2 · The TypeScript you actually need for test code — by the author’s design, after “Why Playwright, and what it actually does”; ~1.7 h
  • Stage 2 · Installing Playwright and laying out the project — by the author’s design, after “Why Playwright, and what it actually does”; ~1.2 h
  • Stage 3 · Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer — by the author’s design, after “Installing Playwright and laying out the project”; ~1.8 h
  • Stage 4 · The anatomy of a test: describe, hooks, steps, annotations — by the author’s design, after “Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer”; ~1.2 h
  • Stage 5 · Locator syntax: CSS, text, XPath and chaining — by the author’s design, after “The anatomy of a test: describe, hooks, steps, annotations”; ~1.2 h
  • Stage 6 · User-facing locators and the strictness rule — by the author’s design, after “Locator syntax: CSS, text, XPath and chaining”; ~1.7 h
  • Stage 7 · Filtering, relationships and lists of elements — by the author’s design, after “User-facing locators and the strictness rule”; ~1.2 h
  • Stage 7 · Assertions and extracting values — by the author’s design, after “User-facing locators and the strictness rule”; ~1.7 h
  • Stage 8 · Auto-waiting and the timeout hierarchy — by the author’s design, after “Assertions and extracting values”; ~1.8 h
  • Stage 8 · Text inputs, keyboard and mouse — by the author’s design, after any one of these: “Filtering, relationships and lists of elements”, “Assertions and extracting values”; ~1.2 h
  • Stage 9 · Checkboxes, radios, dropdowns and tooltips — by the author’s design, after “Text inputs, keyboard and mouse”; ~1.7 h
  • Stage 9 · Dialogs, alerts and web tables — by the author’s design, after “Text inputs, keyboard and mouse”; ~1.7 h
  • Stage 9 · Date pickers, sliders and iframes — by the author’s design, after “Text inputs, keyboard and mouse”; ~1.8 h
  • Stage 9 · Page Object Model: the first objects — by the author’s design, after “Auto-waiting and the timeout hierarchy”; ~1.7 h
  • Stage 9 · Evidence: screenshots, video, traces and reporters — by the author’s design, after “Auto-waiting and the timeout hierarchy”; ~1.3 h
  • Stage 9 · API requests with Playwright — by the author’s design, after “Auto-waiting and the timeout hierarchy”; ~1.7 h
  • Stage 10 · Page architecture: base helpers and a page manager — by the author’s design, after “Page Object Model: the first objects”; ~1.7 h
  • Stage 10 · Visual regression testing — by the author’s design, after “Evidence: screenshots, video, traces and reporters”; ~1.3 h
  • Stage 10 · Network interception and mocking — by the author’s design, after “API requests with Playwright”; ~1.8 h
  • Stage 11 · Fixtures: built-in, custom, and worker-scoped — by the author’s design, after “Page architecture: base helpers and a page manager”; ~1.8 h
  • Stage 12 · Configuration, projects, environments and mobile emulation — by the author’s design, after “Fixtures: built-in, custom, and worker-scoped”; ~1.7 h
  • Stage 13 · Authentication once: setup projects, storageState and API login — by the author’s design, after “Configuration, projects, environments and mobile emulation”; ~1.7 h
  • Stage 13 · Parallelism, retries, tags and flakiness — by the author’s design, after “Configuration, projects, environments and mobile emulation”; ~1.8 h
  • Stage 14 · Docker and continuous integration — by the author’s design, after 2 of these: “Authentication once: setup projects, storageState and API login”, “Evidence: screenshots, video, traces and reporters”, “Parallelism, retries, tags and flakiness”; ~1.7 h
  • Stage 15 · Confusion pairs and exam readiness — by the author’s design, after 3 of these: “Date pickers, sliders and iframes”, “Authentication once: setup projects, storageState and API login”, “Visual regression testing”, “Network interception and mocking”, “Docker and continuous integration”; ~1.7 h
  • Stage 15 · Delivery practice: strategy, review and evidence on an engagement — by the author’s design, after “Docker and continuous integration”; optional; ~1.7 h

Programme · 27 units

1Why 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.2 h
2The 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.7 h
3Installing Playwright and laying out the project

Install Playwright into a new repository and into an existing front-end repository without breaking either

~1.2 h
4Running and debugging: CLI, UI mode, Inspector, codegen, Trace Viewer

Run the suite, a folder, a file, a single test, a project, the last failures and only the tests affected by a change from the command line

~1.8 h
5The 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.2 h
6Locator syntax: CSS, text, XPath and chaining

Read the DOM vocabulary a locator depends on: tag, attribute, class, id, text node, parent and child

~1.2 h
7User-facing locators and the strictness rule

Apply the locator priority order: role, label, placeholder, text, alt, title, test id, CSS or XPath last

~1.7 h
8Filtering, relationships and lists of elements

Use filter() with hasText, hasNotText, has, hasNot and visible to narrow a set by content, by a descendant or by visibility

~1.2 h

Show the remaining 19 units