playwright-test-automation-framework

Built with Playwright, TypeScript, Test Runner, Allure Reports & Page Object Model (POM)

---

Overview

This project is an end-to-end test automation framework built to validate critical user onboarding, authentication, group access, and dashboard flows for the playwright-test-automation-framework web platform.

The framework focuses on UI automation, ensuring a smooth and secure experience across signup, login, OTP verification, group joining, and session access journeys.
It is designed to be scalable, maintainable, and CI/CD-ready, following modern automation best practices.

---

Key Objectives

• Validate user authentication and onboarding flows
• Ensure group join and access control behavior
• Verify dashboard visibility and navigation
• Support smoke and regression test execution
• Enable fast feedback for staging and CI pipelines

---

Tech Stack

Technology	Purpose
Playwright	End-to-end web automation
TypeScript	Test scripting and type safety
Node.js	Runtime environment
Playwright Test Runner	Test execution
Allure / Playwright Reports	Reporting
GitHub	Version control
CI/CD	GitHub Actions compatible

---

Framework Highlights

• Page Object Model (POM) for reusable and clean test code
• Custom fixtures for authenticated sessions
• Environment-based configuration (URLs, users, devices)
• Role-based testing support
• Smoke and regression execution support
• Storage state handling for faster test runs
• Centralized utilities for waits, assertions, and logging

---

Getting Started

1. Clone the Repository

git clone https://github.com/aeshamangukiya/playwright-test-automation-framework
cd playwright-test-automation-framework

2. Install Dependencies

npm install

3. Run Tests

• Run all tests:

  npx playwright test

• Run with headed browser:

  npx playwright test --headed

• Run specific file:

  npx playwright test tests/auth/login.spec.ts

• Run with UI Mode:

  npx playwright test --ui

4. Generate Reports

• View Playwright HTML report:

  npx playwright show-report

• Allure Report (if configured):

  allure generate allure-results --clean -o allure-report
  allure open allure-report

---

Project Structure

Click to expand

📁 playwright-test-automation-framework/
├── 📄 playwright.config.ts        # Global configuration (baseURL, retries, etc.)
├── 📄 package.json                # NPM dependencies & scripts
├── 📄 tsconfig.json               # TypeScript configuration

📁 tests/                          # Test specs
│   ├── 📁 auth/
│   │   └── login.spec.ts          # Login tests
│   ├── 📁 dashboard/
│   │   └── dashboard.spec.ts      # Dashboard tests
│   └── other-feature.spec.ts

📁 pages/                          # Page Object Model (POM) classes
│   └── LoginPage.ts
│   └── DashboardPage.ts

📁 fixtures/                       # Test data, custom fixtures
│   └── testData.json

📁 utils/                          # Helper utilities
│   └── helpers.ts

📁 reports/                        # Auto-generated HTML & Allure reports

---

Test Coverage (High Level)

• Authentication (Login, OTP, session handling)
• Group join and access eligibility
• Dashboard access and navigation
• Role-based user validations
• Smoke and regression scenarios

---

Sample Test Case

tests/auth/login.spec.ts

import { test } from '../../src/fixtures/auth.fixture';
import { UserRole } from '../../src/constants/roles';
import { DashboardPage } from '../../src/pages/dashboard/DashboardPage';
import { LoginPage } from '../../src/pages/auth/LoginPage';
import { Logger } from '../../src/utils/Logger';

const TEST_ROLE = process.env.TEST_ROLE;

/* =========================================================
   Login – Single User (Smoke + Regression)
========================================================= */
test.describe('Login – Single User', () => {

  test(
    'User can login successfully',
    { tag: ['@smoke', '@regression'] },
    async ({ loginAs, page }, testInfo) => {

      testInfo.annotations.push(
        { type: 'severity', description: 'critical' }
      );

      Logger.step('Logging in as User');
      await loginAs(UserRole.USER);

     const dashboard = new DashboardPage(page);
     await dashboard.verifyDashboardLoaded();
    }
  );
});

---

Naming Conventions

Component	Convention	Example
Packages/Folders	kebab-case	tests/auth, utils/helpers
Classes	PascalCase	LoginPage.ts, DashboardPage.ts
Methods/Vars	camelCase	navigateTo(), isUserLoggedIn

---

Execution

# Install dependencies
npm install

# Run all tests
npx playwright test

# Run smoke tests
smoke.bat

# Run regression tests
regression.bat

---

Reporting & Logging

• Playwright HTML Report: Generated automatically after execution in /playwright-report/.
• Allure Report: Generated if configured via allure-playwright.
• Screenshots, Videos & Traces: Stored automatically under test-results/.

---

Contact & Credits

• Maintained by: Aesha Mangukiya
• Email: aeshamangukiya1@gmail.com
• GitHub: aeshamangukiya