Browser Automation with Playwright

Foundational skill (2024+). See the master guide for context.

Browser test automation has shifted. Playwright — Microsoft's open-source framework — has become the default choice for new projects and is rapidly replacing Selenium in existing ones. It ships with auto-waiting, built-in assertions, browser contexts for isolation, and first-class support for modern web patterns like Shadow DOM, iframes, and single-page apps. If you are starting a QA career today, Playwright is the tool you should learn first.

Topics Covered

0. Very Quick Start — 00-very-quick-start/

The fastest path from "no repo" to "an application-specific Playwright + TypeScript harness scaffolded by Claude Code." Read this first if you want to start building today and absorb the deeper theory afterward. It is opinionated, agent-oriented, and assumes you will hand the artifacts and template to Claude Code rather than typing everything by hand.

• Pre-Requisites — Discover the Application — explore the product under test and produce the four customization artifacts (product-under-test.md, ui-journeys.md, api-endpoints.md, playwright-scaffolding.md) that any good scaffold needs as input
• Quick Start Preparation — turn the discovery output into a clean, scaffolding-ready package: normalize names, decide initial scope, lock in opinionated defaults, plan the agent and validation system
• Scaffolding Template — the actual copy-paste prompt you feed into Claude Code, together with the artifacts, to generate the initial repository state

Use this chapter if you need a real Playwright repo running soon, you are comfortable working with Claude Code, and you would rather start from a customized scaffold than a blank npm init.

Skip this chapter (for now) if you are brand new to test automation or to Playwright — start with Chapter 1 and come back here once the concepts feel familiar.

1. Automation Landscape — 01-automation-landscape/

• From Selenium to Playwright — how browser automation evolved, why Playwright won, and how the two architectures compare

2. Playwright Fundamentals — 02-playwright-fundamentals/

• Setup and First Test — installation, project structure, running your first test, and understanding the test runner
• Contexts, Waiting, and Assertions — browser contexts for isolation, auto-waiting mechanics, and web-first assertions

3. Locators and Selectors — 03-locators-and-selectors/

• Locator Strategies — role-based, text-based, CSS, and test-id locators — choosing the right strategy
• Advanced Locators — filtering, chaining, nth, frame locators, and building resilient selectors

4. Design Patterns — 04-design-patterns/

• Page Object Model — implementing POM in Playwright with TypeScript and Python
• Fixtures and Test Data — custom fixtures, test data management, and authentication state reuse

5. Advanced Scenarios — 05-advanced-scenarios/

• Network Mocking and API Testing — intercepting requests, mocking responses, and combining UI + API tests
• Visual Testing and Edge Cases — screenshot comparison, accessibility testing, multi-tab workflows, and file handling

6. Framework and CI — 06-framework-and-ci/

• Production Framework — project structure, configuration, environment management, and custom reporters
• Parallel Execution and Reporting — sharding, CI/CD integration, trace viewer, and test result analysis

7. Ecosystem and Future — 07-ecosystem-and-future/

• Migration and Comparison — migrating from Selenium/Cypress to Playwright, and choosing between frameworks
• AI-Assisted Testing — codegen, MCP integration, AI test generation, and the future of browser automation

A note on Chapters 1–7

Chapters 1 through 7 are the "long way around." They walk through how browser automation was understood, taught, and practiced through 2024 — Selenium history, the Playwright API piece by piece, locator strategies, the Page Object Model, fixtures, network mocking, framework architecture, CI integration, migration paths, and tool comparisons.

In 2026, most of the day-to-day mechanics are increasingly handled by Claude Code and similar agents — which is exactly what Chapter 0 (the Quick Start) leans into. So why keep the rest?

• Interviews still test it. Hiring managers ask about POM, fixtures, auto-waiting, flakiness, parallelization, and Selenium-vs-Playwright trade-offs. You need crisp answers.
• You cannot supervise an agent on a topic you do not understand. When Claude Code generates a fixture, a locator, or a CI workflow, you should be able to read it, judge it, and push back when it is wrong.
• Debugging is still human work. Trace viewer, flaky-test triage, and "why does this only fail in CI" investigations all draw on the foundations in Chapters 1–7.

Recommended path: if you are job-hunting or new to Playwright, read Chapters 1–7 in order. If you already have a working Playwright background and just need to ship a repo, start at Chapter 0 and dip into Chapters 1–7 as reference material.

Why This Matters

Browser automation is the backbone of end-to-end testing. Playwright has raised the bar: tests that took dozens of lines in Selenium take a handful in Playwright, with better reliability out of the box. Understanding Playwright deeply — not just the API, but the patterns, architecture, and ecosystem — separates QA engineers who write brittle scripts from those who build test frameworks that teams actually trust.