Skip to content
BranchesTags
 
 

Repository files navigation

🚀 Playwright Automation Framework — TypeScript

Enterprise-Ready | TypeScript | Playwright | Fixtures | Data-Driven | Multi-Environment | Advanced Reporting

A scalable, reusable, and enterprise-focused Playwright Automation Framework built with TypeScript, designed for modern UI and mobile web automation.

This framework focuses on clean architecture, reusable components, environment-aware execution, test-data management, Playwright fixtures, advanced reporting, execution visibility, and automated report distribution.

⭐ If you find this project useful, don't forget to Star the repository!

📖 Overview

This framework is designed using modern automation engineering practices with a strong focus on:

  • Maintainability
  • Scalability
  • Reusability
  • Test isolation
  • Environment management
  • Test-data management
  • Execution stability
  • Failure investigation
  • Reporting
  • CI/CD readiness

The framework provides a structured foundation for building and maintaining large Playwright automation suites.

🚀 What's New

v1.2.0 — Enterprise Automation & Reporting Update

The TypeScript release introduces several improvements focused on framework architecture, test data, execution, reporting, and distribution.

🧩 Playwright Fixtures

Custom Playwright fixtures are integrated into the framework to centralize reusable dependencies and test setup.

Benefits:

  • Reusable test dependencies
  • Centralized setup
  • Cleaner test files
  • Better test isolation
  • Reduced duplicate code
  • Scalable test architecture

Example:

import { test, expect } from '../fixtures/testFixtures';

test('verify application title', async ({ page }) => {

    await page.goto('/');

    await expect(page).toHaveTitle(/Playwright/);

});

🌍 Environment Management

The framework supports executing the same test suite against different environments without modifying test code.

Supported environments can include:

DEV
UAT
PRE-PROD
PROD

Environment configuration is maintained separately from test implementation.

Example structure:

config
│
└── environment
    ├── dev.env
    ├── uat.env
    ├── preprod.env
    └── prod.env

Run tests using:

npm run uat
npm run preprod
npm run prod

This allows environment switching without changing the test implementation.

🗃️ Environment-Aware Test Data

A major focus of this release is separating test data from environment configuration and test execution.

The architecture follows:

Environment
      ↓
Configuration
      ↓
Test Data
      ↓
Test Execution

This creates a foundation for maintaining different test-data requirements across environments.

The approach is designed to support:

  • Environment-specific test data
  • Centralized data management
  • Reusable test data
  • Dynamic test data
  • Data-driven execution
  • Future data seeding and cleanup strategies

🧪 Data-Driven Testing

The framework supports data-driven automation using Excel and reusable data utilities.

Example:

testData
│
├── loginData.xlsx
├── userData.xlsx
└── policyData.xlsx

This allows multiple test scenarios to execute using different datasets without duplicating test logic.

🧠 Faker Test Data

The framework includes Faker-based dynamic test-data generation.

Useful for generating:

  • Names
  • Email addresses
  • Mobile numbers
  • Addresses
  • Random test values
  • Dynamic user information

This helps reduce hard-coded test data and improves test-data flexibility.

📊 Allure Reporting

Allure Reporting is integrated into the framework for detailed execution analysis.

The framework captures:

  • Passed tests
  • Failed tests
  • Skipped tests
  • Screenshots
  • Videos
  • Playwright traces
  • Attachments
  • Environment information
  • Execution history
  • Execution trends
  • Duration trends
  • Retry trends

Generate the Allure report using:

npm run allure:generate

Open the report:

npm run allure:open

Or use:

npm run allure

📈 Allure Environment Information

Each execution records environment information such as:

Environment
Browser
Operating System
Platform
Node.js Version
Framework Version
Base URL

Example:

Environment       : UAT
Browser           : Chromium
Platform          : darwin
Node Version      : v24.x
Framework Version : v1.2.0
Base URL          : https://example.com

This makes it easier to understand exactly where an execution was performed.

📉 Allure History & Trends

The framework maintains Allure history to provide visibility across executions.

