The 90 days at a glance
Ninety days, seven phases, one capstone. Each phase builds on the one before it, so the order matters more than the pace.
| Phase | Days | You finish with |
|---|---|---|
| JavaScript | 1-14 | Plain JavaScript you can read and write without a tutorial open |
| TypeScript | 15-24 | A TypeScript project wired to Playwright, and async that makes sense |
| Playwright basics | 25-40 | A first suite, debugged with the Inspector and Trace Viewer |
| Playwright advanced | 41-58 | A Page Object Model framework with tags, retries and reports |
| AI with Playwright | 59-70 | Specs drafted with MCP and agents, reviewed by you |
| CI/CD | 71-78 | The suite running on every push, sharded in Docker |
| Cucumber BDD | 79-84 | Feature files the whole team can read |
| Capstone projects | 85-90 | Five end to end projects on your GitHub |
Plan for about two hours a day. Code every day, even if only for twenty minutes: the streak matters more than any single long session. If you fall behind, slow down rather than skip. Every later phase leans on JavaScript and async.
JavaScript: days 1-14
Goal: read and write plain JavaScript comfortably. Playwright is a JavaScript library first, so this is the ground everything else stands on.
| Days | What to learn |
|---|---|
| 1-2 | Variables (let, const, var); data types (Number, String, Boolean, Array, Object) |
| 3-4 | Operators and expressions; conditional statements (if, else, switch) |
| 5-6 | Loops (for, while, forEach), with practice exercises |
| 7-8 | Functions and arrow functions |
| 9-10 | Arrays and objects (push, pop, map, filter and more), with hands-on coding practice |
| 11-12 | Modules (export and import); template literals |
| 13-14 | Default parameters and destructuring; a checkpoint round of exercises |
Build by day 14: a GitHub repo of small solved exercises, plus one module that exports helper functions you import somewhere else.
Practice: Learn JavaScript for Playwright, JavaScript foundations, chapters 1-4, JavaScript notes, the JavaScript cheat sheet, and the JavaScript questions in Coding Practice (sign in).
TypeScript: days 15-24
Goal: move to TypeScript, the language most Playwright frameworks are written in, and get comfortable with async code, because every Playwright call is async.
| Days | What to learn |
|---|---|
| 15-16 | What TypeScript is and why automation uses it; set up a TypeScript project with Playwright |
| 17-18 | Types vs interfaces |
| 19-20 | Sync vs async programming; promises and the callback hell pyramid |
| 21-22 | Understanding asynchronous code; the promises and async/await pattern in TypeScript |
| 23-24 | Optional chaining (?.) and basic generics; checkpoint |
Build by day 24: a typed helper module (an interface for a user, a generic API response type, an async function that awaits a fake request) that compiles with zero errors.
Practice: Learn TypeScript for Playwright, Playwright TypeScript vs Python, and the TypeScript questions in Coding Practice.
Async is the step most people rush. If await still feels like magic on day 24, spend two more days here. Every Playwright action returns a promise, and a missing await is the most common bug in a beginner's suite.
Playwright basics: days 25-40
Goal: install Playwright, write and debug your first tests, and drive the browser with confidence: navigation, tabs, contexts, storage and Shadow DOM.
| Days | What to learn |
|---|---|
| 25-26 | Set up VS Code (or Antigravity) for Playwright: essential plugins and workspace configuration |
| 27-28 | Debugging in VS Code: console output, breakpoints, watch variables, step into and step over; finding and resolving errors |
| 29-30 | Configure browsers (Chromium, Firefox, WebKit); create and run your first test; understand the config file |
| 31-32 | Test fixtures and the API testing context |
| 33-34 | Playwright Inspector and Trace Viewer |
| 35-36 | Navigation (back, forward, reload); multiple tabs and windows |
| 37-38 | Practice browser operations (locators, forms, dropdowns, tables); auto-waiting |
| 39-40 | Persistent contexts and context configuration; cookies and local storage; Shadow DOM and SVG |
Build by day 40: a small suite against the practice pages below, passing in all three browsers, with one trace you can walk someone through in Trace Viewer.
Practice: Playwright overview, the six module fundamentals curriculum, the CSS selector and XPath cheat sheets, Flaky-UI Dojo for auto-waiting, Auth Gauntlet for popup windows and storage state, Shadow DOM Maze, Canvas Chart for targets with no DOM, and the rest of the practice library.
Playwright advanced: days 41-58
Goal: turn loose tests into a framework: structure, fixtures, parallel runs, reports, configuration layers and the Page Object Model.
| Days | What to learn |
|---|---|
| 41-42 | Introduction to test frameworks; Playwright Test Runner basics; test structure and organization |
| 43-44 | Assertions and expect; before/after hooks; test fixtures |
| 45-46 | Test groups and tags; retry mechanisms; parallel execution |
| 47-48 | Test reports; screenshots and videos; trace generation; custom reporters |
| 49-50 | Configuration management; environment variables; configuration layers |
| 51-53 | Page Object Model (POM): creating page classes and organizing test code |
| 54-55 | Utility functions and data-driven testing; logging, reporting and error handling |
| 56-58 | Mix web and API tests through shared utils; start the Ecom project and the API E2E project |
Build by day 58: a Page Object Model framework over TTACart, the Ecom project, with tagged suites, retries, an HTML report and per-environment config.
Practice: Advance Playwright framework, folder by folder, the E2E spec explained command by command, the Playwright architecture blueprint, the Network Mocking Playground, and TTA Bank as a second app to model.
AI with Playwright: days 59-70
Goal: use AI as a pair programmer for automation without handing it the steering wheel. Let it generate, then review its work like a senior.
| Days | What to learn |
|---|---|
| 59-60 | Generative framework via AI: let AI scaffold a framework, then review every file it wrote |
| 61-63 | Playwright MCP: let an AI client drive a real browser and draft tests from what it sees |
| 64-66 | Playwright Agents: planner, generator and healer |
| 67-68 | Playwright + Stagehand: natural language actions on top of Playwright |
| 69-70 | Natural language to code: turn a plain English scenario into a reviewed, passing spec |
Build by day 70: one feature of the Ecom project written with MCP or the agents, then reviewed and cleaned up by you, with a short note on what the AI got wrong.
Practice: Playwright MCP tutorial, Playwright AI agents: planner, generator, healer, the MCP and agents setup guide, Advance framework + AI, VS Code with local models, OpenRouter in VS Code, and the two day AI-native Playwright orchestration workshop.
CI/CD: days 71-78
Goal: make the suite run itself: on every push, in parallel, with reports you can open straight from the pipeline.
| Days | What to learn |
|---|---|
| 71-72 | GitHub Actions: create your first workflow that runs the suite on every push |
| 73-74 | Automated testing in the pipeline: the HTML report and traces as artifacts |
| 75-76 | Jenkins integration and pipeline configuration |
| 77-78 | Build automation; Docker with sharding to split the suite across machines |
Build by day 78: a green GitHub Actions badge on the Ecom project, with the suite sharded across at least two jobs.
Practice: the Git and GitHub Actions cheat sheet and the Jenkins cheat sheet.
Cucumber BDD: days 79-84
Goal: write tests the whole team can read. Cucumber puts plain-language scenarios on top of the Playwright framework you already built.
| Days | What to learn |
|---|---|
| 79-80 | Gherkin and feature files: Feature, Scenario, Given / When / Then |
| 81-82 | Step definitions in TypeScript with @cucumber/cucumber, calling your page objects; hooks and shared state |
| 83-84 | Scenario Outline with Examples for data-driven runs; tags; a readable BDD report |
Build by day 84: the Ecom checkout flow as a feature file whose steps reuse your existing page objects.
Practice: Cucumber with Playwright, BDD over TTACart and Cucumber and BDD for SDETs.
Capstone projects: days 85-90
Goal: finish and publish. You started these projects in earlier phases; these six days are for closing gaps, writing READMEs and getting every pipeline green.
Five projects, each end to end:
- Ecom web project: Page Object Model over TTACart, data-driven, tagged, running in CI.
- API E2E project: a complete API flow built on Playwright's API testing context.
- Web + API mix: API calls set up the data, the UI verifies it, joined through shared utils.
- AI-assisted project: a feature generated with MCP or the agents, reviewed and hardened by you.
- BDD project: the checkout flow in Cucumber, reusing your page objects.
| Days | Focus |
|---|---|
| 85-86 | Finish the Ecom and API E2E projects; fix every flaky test at its cause |
| 87-88 | Finish the web + API mix and the BDD project; shard and run everything in CI |
| 89-90 | READMEs, reports and pipeline badges; pin all five repos on your GitHub profile |
Then: update your resume for the stack you just learned with QA resume: old stack vs Playwright + AI.
Milestone checklist
Tick these off as you go. If a milestone slips by more than a few days, stop and close the gap before moving on.
- Day 14: JavaScript exercises solved without looking up syntax.
- Day 24: a TypeScript project with Playwright that compiles cleanly.
- Day 40: a first suite passing in Chromium, Firefox and WebKit, with a trace you can explain.
- Day 58: a Page Object Model framework with tags, retries and an HTML report.
- Day 70: one AI-generated feature, reviewed and passing.
- Day 78: the suite green in GitHub Actions, sharded.
- Day 84: a Cucumber feature running on your page objects.
- Day 90: five projects on GitHub, and a resume that shows them.