Run this in a new (or existing) project folder — it asks a few questions (TypeScript? GitHub Actions?) and installs Chromium, Firefox and WebKit:

npm init playwright@latest

These are the files that appear — you'll use every one of them in this course:

The scaffold ships with sample tests — run them right away to verify your setup:

npx playwright test

In tests/, create a file with a .spec.ts (or .spec.js) extension:

test() is one test case. The { page } argument is a built-in fixture that gives you an isolated browser page — no setup needed:

import { test, expect } from '@playwright/test';

test('visits the site', async ({ page }) => {
  await page.goto('https://qa.imcseian.com/');
});

From your project root:

npx playwright test

Pick the most user-facing locator that works — they survive CSS refactors:

Locators can be chained to narrow down, and reused many times:

const form = page.getByRole('form')
await form.getByLabel('Email').fill('qa@tester.io')
await form.getByRole('button', { name: 'Log in' }).click()

Every Playwright demo starts here — adding & completing a todo:

await page.getByPlaceholder('New todo').fill('Ship v2')
await page.keyboard.press('Enter')
await page.getByRole('checkbox').check()
await expect(page.getByText('1 item left')).toBeVisible()

Import expect from Playwright — assertions take a locator, not a stale element:

await expect(page.locator('.title')).toBeVisible()
await expect(page.locator('.title')).toHaveText('Welcome')
await expect(page).toHaveURL(/dashboard/)

Before acting, Playwright checks the element is visible, stable, enabled and receives events. And expect() keeps retrying (5s by default) until the assertion passes. No waitForTimeout(5000) hacks — that's an anti-pattern!

Slow-loading element? Extend the timeout per assertion:

await expect(page.locator('.status'))
  .toHaveText('Success', { timeout: 10_000 })

Run setup before every test in a file — you get a fresh page fixture per test, so tests never leak state:

test.beforeEach(async ({ page }) => {
  await page.goto('/login')
})

Loop over a data array (or load a JSON file) and generate a test per record:

for (const u of users) {
  test(`login ${u.email}`, async ({ page }) => {
    await page.getByLabel('Email').fill(u.email)
  })
}

[
  { "email": "qa1@tester.io" },
  { "email": "qa2@tester.io" },
  { "email": "admin@corp.io" }
]

Click and type in a real browser — Playwright writes the locators and code for you:

npx playwright codegen https://qa.imcseian.com

Turn on traces and every failing test gets a time-travel recording — DOM snapshots, network, console for every action:

export default defineConfig({
  use: { trace: 'on-first-retry' },
})

npx playwright test is already headless — perfect for CI. Use --headed / --ui only while developing:

npx playwright test   # headless, all 3 browsers

Create .github/workflows/playwright.yml:

name: E2E Tests
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test