Supported trend information includes:

  • Execution history
  • Duration trends
  • Retry trends
  • Category trends

This allows teams to identify changes in execution behavior over time.

🧪 Soft Assertions

Soft assertion support allows multiple validations to be performed during a test without immediately stopping execution after the first failure.

This is useful when validating multiple UI elements or business rules within the same scenario.

Example:

await expect.soft(page.getByText('Username')).toBeVisible();

await expect.soft(page.getByText('Password')).toBeVisible();

await expect.soft(page.getByRole('button', { name: 'Login' })).toBeVisible();

This allows the test to collect multiple validation failures before completing.

⚡ Smart Execution Utilities

The framework contains reusable execution utilities designed to improve test stability and reduce repetitive code.

Smart Click

await smartClick(page.locator('#login'));

Designed to handle:

  • Visibility
  • Scroll into view
  • Interaction readiness
  • Retry behavior
  • Execution logging

Smart Fill

await smartFill(page.locator('#username'), 'Admin');

Designed to:

  • Wait for the field
  • Clear existing values
  • Enter data
  • Validate the entered value
  • Retry when required

Smart Wait

await waitForPageReady(page);

Provides reusable waiting logic for page readiness and application synchronization.

Retry Utility

Reusable retry mechanisms are available for operations that may occasionally fail because of transient application or synchronization issues.

📸 Screenshots

Screenshots can be captured during test execution for:

  • Validation points
  • Failure investigation
  • Debugging
  • Execution evidence

Example:

await page.screenshot({
    path: 'screenshots/homepage.png',
    fullPage: true
});

🎥 Videos & Traces

Playwright execution artifacts can be retained for debugging.

Supported artifacts include:

  • Screenshots
  • Videos
  • Playwright traces
  • Attachments

These artifacts can also be consumed through the Allure reporting layer.

📧 Automated Email Reporting

The framework includes automated execution email reporting.

The email report can contain:

  • Execution summary
  • Total tests
  • Passed tests
  • Failed tests
  • Skipped tests
  • Execution duration
  • Environment information
  • HTML execution report

Example execution flow:

Test Execution
      ↓
Execution Summary
      ↓
HTML Report
      ↓
Report Packaging
      ↓
Email Distribution

This allows execution results to be distributed automatically to QA teams and stakeholders.

📦 Automated Report Packaging

Execution reports can automatically be packaged into ZIP files.

Generated reports can include:

reports
│
├── playwright-report.zip
└── allure-report.zip

This makes it easier to share complete execution evidence with stakeholders.

📊 Execution Dashboard

The framework provides execution information at runtime.

Example:

══════════════════════════════════════════════════════════════

🚀 Playwright Automation Framework

Framework Version : v1.2.0

Environment       : UAT

Base URL          : https://example.com

Browser           : Chromium

Execution Mode    : Parallel

Workers           : Default

Platform          : darwin

Operating System  : Darwin

Node Version      : v24.x

Started At        : Execution Time

══════════════════════════════════════════════════════════════

This provides immediate visibility into the execution context.

🌐 Cross-Browser Testing

The framework supports Playwright browser projects including:

Browser Supported
Chromium ✅
Chrome ✅
Firefox ✅
WebKit ✅

Browser configuration can be maintained through the Playwright configuration.

📱 Mobile Web Testing

The framework supports browser-based mobile automation using Playwright device emulation.

Capabilities include:

  • Mobile viewport testing
  • Device emulation
  • Touch interaction
  • Responsive testing
  • Mobile browser validation
  • Cross-device testing

Example:

import { devices } from '@playwright/test';

projects: [
    {
        name: 'Mobile Chrome',
        use: {
            ...devices['Galaxy S24']
        }
    }
]

⚡ Parallel Execution

Playwright parallel execution is supported for faster test execution.

Benefits include:

  • Multiple workers
  • Faster regression execution
  • Independent test execution
  • Cross-browser execution
  • Scalable test suites

Example:

npx playwright test --workers=4

🏗️ Page Object Model

