Playwright tutorial

Test real websites in Chromium, Firefox and WebKit with Playwright, in TypeScript or JavaScript, with a test lab in your browser.

Start the course

Course contents

Playwright Foundations

  1. Introduction to Playwright — What Playwright is and why it was made, its history and features, the browsers, languages and platforms it supports, how it works (architecture, browser contexts, the protocol, auto-waiting), its tools and its three npm packages.
  2. Installation and Project Setup — System requirements, creating a project with npm init playwright@latest and its prompts, adding Playwright to an existing project, installing browsers (one at a time, with system dependencies, and where they are stored), the project files, the VS Code extension, and keeping Playwright up to date.
  3. Your First Playwright Test — The parts of a test (import, test(), the page fixture, page.goto()), writing a test that acts and checks, running tests from the command line in one file or one browser, headless and headed mode, reading results (passed, failed, flaky, skipped), the HTML report, and recording tests with Codegen.

Core Test Writing

  1. Locators — What a locator is, why locators are lazy and strict, the built-in getBy locators (role, text, label, placeholder, alt text, title, test id), CSS and XPath, narrowing with chaining, filter, nth, and, or and within, choosing resilient locators from the accessibility tree, and naming locators with describe().
  2. Actions and Auto-Waiting — Navigation (goto options, reload, back and forward, waitForURL, waitForLoadState), mouse actions (click options, double-click, right-click, hover), typing (fill, clear, pressSequentially, press, focus, blur), form actions (check, selectOption, radio buttons), scrolling, and how auto-waiting works: actionability checks, retries, waitFor, why fixed sleeps fail, and the force and trial options.
  3. Assertions — expect() and web-first assertions that retry, why assertions must be awaited, locator assertions for state, content, attributes and count, page assertions, generic and asymmetric matchers, .not, custom messages and timeouts, soft assertions, expect.poll and toPass, and custom matchers with expect.configure and expect.extend.

Test Structure and Configuration

  1. Organizing Tests — Grouping tests with test.describe, keeping tests independent, the four hooks and their order, test.step with boxed steps and return values, annotations (skip, fixme, fail, slow, conditional, only, custom), tags, picking tests with --grep, --only-changed and --last-failed, and generating tests from data.
  2. Fixtures — What fixtures are and why they beat hooks, the built-in fixtures (page, context, browser, browserName, request), the testInfo object, custom fixtures with test.extend and use(), fixtures that depend on others, overriding built-ins, test and worker scope, automatic fixtures, timeouts, option fixtures, and sharing fixtures with mergeTests and types.
  3. Playwright Configuration — playwright.config.ts and defineConfig, core options (testDir, testMatch, outputDir, forbidOnly, shared use options, test.use), projects for browsers, branded channels, dependencies and setup projects, the webServer option, every kind of timeout, workers and parallel mode, retries and flaky tests, environment variables with dotenv, command-line overrides, and global setup.

Browser Control

  1. Browser Contexts, Pages, and Emulation — The browser, context and page hierarchy, how contexts isolate tests, creating contexts for multi-user tests, working with several pages, popups and new windows, setting the viewport and emulating devices, locale, timezone, geolocation and permissions, colour scheme, reduced motion, user agent and disabling JavaScript.
  2. Handling Complex Page Elements — Frames and nested frames, Shadow DOM and its limits, alert, confirm, prompt and beforeunload dialogs, unexpected overlays with addLocatorHandler, file uploads and file choosers, downloads, the keyboard and mouse APIs, drag and drop, working with lists, and the clipboard.

Authentication, Network and APIs

  1. Authentication and Storage State — Why logging in before every test is slow, what storage state holds (cookies and local storage), saving and reusing a login with storageState, the setup project pattern, logging in through the API, several user roles, logged-out tests, and keeping test accounts and session files safe.
  2. Network Interception and Mocking — Watching requests and responses, waiting for a call with waitForRequest and waitForResponse, intercepting calls with page.route, URL patterns, mocking with route.fulfill, blocking with route.abort, changing requests with route.continue, chaining with route.fallback, editing real responses with route.fetch, error, empty, slow and offline states, context-wide routes, and HAR files.
  3. API Testing — Why test APIs directly, the request fixture, sending GET, POST, PUT, PATCH and DELETE requests with JSON, form data, query params and headers, checking status, headers and JSON with toBeOK and toMatchObject, API authentication with tokens and cookies, a full create-read-update-delete flow, error cases, separate request contexts, and mixing API and UI steps in one test.

Test Design and Quality

  1. Page Object Model — Why repeated locators make tests hard to change, what a page object is, writing a page class with locators and actions, using it in tests, pages that lead to other pages, component objects for repeated parts, page objects as fixtures, where assertions belong, folder structure, and common anti-patterns.
  2. Visual, Snapshot, and Accessibility Testing — Visual regression testing with toHaveScreenshot, baselines and --update-snapshots, masking dynamic content, thresholds and platforms, snapshot testing values with toMatchSnapshot, ARIA snapshots with ariaSnapshot and toMatchAriaSnapshot, automated accessibility scans with @axe-core/playwright, and keyboard checks axe cannot do.

Debugging, Reporting and CI

  1. Debugging and Tracing — Reading Playwright error messages, call logs and code frames, the Playwright Inspector with --debug and page.pause(), headed runs and slow motion, UI Mode, the VS Code extension, logging with console.log, test.step and attachments, listening to page console messages and errors, recording and reading traces in the Trace Viewer, screenshots and videos on failure, and a checklist for flaky tests.
  2. Reporting — What test reports are for, the list, line and dot terminal reporters, the HTML report and show-report, JSON and JUnit reports for other tools, the GitHub Actions reporter, using several reporters at once, annotations, tags and attachments in reports, and writing a custom reporter.
  3. CI/CD and Scaling — Why tests run on every push, a GitHub Actions workflow for Playwright, CI settings in the config (forbidOnly, retries, workers, reporters), environment variables and secrets, workers and parallel tests, sharding across machines and merging blob reports, running in Docker, other CI systems, and choosing which tests run when.

Advanced Playwright and AI

  1. Playwright Library and Advanced Browser Control — Playwright Test versus the Playwright Library, writing automation scripts with chromium.launch(), launch options, persistent contexts and connecting to running browsers, PDFs and full-page screenshots, controlling time with page.clock, running code in the page with evaluate, addInitScript and exposeFunction, waiting for page conditions with waitForFunction, and CDP sessions.
  2. AI-Assisted Testing with Agents, MCP, and CLI — How AI coding agents work with Playwright, accessibility snapshots as the agent's view of a page, the Playwright MCP server, playwright-cli for coding agents, Playwright Test Agents (planner, generator and healer) with init-agents and seed tests, reviewing AI-written tests for weak locators, fixed waits and missing checks, and safe habits when agents drive browsers.
  3. Capstone: Test the Practice Shop — Build a complete Playwright suite for the Practice Shop step by step: risk-based planning, a CI-ready config with a setup project, a saved login, page objects, fixtures with option data, end-to-end journeys with unhappy paths, API-powered test data, mocked failure states, an accessibility gate, investigating a failure with a trace, and shipping the suite to CI.
  4. Playwright Cheat Sheet — A one-page reference for the whole course: CLI commands, test structure, locators, actions, assertions, configuration, fixtures, authentication, network mocking, API testing, debugging, reporting and CI, with runnable examples and three review exercises.