Learn Playwright with the Movies app

Hands-on course on a real Next.js movies app with a local mock API. Official concepts live on playwright.dev. This site is where you practice.

Try the live Movies app in the browser. Clone the repository when you want to run Playwright locally.

Pick your path

Path	Start at	Skim or skip
Beginner	01 Overview	none
Intermediate	05 Tags or 06 Auth	01 to 04 if you already know ARIA, UI Mode, and env credentials
AI-first	Agent house style and 07 Fixtures, then 09 AI path	Still read fixtures before generating tests

Start with 00 Start here once.

Agenda

1. Overview, structure, config, first test
2. First test and credentials
3. ARIA snapshots
4. Debugging: UI Mode and traces
5. Tags and annotations
6. Auth setup and storageState
7. beforeEach, fixtures, helpers
8. Network mocking and API testing
9. AI writing path
10. Bonus: sharding
11. Bonus: page objects

Course outcomes

By the end you should be able to:

• Run tests with the CLI and UI Mode on a local clone
• Write a small test with .env credentials (no Codegen)
• Assert with role locators and toMatchAriaSnapshot
• Debug with UI Mode and Trace Viewer before changing locators
• Organize runs with tags and annotations
• Use auth setup and storageState for logged-in projects
• Prefer helpers and list fixtures over copy-pasted setup
• Mock network responses and call the mock API with request
• Drive plan, generate, and heal with house style, then pass the review rubric

Foundations smoke check

After modules 01 to 04, these should pass on a local clone:

npx playwright test tests/logged-out/movie-list.spec.ts --project=chromium
npx playwright test tests/logged-out/auth.spec.ts --project=chromium
npx playwright test tests/logged-out/search.spec.ts --project=chromium

Extra practice

After the matching modules (especially 03, 07, and 09), try the exercises on a clone. Solutions live next to each exercise—attempt the task first.

Reference on this site

• Testing guide
• AI testing
• Agent house style
• Exercises