The framework follows the Page Object Model architecture.

Example:

pages
│
├── LoginPage.ts
├── HomePage.ts
├── DashboardPage.ts
└── CheckoutPage.ts

Page objects contain reusable locators and page-level actions while test files focus on business scenarios.

📂 Framework Architecture

Playwright_Automation
│
├── config
│   ├── environment
│   │   ├── dev.env
│   │   ├── uat.env
│   │   ├── preprod.env
│   │   └── prod.env
│   │
│   └── executionConfig.ts
│
├── fixtures
│   └── testFixtures.ts
│
├── pages
│
├── tests
│
├── testData
│
├── utilities
│   ├── assertionUtil.ts
│   ├── clickUtil.ts
│   ├── dashboardUtil.ts
│   ├── downloadUtil.ts
│   ├── environmentUtil.ts
│   ├── excelUtil.ts
│   ├── fakerUtil.ts
│   ├── fillUtil.ts
│   ├── retryUtil.ts
│   ├── screenshotUtil.ts
│   └── waitUtil.ts
│
├── reporting
│   ├── allure
│   ├── email
│   └── zip
│
├── reports
│
├── screenshots
│
├── downloads
│
├── playwright.config.ts
│
└── package.json

📊 Reporting Architecture

The framework follows a layered reporting approach:

                    Test Execution
                         │
                         ▼
                Playwright Artifacts
                         │
            ┌────────────┼────────────┐
            ▼            ▼            ▼
        Screenshots    Videos       Traces
            │            │            │
            └────────────┼────────────┘
                         ▼
                  Allure Results
                         │
                         ▼
                  Allure Report
                         │
              ┌──────────┴──────────┐
              ▼                     ▼
        Stakeholder View       Email Report

📁 Artifact Management

Execution artifacts are organized into dedicated directories.

Execution
│
├── allure-results
├── allure-report
├── playwright-report
├── test-results
├── screenshots
├── downloads
└── reports

This prevents different execution artifacts from becoming mixed together.

🔧 Configuration

Playwright configuration is centralized in:

playwright.config.ts

Configuration can control:

  • Base URL
  • Browser projects
  • Workers
  • Retries
  • Timeouts
  • Screenshots
  • Videos
  • Traces
  • Reporter configuration
  • Environment configuration

🚀 Getting Started

1. Clone Repository

git clone https://github.com/mrpathak20/Playwright-Automation-Framework.git

Navigate into the project:

cd Playwright-Automation-Framework

2. Install Dependencies

npm install

3. Install Playwright Browsers

npx playwright install

4. Configure Environment

Configure the required environment files:

config/environment/

Example:

uat.env
preprod.env
prod.env

5. Run Tests

Run the complete test suite:

npx playwright test

Run a specific test:

npx playwright test tests/example.spec.ts

Run tests in headed mode:

npx playwright test --headed

6. Run Against UAT

npm run uat

7. Run Against Pre-Production

npm run preprod

8. Run Against Production

npm run prod

📊 View Playwright HTML Report

npx playwright show-report

📊 Generate Allure Report

npm run allure:generate

🌐 Open Allure Report

npm run allure:open

Or:

npm run allure

🧪 Run Tests with Allure

Example:

npm run uat

After execution:

npm run allure

📧 Send Execution Email

The framework supports automated execution email distribution through the reporting layer.

Configuration can be maintained through environment variables rather than hard-coding credentials.

Example:

EMAIL_FROM
EMAIL_PASSWORD
EMAIL_TO

Sensitive credentials should never be committed to Git.

🔐 Security

Environment files containing credentials, passwords, API keys, or other secrets should be excluded from version control.

Use:

.env
.env.local
*.env

where appropriate in .gitignore.

Never commit:

  • Passwords
  • API tokens
  • Email credentials
  • Access keys
  • Production secrets

🧰 Utilities

The framework provides reusable utilities for common automation requirements.

