Playwright TypeScript Starter Kit

A modern Playwright TypeScript test automation framework with Page Object Model, custom fixtures, multi-browser support, and comprehensive example tests.

Target Applications

• the-internet.herokuapp.com — primary test target
• demo.playwright.dev/todomvc — TodoMVC app tests
• httpbin.org — API testing examples

Prerequisites

• Node.js (v18+)
• Git

Setup

# Install dependencies
yarn install

# Install Playwright browsers
npx playwright install --with-deps

Running Tests

# Run all tests (all browsers)
yarn test

# Run on a specific browser
yarn test:chromium
yarn test:firefox
yarn test:webkit

# Run in headed mode (see the browser)
yarn test:headed

# Run with Playwright UI mode
yarn test:ui

# Run with debugger
yarn test:debug

# Run only changed tests
yarn test:only-changed

# Re-run last failed tests
yarn test:last-failed

# Run tests matching a grep pattern
npx playwright test --grep "@smoke"

# Run a single test file
npx playwright test tests/smoke.spec.ts

Reports

# Generate and open Allure report
yarn report

HTML reports are generated in html-report/ after each test run.

Project Structure

├── pages/                    # Page Object Model classes
│   ├── BasePage.ts           # Base class with common locator helpers
│   ├── HomePage.ts           # the-internet homepage
│   ├── LoginPage.ts          # Login page
│   ├── ToDoPage.ts           # TodoMVC page
│   └── ...                   # Other page objects
├── tests/
│   ├── fixtures.ts           # Custom test fixtures (auto-initialized page objects)
│   ├── auth.setup.ts         # Global auth setup (saves storage state)
│   ├── smoke.spec.ts         # Smoke tests (@smoke)
│   ├── demo-todo-app.spec.ts # TodoMVC tests (@regression)
│   ├── accessibility.spec.ts # Accessibility testing examples
│   ├── api-testing.spec.ts   # API testing examples (httpbin.org)
│   ├── network.spec.ts       # Network interception & mocking
│   ├── visual-comparison.spec.ts # Screenshot/visual testing
│   ├── clock.spec.ts         # Clock API examples
│   ├── advanced-interactions.spec.ts # Hover, keyboard, downloads, dialogs
│   ├── locators.spec.ts      # Modern locator patterns
│   └── multi-browser.spec.ts # Cross-browser annotations & tags
├── playwright.config.ts      # Playwright configuration
├── .env                      # Environment variables
└── .github/workflows/        # CI pipeline

Adding New Tests

1. Create a new .spec.ts file in tests/
2. Import from ./fixtures to use custom fixtures (homePage, loginPage, todoPage) or from @playwright/test for standalone tests
3. Use tags like @smoke or @regression in test/describe names for filtering

Adding New Page Objects

1. Create a new class in pages/ extending BasePage
2. Use BasePage helpers: testID(), button(), label(), text(), placeHolder(), altText(), title(), role()
3. Optionally add the page object to tests/fixtures.ts for auto-initialization

Code Style

• Prettier: single quotes, no trailing commas, 2-space indent, 80 char width
• ESLint with TypeScript and Playwright plugins
• Husky pre-commit hook runs formatting and linting

yarn format
yarn lint

CI

GitHub Actions runs on push/PR to main. Uses Playwright Docker container. HTML and blob reports are uploaded as artifacts.

Learning Path

New to Playwright or test automation? Follow this suggested learning order:

1. Start Here

• tests/getting-started.spec.ts — 10 simple, heavily-commented tests covering the basics:
  • Navigating to pages
  • Finding elements (roles, text, CSS)
  • Clicking and form filling
  • Checkboxes and dropdowns
  • Waiting for dynamic content
  • Screenshots and test steps

2. Understand the Architecture

• pages/BasePage.ts — Read the class documentation to understand locator helpers
• tests/fixtures.ts — Learn how fixtures auto-initialize page objects
• tests/smoke.spec.ts — See how tests use fixtures and page objects together

3. Explore Advanced Patterns

File	What You'll Learn
locators.spec.ts	and(), or(), filter(), chaining, frames
multi-browser.spec.ts	Browser-specific tests, tags, serial mode
advanced-interactions.spec.ts	Hover, keyboard, downloads, dialogs
network.spec.ts	Request interception, mocking responses
api-testing.spec.ts	REST API testing with request fixture
clock.spec.ts	Time manipulation for testing timers
visual-comparison.spec.ts	Screenshot comparison testing
accessibility.spec.ts	ARIA assertions and accessibility

4. Build Your Own Tests

1. Pick a page on the-internet.herokuapp.com not yet covered
2. Create a page object in pages/ extending BasePage
3. Write tests in tests/ using your page object
4. Add your page object to tests/fixtures.ts if you'll reuse it

Helpful Commands for Learning

# Run a single test file with UI to see what's happening
npx playwright test tests/getting-started.spec.ts --ui

# Run tests in debug mode (pauses at each step)
npx playwright test tests/getting-started.spec.ts --debug

# Generate tests by recording your actions
npx playwright codegen https://the-internet.herokuapp.com