Manual → Playwright Roadmap (JavaScript)

Each stage has a free path and a premium fast-track — your call.

1. 1 · From manual to the automation mindset

   ~1 week

   You know what to automate first, and how a web page is actually built.

   Topics to learn

   • Why automate — and when not to
   • Choosing your first automation candidates
   • The DOM: elements, attributes & structure
   • Reading a page in browser DevTools

   Programs to practice

   • List 5 manual test cases, mark the best 3 to automate
   • Inspect 10 elements in DevTools
   • Note 3 flaky manual checks worth automating

   FreeNap-time version (free)45-day calendar (free)Free QA resources
2. 2 · Just-enough JavaScript

   ~2 weeks

   You can read and write the JavaScript a Playwright test actually needs.

   Topics to learn

   • Node.js & npm
   • let / const, strings & numbers
   • Functions & arrow functions
   • Arrays, loops & a peek at async / await

   Programs to practice

   • Install Node and run a greeting script
   • Write a function that returns a greeting
   • Loop over an array and print each item

   Free45-day calendar (free)
3. 3 · First Playwright tests

   ~2 weeks

   You record, read and stabilise real browser tests — no manual waits.

   Topics to learn

   • npm init playwright & the test runner
   • codegen: record a flow
   • getByRole / getByText / getByLabel
   • Web-first assertions, auto-waiting & the trace viewer

   Programs to practice

   • Record a login with codegen, then tidy it
   • Rewrite a step using getByRole
   • Break a test and find it in the trace viewer

   Free45-day calendar (free)

   Supporting kitPlaywright JS Q&A →
4. 4 · A real framework

   ~2 weeks

   You go from scripts to a maintainable framework you can demo in interviews.

   Topics to learn

   • playwright.config: baseURL & projects
   • Fixtures
   • Page Object Model
   • Cross-browser & parallel runs

   Programs to practice

   • Set a baseURL and use it everywhere
   • Build a LoginPage class with a login() method
   • Run your suite across Chromium + Firefox

   Free45-day calendar (free)

   Supporting kitPlaywright JS Q&A →Playwright JS Coding →
5. 5 · API, CI & portfolio

   ~2 weeks

   A portfolio project that proves you crossed from manual to automation.

   Topics to learn

   • API testing with the request fixture
   • storageState to reuse a login
   • GitHub Actions on every push
   • A README + your manual-to-automation story

   Programs to practice

   • Assert an API response inside a test
   • Add a CI workflow that runs on every push
   • Write your 'manual to automation' CV & LinkedIn story

   Free45-day calendar (free)Free QA resources

   Supporting kitPlaywright JS Q&A →Playwright JS Coding →SDET Resume Template →