Utility Purpose
Assertion Utility Centralized assertions
Click Utility Reliable element interaction
Fill Utility Reliable input handling
Wait Utility Application synchronization
Retry Utility Retry transient failures
Screenshot Utility Screenshot capture
Excel Utility Data-driven testing
Faker Utility Dynamic test data
Download Utility File download handling
Environment Utility Environment management
Dashboard Utility Execution information

📌 Design Principles

The framework follows these principles:

Reusability

Common functionality should be implemented once and reused across tests.

Maintainability

Tests should remain simple even as the framework grows.

Separation of Concerns

Test logic, page objects, utilities, configuration, test data, and reporting should remain separated.

Scalability

The architecture should support increasing test volume and additional environments.

Observability

Test failures should provide enough evidence for quick investigation.

Environment Independence

Test implementation should not require code changes when switching environments.

🛣️ Roadmap

The framework is continuously evolving.

Planned areas include:

  • 🤖 AI-enabled test automation
  • 🧠 Intelligent failure analysis
  • 🩹 AI-assisted test maintenance
  • 🔌 MCP integration
  • ☁️ Cloud execution
  • 🔄 CI/CD improvements
  • 🔔 Slack / Teams notifications
  • 📊 Advanced execution analytics
  • 🧪 Advanced test-data lifecycle management

The goal is to gradually evolve the framework toward AI-enabled intelligent QA automation while maintaining a strong and reliable automation foundation.

📦 Release History

🚀 v1.2.0 — Enterprise Automation & Reporting Update

Architecture

  • Custom Playwright Fixtures
  • Improved modular architecture
  • Environment-aware execution
  • Environment-aware test data

Test Execution

  • Soft Assertions
  • Smart Click
  • Smart Fill
  • Smart Wait
  • Retry Utility
  • Parallel Execution
  • Cross-browser execution
  • Mobile browser execution

Reporting

  • Allure Reporting
  • Environment information
  • Allure history
  • Execution trends
  • Duration trends
  • Retry trends
  • Screenshots
  • Videos
  • Playwright traces
  • Attachments

Distribution

  • Automated HTML execution summary
  • Email reporting
  • Report ZIP packaging
  • Playwright report packaging
  • Allure report packaging

🚀 v1.1.0 — Intelligent Execution Update

  • Environment Management
  • Execution Dashboard
  • Smart Retry Utility
  • Smart Click Utility
  • Smart Fill Utility
  • Smart Wait Utility
  • Assertion Utility

🚀 v1.0.0

  • Page Object Model
  • Excel Data-Driven Framework
  • Cross-Browser Testing
  • Mobile Browser Automation
  • API Utility
  • Database Utility
  • HTML Reporting
  • Organized Artifacts

🤝 Contributions

Contributions and technical feedback are welcome.

If you would like to improve the framework:

  1. Fork the repository
  2. Create a feature branch
  3. Implement your changes
  4. Add/update tests
  5. Commit your changes
  6. Submit a Pull Request

💼 Services & Collaboration

Open to collaboration and freelance opportunities involving:

  • Playwright Automation
  • TypeScript Automation
  • QA Automation
  • Automation Framework Development
  • Test Architecture
  • UI Automation
  • API Automation
  • Mobile Web Automation
  • CI/CD Integration
  • Reporting Solutions
  • AI-enabled QA Automation
  • Automation Framework Modernization

If you are working on a project where Playwright automation or framework modernization can help, feel free to connect.

⭐ Support

If this project helped you:

⭐ Star the repository

🍴 Fork it

💡 Suggest improvements

🐛 Report issues

🤝 Contribute

📢 Share with the QA community

📬 Feedback

This framework is continuously being improved based on practical automation challenges and feedback from the testing community.

If you have ideas, suggestions, or technical feedback, feel free to open an issue or start a discussion.

🔗 Repository

GitHub:

https://github.com/mrpathak20/Playwright-Automation-Framework-TypeScript.git

🚀 Made with ❤️ by Priyanshu Pathak

Happy Testing!

About

Production Ready Playwright Automation Framework Now Available in TypeScript

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages