This repository serves as a Production-Ready Reference Architecture for building high-scale automated testing frameworks using Playwright and TypeScript.
It demonstrates advanced design patterns, seamless CI/CD integration, and strictly typed infrastructure that define modern Quality Engineering.
- Modern Tooling: Built with Biome for lightning-fast linting and formatting (replacing ESLint/Prettier).
- Strict TypeScript: Full type safety for robust and maintainable code.
- Smart Reporting: Full integration with Allure Report, including history, trends, and environment data.
- CI/CD Ready: Optimized GitHub Actions workflows with parallel execution and auto-merging of results.
- Advanced Patterns: Implementation of Dynamic Base URLs, Auto Fixtures, and Data-Driven Testing (DDT).
This project implements the concepts discussed in the following TestShift articles:
- Test Automation - Accelerating Playwright TypeScript Tests with Parallel Execution in GitHub Actions and Allure Reporting
- Test Automation - How to Use Dynamic Base URLs with Playwright TypeScript in GitHub Actions
- Test Automation - How To Attach Public IP Address to Allure Report using Playwright TypeScript Auto Fixtures
- Test Automation - Data-Driven Testing (DDT) with Playwright TypeScript Using Excel
- Test Automation - Efficient Element Selection with Playwright Typescript using Test IDs
- Test Automation - Optimizing Playwright Test Reports: Automating Allure Results Merging with GitHub Actions
- Test Automation – Unleashing the Power of AI with Playwright and TypeScript
- Guarding the Guards: Building a Pre-Merge Quality Gate for Your TypeScript Automation Framework
- Your CI/CD Pipeline Is a Lie: The Case for On-Demand Environments as the Real Quality Gate
- Allure 3 Isn’t Just an Upgrade. It’s the Final Piece of the Quality Gate Architecture
| Tool | Description & Why We Use It |
|---|---|
| Playwright | The industry standard for reliable, flaky-free browser automation. |
| TypeScript | For strict type safety and better developer experience (Intellisense). |
| Biome | Next-gen toolchain for formatting and linting (faster than Prettier/ESLint). |
| Allure | For beautiful, data-rich test reports. |
| Husky | Git hooks to ensure code quality before commit. |
| Dotenv | For secure environment variable management. |
| XLSX | For Data-Driven Testing (DDT) using Excel files. |
Pro Tip: For the best development experience, we recommend installing the Biome IntelliJ plugin.
git clone https://github.com/nirtal85/playwright-typescript-example.git
cd playwright-typescript-exampleWe use pnpm for fast and efficient package management.
corepack enable
pnpm installplaywright install --with-depsCreate a .env file in the project root directory.
| Parameter | Description | Example Value |
|---|---|---|
| DOMAIN | Environment (DEV, PROD) | "DEV" |
| BASE_URL | Application URL | "https://example.com" |
| LD_TOKEN | LaunchDarkly API Token | "api-xxx" |
| Parameter | Description |
|---|---|
| DB_HOST | MySQL Connection details |
| DB_USER | MySQL Connection details |
| DB_PASSWORD | MySQL Connection details |
| SFTP_HOST | SFTP Connection details |
| SFTP_USER | SFTP Connection details |
| VRT_APIURL | Visual Regression Tracker details |
| VRT_APIKEY | Visual Regression Tracker details |
Run all tests:
playwright testRun via UI Mode (Interactive):
playwright test --uiWe use Allure for reporting. To view results locally:
pnpm exec allure generate allure-results --output allure-report --open👉 See a Live Example of the Report Here
Found this project useful? If this architecture helped you solve a problem or save time, consider supporting the work!
