All Weeks
DAY 01

Architecture & Project Setup

Understand how Playwright works before writing a single test.

What to Study

  • Browser → BrowserContext → Page hierarchy and why it matters
  • How Playwright communicates with browsers (CDP — Chrome DevTools Protocol)
  • Why Playwright is faster and more reliable than Selenium
  • Context-based vs Browser-based execution
  • What test isolation means — why each test gets a fresh context
  • The generated project structure — every file and what it does

Warm-up (15 min)

Run npm init playwright@latest. Open playwright.config.ts and read every line. Look up any option you do not understand.

Core Practice (45 min)

  1. Run npx playwright test --headed — watch the generated example tests run
  2. Run npx playwright test --ui — explore UI mode, understand every panel
  3. Run npx playwright show-report — understand what the HTML report shows
  4. Delete example.spec.ts and create your own tests/first.spec.ts
  5. Navigate to https://opensource-demo.orangehrmlive.com/web/index.php/auth/login and write one test that asserts the page title
  6. Run it headed, run it headless — observe the difference

Open Challenge (30 min)

Run the same test against Firefox and WebKit using --project. Understand what changes in the config to make this work.

Step-Up: Nothing existed. Now you have a running project you understand from the inside.
DAY 02

Git & Node.js Project Foundation

Every day ends with a commit. Learn Git properly before Day 3.

What to Study

  • Git essentials: init, add, commit, push, pull
  • Branching: checkout -b, merge, branch -d
  • .gitignore — what never goes into version control
  • Node.js runtime and npm ecosystem (package.json, scripts)
  • .env and dotenv — environment management

Warm-up

Check your Day 1 repo — is .gitignore correct? Is node_modules tracked? Fix anything wrong.

Core Practice

  1. Create .gitignore properly for Playwright
  2. Create .env and .env.example for credentials
  3. Install dotenv and load it in your config
  4. Add scripts: test, test:headed, test:ui, test:report
  5. Work through a feature/day2-setup branch and merge it
Step-Up: Yesterday you had a project. Today it is version-controlled and environment-aware.
DAY 03

Locators: Finding Any Element

The most important day. Find any element confidently using the right strategy.

What to Study

// Hierarchy of stability
await page.getByRole('button', { name: 'Log in' }); // 1st Choice
await page.getByLabel('User Name');
await page.getByPlaceholder('Enter password');
await page.getByText('Success');
await page.getByTestId('submit-btn');
await page.locator('.css-selector'); // Last Resort

Core Practice

  1. Find OrangeHRM username input 5 different ways
  2. Identify the most stable locator for the login button
  3. Navigate Employee List — find search field, table rows, Add button
  4. Practice filter(), nth(), first(), and last()
  5. Use Playwright Codegen and manually improve the results
Step-Up: Yesterday you had a project structure. Today you can find any element on any page.
DAY 04

Actions: Every Method on Every Element

Find it, then call the right method. Simple and powerful.

What to Study

  • Click Actions: click, dblclick, rightClick
  • Input: fill, type, clear, press
  • Selection: selectOption, check, uncheck
  • Pointer: hover, dragAndDrop, focus
  • Files: setInputFiles — the only way to handle uploads

Core Practice

  1. Full login flow using only fill() and click()
  2. Add Employee form completion (dropdowns, toggles)
  3. Upload a resume using setInputFiles()
  4. Manual keyboard navigation login (no mouse clicks)
  5. Drag and drop practice on DemoQA
Step-Up: Yesterday you found elements. Today you can perform any action on any element.
DAY 05

Special Contexts: Dialogs, Frames & Windows

These are not element types. They are special contexts.

Key Concepts

  • Dialogs: Set listener page.on('dialog') BEFORE trigger.
  • iFrames: Use frameLocator() to scope your actions.
  • Windows: context.waitForEvent('page') to capture new tabs.
  • Downloads: Intercept with page.waitForDownload().
Step-Up: Yesterday was normal elements. Today you handle every context they can live inside.
DAY 06

Assertions & Wait Strategies

Verify outcomes with precision using Web-First assertions.

Wait Strategies

  • waitForLoadState, waitForURL
  • waitForResponse — wait for the API, not the UI.
  • expect.soft() — keep going even on failure.
Step-Up: Yesterday was special contexts. Today you verify outcomes and understand Playwright's auto-waiting.
DAY 07

TypeScript for Testers

Make your code type-safe and self-documenting. Zero 'any'.
interface Employee {
    id: string;
    name: string;
    role: 'Admin' | 'Employee';
}

function process(emp: Employee) { ... }
Step-Up: Today your code is type-safe — every method, data object, and return value has a declared type.
Previous Day Next Day