Playwright End-to-End Testing Masterclass 2026

Last updated 2026-07-20 · 20 min read · By Avinash K

Playwright is the default web E2E tool of 2026. This masterclass covers everything you need to ship a production-ready suite, condensed from our 5-day live workshop.

npm init playwright@latest
# choose TypeScript, tests folder, GitHub Actions workflow

Longer walk-through: Playwright installation guide.

Use getByRole and getByTestId first, everything else second. Full ranking and code review checklist in our Playwright locator best practices.

import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

export const test = base.extend<{ loginPage: LoginPage; authedContext: void }>({
  loginPage: async ({ page }, use) => { await use(new LoginPage(page)); },
  authedContext: [async ({ browser }, use) => {
    const ctx = await browser.newContext({ storageState: 'auth/user.json' });
    await use(); await ctx.close();
  }, { auto: true }],
});

Fixtures replace 90% of the boilerplate in a beforeEach block and make dependencies explicit.

await page.route('**/api/pricing', route =>
  route.fulfill({ json: { tier: 'pro', price: 29 } }));
await page.goto('/pricing');
await expect(page.getByRole('heading', { name: '$29 / month' })).toBeVisible();

Stubbing at the network layer eliminates third-party flakes and speeds tests up 3-10x.

Log in once in global-setup.ts, save cookies + localStorage to auth/user.json, and every test that needs a session reuses it. Cuts suite runtime dramatically. Official pattern in the Playwright auth docs.

Local parallelism is on by default. In CI, split across N machines with --shard=1/4. Combined with fixtures for data isolation you get near-linear speedup up to ~8 shards.

name: e2e
on: [pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix: { shard: [1, 2, 3, 4] }
    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 --shard=${{ matrix.shard }}/4
      - uses: actions/upload-artifact@v4
        if: always()
        with: { name: report-${{ matrix.shard }}, path: playwright-report }

Reference structure that scales past 500 tests:

tests/
  e2e/                       ← business flows
  api/                       ← service-layer tests
  pages/                     ← Page Objects
  fixtures/                  ← test fixtures + factories
  data/                      ← seed data and JSON schemas
playwright.config.ts
global-setup.ts

Full walkthrough with code in our Playwright framework in TypeScript post.