typescript-playwright-tests

Automated end-to-end (E2E) and UI testing using Playwright with TypeScript. Includes real-world test cases like TodoMVC and OrangeHRM login, structured with best practices: Page Object Model, reporting, screenshots, and trace handling.

Features

• TypeScript for strong typing and cleaner code
• Cross-browser testing (Chromium, Firefox, WebKit) via Playwright
• Page Object Model (POM) for modular test structure
• Functional and visual test examples (Applitools optional)
• Screenshots and trace capture for each test
• Built-in HTML report generation
• Headed/fullscreen browser test option
• .env support for API keys and credentials

Project Structure

├── tests/                 # Test specs
├── pages/                 # Page Object Models
├── utils/                 # Helpers and utilities
├── playwright.config.ts   # Playwright configuration
├── report/                # HTML test reports
└── .env                   # Environment variables (optional)

Setup

1. Clone the repository

2. Install dependencies:

   npm install

3. (Optional) Create a .env file for secrets (API keys, credentials)

Running Tests

• Run all tests in all browsers:

  npx playwright test

• Run a specific test file:

  npx playwright test tests/example.spec.ts

• Run in headed mode (UI visible):

  npx playwright test --headed

• Show HTML test report:

  npx playwright show-report

Screenshots & Traces

• Screenshots are taken for all tests (pass/fail)
• Traces are saved for failed tests
• Open the HTML report to view them

Page Object Model

All UI elements and interactions are encapsulated in separate classes under the pages/ folder for better maintainability and reusability.

Debugging

• Debug mode:

  npx playwright test --debug

• Interactive UI mode:

  npx playwright test --ui

.gitignore

Recommended .gitignore entries:

node_modules/
test-results/
report/
.env

Resources

• Playwright Documentation