playwright-typescript-boilerplate

Opinionated Playwright + TypeScript starter — Page Object Model, custom fixtures, sharded GitHub Actions CI, Allure reports, strict TypeScript. The setup that usually takes a week, already done.

// chromium · firefox · webkit · 4-shard ci · mit-licensed

// install

Up and running in 5 minutes

git clone https://github.com/tayyabakmal1/playwright-typescript-boilerplate.git
cd playwright-typescript-boilerplate
npm install
npx playwright install --with-deps
npm test

Tests run against a demo app out of the box. Point BASE_URL at your staging environment to start writing real tests.

// features

What's wired in

• ✓

  Page Object Model

  Layered POM with locator-chaining + role-based queries.

• ✓

  Custom Fixtures

  Auth, test-data, network-stub, feature-flag fixtures wired in.

• ✓

  Sharded CI

  4-runner GitHub Actions matrix with merged Allure artifact.

• ✓

  Allure Reporting

  Test history, failure analysis, PR-comment integration.

• ✓

  Strict TypeScript

  strict: true, noUncheckedIndexedAccess, ESLint + Prettier.

• ✓

  Multi-environment

  Dev / staging / prod config split. Secrets via env vars. Docker-ready.

// github actions

Sharded CI workflow

Four shards complete an 80-test suite in ~5 min on a clean cache. Each shard uploads Allure results so the merged report has everything.

# .github/workflows/playwright.yml
name: Playwright tests
on:
  pull_request:
  push:
    branches: [main]

jobs:
  test:
    timeout-minutes: 20
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - 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: allure-results-${{ matrix.shard }}
          path: allure-results
          retention-days: 7

// fixtures

Fixtures keep tests declarative

The auth fixture reuses storageState across the suite — no per-test login hops, no race conditions.

// fixtures/auth.fixture.ts
import { test as base } from '@playwright/test';

type AuthFixtures = {
  authedPage: import('@playwright/test').Page;
};

export const test = base.extend<AuthFixtures>({
  authedPage: async ({ browser }, use) => {
    const ctx = await browser.newContext({ storageState: '.auth/user.json' });
    const page = await ctx.newPage();
    await use(page);
    await ctx.close();
  },
});

export { expect } from '@playwright/test';

// keep reading

Pair this with the deep guides