90 DAYS / Beginner to advanced / SAVED PROGRESS

90-day Playwright roadmap with JavaScript, TypeScript and AI

Move from language fundamentals to a production-ready Playwright framework, then add responsible AI workflows and five portfolio-grade test projects.

90
Days
04
Phases
125
Topics
7-10 hours
Per week

MISSION ROUTE

4 phases. One working portfolio.

Learn - build - prove - advance

  1. 01

    JS / TS

    Days 1-21

  2. 02

    Playwright

    Days 22-50

  3. 03

    Framework

    Days 51-75

  4. 04

    Playwright + AI

    Days 76-90

Field progress
x

Phase 1 / Days 1-21

JavaScript and TypeScript Foundations

Build the language fluency needed to read application code, write test utilities and debug asynchronous browser workflows.

Exit evidence

A typed utility library plus a small command-line test-data project with unit checks.

0/28

Phase topics complete

JavaScript Core

Control data, branching and reusable behavior without copy-paste.

Ship: Create a test-data transformer for users, products and orders.

TypeScript for Automation

Make test data, fixtures and failures explicit at compile time.

Ship: Convert the utility library to strict TypeScript.

Phase 2 / Days 22-50

Playwright Fundamentals and Browser Control

Learn Playwright's locator-first model, browser isolation, debugging tools and API-aware end-to-end workflows.

Exit evidence

A cross-browser checkout suite with stable locators, reusable auth state, API setup and trace evidence.

0/39

Phase topics complete

Setup and Debugging

Build a workspace where failures are fast to reproduce and explain.

Ship: Run and debug the same first test in three browsers.

Reliable Browser Operations

Express user behavior through resilient, observable web actions.

Ship: Automate signup, search and checkout without fixed sleeps.

State, API and Network

Control test preconditions and external dependencies deliberately.

Ship: Seed checkout data by API and verify the result in the UI.

Phase 3 / Days 51-75

Advanced Framework Architecture and CI/CD

Turn individual tests into an operable framework with clear ownership, parallel safety, evidence and delivery gates.

Exit evidence

A layered Playwright framework running in parallel CI with reports, retries, sharding and failure artifacts.

0/33

Phase topics complete

Playwright Test Architecture

Organize suites so teams can run, diagnose and own them safely.

Ship: Refactor the checkout suite into tagged, parallel-safe projects.

Framework Patterns

Separate domain intent from browser mechanics and configuration.

Ship: Publish a reusable framework skeleton with one domain flow.

CI/CD and Scale

Make every pull request prove browser quality consistently.

Ship: Run sharded browser projects in CI and merge their reports.

Phase 4 / Days 76-90

AI Tools, Agents and Playwright Integration

Use AI to accelerate exploration and generation while keeping test intent, data access and merge decisions reviewable.

Exit evidence

Five portfolio projects plus a governed AI-assisted workflow that produces reviewable Playwright changes.

0/25

Phase topics complete

AI-Assisted Toolchain

Choose the right AI interface and verify every generated action.

Ship: Generate, review and repair one test from a written product brief.

Five End-to-End Projects

Prove breadth through complete workflows instead of isolated demos.

Ship: Publish five documented projects with traces and CI results.

Reliability and Governance

Treat AI output as an untrusted contribution that must earn trust.

Ship: Define an agent test policy and a repeatable acceptance rubric.

13-WEEK EXECUTION PLAN

Ship proof every week

Use weekdays to learn and practice. Use the final session of each week to produce the artifact listed under ship.

  1. 01Days 1-7

    JavaScript control flow

    Variables, data types, operators, conditions and loops.

    Ship

    A boundary-value and test-data exercise pack.

  2. 02Days 8-14

    Functions and data modeling

    Strings, arrays, objects, classes, functions and modules.

    Ship

    A reusable user and order data transformer.

  3. 03Days 15-21

    Strict TypeScript and async code

    Types, interfaces, narrowing, generics, promises and async-await.

    Ship

    A typed API helper with explicit failure handling.

  4. 04Days 22-28

    Playwright setup and first tests

    Workspace setup, browser projects, configuration and debugging.

    Ship

    The same smoke test running in all three browser engines.

  5. 05Days 29-35

    Locators and reliable actions

    User-facing locators, auto-waiting, assertions and actionability.

    Ship

    A race-free signup and search flow without hard waits.

  6. 06Days 36-42

    Browser state and complex UI

    Contexts, storage, tabs, frames, files, dialogs and Shadow DOM.

    Ship

    A multi-tab authenticated workflow with isolated state.

  7. 07Days 43-50

    API, network and evidence

    APIRequestContext, routing, HAR, emulation, traces and screenshots.

    Ship

    A checkout suite seeded by API with trace evidence.

  8. 08Days 51-57

    Runner architecture

    Suite organization, tags, projects, workers, retries and hooks.

    Ship

    A tagged, parallel-safe regression layout.

  9. 09Days 58-64

    Fixtures and page models

    Typed fixtures, page objects, components and domain utilities.

    Ship

    A framework skeleton with one clean domain journey.

  10. 10Days 65-71

    Configuration and reporting

    Environment layers, secrets, logs, reports, artifacts and errors.

    Ship

    A failure report that answers what, where and why.

  11. 11Days 72-75

    CI/CD and sharding

    GitHub Actions, Jenkins, Docker, sharding and report merging.

    Ship

    A pull-request quality gate with retained evidence.

  12. 12Days 76-83

    Playwright AI workflows

    MCP, test agents, Stagehand, specifications and generated-test review.

    Ship

    One agent-assisted test accepted through an evidence rubric.

  13. 13Days 84-90

    Portfolio and governance

    Five projects, AI safety, stability measurement and ownership.

    Ship

    A CI-backed portfolio and a written AI test policy.

DEFINITION OF DONE

What day 90 should prove

Completion is based on working evidence, not consumed lessons. Your repository, traces and CI runs should make these claims verifiable.

  • Write reliable JavaScript and TypeScript for browser automation
  • Build maintainable Playwright tests across Chromium, Firefox and WebKit
  • Design fixtures, page objects, reporting and environment configuration
  • Run sharded test suites through GitHub Actions or Jenkins
  • Use Playwright MCP, test agents and Stagehand with reviewable guardrails
  • Ship five end-to-end projects that combine browser, API and AI checks

FIELD BRIEFING

Roadmap FAQ

Can a beginner follow this Playwright roadmap?

Yes. The first 21 days build JavaScript and TypeScript foundations before browser automation begins. Prior testing experience helps, but it is not required.

How much time should I spend each day?

Plan for 60 to 90 focused minutes on weekdays and a two-hour build session on the weekend. The weekly deliverable matters more than watching a fixed amount of material.

Does the roadmap cover advanced Playwright framework design?

Yes. Days 51 through 75 cover fixtures, parallel workers, retries, page and component objects, configuration layers, reporting, Docker, sharding, GitHub Actions and Jenkins.

Where does AI fit into Playwright automation?

Days 76 through 90 cover Playwright MCP, planner-generator-healer agents, Stagehand, natural-language specifications, generated-test review, safety checks and reliability measurement.

What should I have after 90 days?

You should have a cross-browser framework, CI evidence, five end-to-end portfolio projects and a documented process for reviewing AI-assisted test changes.

Start with the first proof

Complete day 1, commit the exercise, and let evidence compound for 90 days.