Day 21: Capstone — Build a Production-Ready Playwright Framework and Deploy

This is Day 21 (FINAL) of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Day 21. Everything comes together. Build complete production framework, push to GitHub, configure CI, get green badge. This is what you show in SDET interviews.

Complete Folder Structure

playwright-production-framework/
+-- playwright.config.ts
+-- tsconfig.json
+-- package.json
+-- .env
+-- .gitignore
+-- Dockerfile
+-- .github/workflows/
|   +-- playwright.yml
+-- src/
|   +-- pages/
|   |   +-- LoginPage.ts
|   |   +-- DashboardPage.ts
|   |   +-- ProductPage.ts
|   |   +-- CheckoutPage.ts
|   +-- fixtures/
|   |   +-- auth.fixture.ts
|   |   +-- data.fixture.ts
|   |   +-- index.ts
|   +-- utils/
|   |   +-- ApiHelper.ts
|   |   +-- TestDataFactory.ts
|   +-- reporters/
|       +-- SlackReporter.ts
+-- tests/
|   +-- auth/
|   |   +-- login.spec.ts
|   |   +-- registration.spec.ts
|   +-- products/
|   |   +-- listing.spec.ts
|   |   +-- search.spec.ts
|   +-- checkout/
|   |   +-- payment.spec.ts
|   +-- api/
|   |   +-- users.api.spec.ts
|   +-- visual/
|       +-- homepage.visual.spec.ts
+-- auth.setup.ts

Production playwright.config.ts

import { defineConfig, devices } from '@playwright/test';
import * as dotenv from 'dotenv';
dotenv.config();

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
  reporter: [
    ['html', { open: 'never' }],
    ['json', { outputFile: 'test-results/results.json' }],
    process.env.CI ? ['junit', { outputFile: 'results.xml' }] : ['list'],
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'retain-on-failure',
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
    {
      name: 'mobile',
      use: { ...devices['Pixel 5'], storageState: 'playwright/.auth/user.json' },
      dependencies: ['setup'],
    },
    {
      name: 'api',
      use: { baseURL: process.env.API_URL || 'http://localhost:3000/api' },
      testMatch: /.*\.api\.spec\.ts/,
    },
  ],
});

21-Day Journey Map

Day	File	Concept
1	playwright.config.ts	Project setup + CDP architecture
2	Locator patterns	getByRole-first strategy
3	Assertion patterns	Auto-retry expect()
4	Interaction patterns	click, fill, select, upload
5	src/pages/LoginPage.ts	Page Object Model
6	src/fixtures/index.ts	Custom fixtures + DI
7	tests/api/*.spec.ts	API testing with request
8	Network mock patterns	page.route() interception
9	auth.setup.ts	storageState auth
10	iframe/dialog patterns	frameLocator + popups
11	tests/visual/*.spec.ts	toHaveScreenshot()
12	Parallel config	Sharding + isolation
13	Debug workflow	Trace Viewer + UI Mode
14	src/utils/TestDataFactory.ts	Faker + auto-cleanup
15	src/reporters/SlackReporter.ts	Custom reporters
16	.github/workflows/playwright.yml	CI/CD pipeline
17	Mobile project config	Device emulation
18	Performance assertions	Load time + Web Vitals
19	Tags + parameterization	@smoke, test.step()
20	CLAUDE.md + AI workflow	AI-assisted testing
21	Complete framework	Production deploy

GitHub Actions CI/CD

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 30
    strategy:
      fail-fast: false
      matrix:
        shard: [1/4, 2/4, 3/4, 4/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 chromium
      - run: npx playwright test --shard=${{ matrix.shard }}
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: report-${{ strategy.job-index }}
          path: playwright-report/
          retention-days: 14

README Template

# Playwright Production Framework

![CI](https://github.com/you/pw-framework/actions/workflows/playwright.yml/badge.svg)

## Tech Stack
- Playwright + TypeScript
- Page Object Model architecture
- API + UI hybrid testing
- GitHub Actions CI/CD with 4-shard parallelization

## Quick Start
npm ci
npx playwright install
npx playwright test

## Architecture
- src/pages/ -- Page Objects
- src/fixtures/ -- Custom fixtures with auto-cleanup
- src/utils/ -- API helpers, TestDataFactory with Faker
- src/reporters/ -- Slack notifications on failure
- tests/ -- Organized by feature area

What to Show in SDET Interviews

• GitHub repo with green CI badge — proves it runs in CI
• POM architecture — proves you think in patterns
• API + UI hybrid tests — proves you understand test layers
• Custom fixtures — proves you know DI and composition
• Parallel execution — proves you understand test isolation
• README with architecture — proves you communicate

What Comes Next

1. Add contract testing (Pact) for microservices
2. Add performance monitoring (response time assertions)
3. Explore Playwright Component Testing for React/Vue
4. Learn Playwright MCP for AI-assisted testing
5. Contribute to open-source Playwright projects

Congratulations! You completed 21 days of Playwright. You now have a production-ready framework, CI/CD pipeline, and portfolio project. Go build something amazing.