Skip to content

SubramanianQA1995/playwright-framework

BranchesTags

Repository files navigation

🎭 QA Automation Practice Playground — Playwright Framework

Enterprise-grade Playwright TypeScript automation framework targeting the QA Automation Practice Playground (30 sections, 600+ test cases).

📋 Table of Contents

📁 Framework Structure

playwright-framework/
│
├── tests/                          # Test specs (30 sections × 20 cases each)
│   ├── s01/  basic-form.spec.ts    # Section 1  — Basic Form Elements
│   ├── s02/  buttons.spec.ts       # Section 2  — Button Interactions
│   ├── s03/  checkboxes.spec.ts    # Section 3  — Checkboxes & Radio
│   ├── s04/  dropdowns.spec.ts     # Section 4  — Dropdowns
│   ├── s07/  waits.spec.ts         # Section 7  — Waits & Sync
│   ├── s08/  table.spec.ts         # Section 8  — Table Automation
│   ├── s09/  alerts.spec.ts        # Section 9  — Alerts
│   ├── s10/  modals.spec.ts        # Section 10 — Modals
│   ├── s11/  iframe.spec.ts        # Section 11 — iFrame
│   ├── s12/  shadow-dom.spec.ts    # Section 12 — Shadow DOM
│   ├── s13/  drag-drop.spec.ts     # Section 13 — Drag & Drop
│   ├── s14/  hover.spec.ts         # Section 14 — Hover Menus
│   ├── s15/  tooltip.spec.ts       # Section 15 — Tooltips
│   ├── s16/  file-upload.spec.ts   # Section 16 — File Upload / Download
│   ├── s21/  auth.spec.ts          # Section 21 — Authentication
│   ├── s22/  stale-element.spec.ts # Section 22 — Stale Element
│   ├── s23/  dynamic-list.spec.ts  # Section 23 — Dynamic List
│   ├── s26/  keyboard.spec.ts      # Section 26 — Keyboard Actions
│   ├── s27/  slider.spec.ts        # Section 27 — Range Slider
│   ├── s28/  datepicker.spec.ts    # Section 28 — Date Picker
│   └── s30/  complex-dom.spec.ts   # Section 30 — Complex DOM
│
├── pages/                          # Page Object Models
│   ├── BasePage.ts                 # Shared utilities (nav, wait, scroll)
│   ├── BasicFormPage.ts            # Section 1
│   ├── ButtonsPage.ts              # Section 2
│   ├── CheckboxesPage.ts           # Section 3
│   ├── DropdownsPage.ts            # Section 4
│   ├── DynamicContentPage.ts       # Sections 6, 7, 22, 23, 24, 25
│   ├── TablePage.ts                # Section 8
│   ├── AlertsModalPage.ts          # Sections 9, 10
│   ├── AdvancedPage.ts             # Sections 11-15, 16-20, 26-30
│   └── AuthPage.ts                 # Section 21
│
├── components/                     # Reusable UI components
│   ├── TableComponent.ts           # Generic table helper
│   └── FormComponent.ts            # Generic form helper
│
├── fixtures/
│   └── custom-fixtures.ts          # Extended test fixtures (all POM injection)
│
├── utils/
│   ├── helpers.ts                  # TestHelpers, A11yHelpers
│   ├── constants.ts                # TIMEOUTS, CREDENTIALS, TABLE_DATA, etc.
│   └── fileReader.ts               # JSON/CSV/TXT reader utilities
│
├── config/
│   ├── environment.ts              # Per-environment config (local|ci|staging)
│   ├── global-setup.ts             # Runs once before all tests
│   ├── global-teardown.ts          # Runs once after all tests
│   ├── auth.setup.ts               # Auth state setup project
│   └── .env                        # Environment variables template
│
├── test-data/
│   ├── users.json                  # Valid/invalid login credentials
│   └── products.json               # Form data, dropdown options, dates
│
├── reports/                        # Generated (gitignored) test outputs
│
├── docker/
│   ├── Dockerfile                  # Playwright Docker image
│   └── docker-compose.yml          # Multi-service compose file
│
├── .github/workflows/
│   └── playwright-ci.yml           # GitHub Actions pipeline
│
├── .azure/
│   └── azure-pipelines.yml         # Azure DevOps pipeline
│
├── .jenkins/
│   └── Jenkinsfile                 # Jenkins declarative pipeline
│
├── scripts/
│   └── run-tests.sh                # CLI convenience wrapper
│
├── playwright.config.ts            # Main Playwright configuration
├── tsconfig.json                   # TypeScript configuration
├── package.json                    # Dependencies & npm scripts
├── .eslintrc.json                  # ESLint rules
├── .prettierrc                     # Prettier formatting
└── .gitignore                      # Git ignore rules

🔧 Prerequisites

Tool Minimum Version
Node.js 18.0.0
npm 9.0.0
Playwright 1.44.0
TypeScript 5.4.5

🚀 Quick Start

# 1. Clone / enter the framework directory
cd playwright-framework

# 2. Install all dependencies
npm ci

# 3. Install Playwright browsers
npm run setup

# 4. Place the playground HTML at the project root
cp /path/to/automation-practice-playground.html ./

# 5. Run smoke tests
npm run test:smoke

# 6. View the report
npm run test:report

⚙️ Configuration

Environment Variables (config/.env)

Variable Default Description
TEST_ENV local local / ci / staging
BASE_URL file://./automation-practice-playground.html Path or URL to the playground
VALID_USERNAME admin Login username for auth tests
VALID_PASSWORD password123 Login password for auth tests
CI false Enables CI-specific settings
HEADLESS false Force headless mode

Copy .env to .env.local and override values locally. Never commit real credentials.

▶️ Running Tests

npm scripts

# All tests (default browser)
npm test

# Headed mode
npm run test:headed

# Interactive UI mode
npm run test:ui

# Debug mode (step-through)
npm run test:debug

# Specific browser
npm run test:chromium
npm run test:firefox
npm run test:webkit
npm run test:all-browsers

# Tag-based
npm run test:smoke         # @smoke tag
npm run test:regression    # @regression tag

# Parallel / serial
npm run test:parallel      # 4 workers
npm run test:serial        # 1 worker

# Open last HTML report
npm run test:report

# Generate Allure report
npm run report:allure

Shell script (with options)

chmod +x scripts/run-tests.sh

# Smoke tests in headed mode
./scripts/run-tests.sh --smoke --headed

# Section 21 on Firefox
./scripts/run-tests.sh -s 21 -b firefox

# Full regression with report
./scripts/run-tests.sh --regression --report

# Run inside Docker
./scripts/run-tests.sh --docker

Run a specific section

npx playwright test --grep @s21        # Auth section
npx playwright test --grep "@s11|@s12" # iframe + Shadow DOM
npx playwright test tests/s08/         # Table folder directly

🧪 Test Organisation

Every spec file follows this naming and tagging convention:

TC_S{section}_{P|N}{number} — Description @tagA @tagB

P = Positive test case
N = Negative test case

Tag taxonomy

Tag Meaning
@smoke Critical path — run on every commit
@regression Full coverage — nightly / PRs
@s1–@s30 Section-specific filter
@form Form-related tests
@auth Authentication tests
@advanced Shadow DOM, iFrame, Stale Element

🏗️ Page Objects

All Page Objects extend BasePage which provides:

  • navigateTo(url?) — navigate to playground
  • scrollToSection(id) — smooth scroll to section anchor
  • waitForElement(selector) — explicit wait
  • waitForElementHidden(selector) — wait for hidden state
  • waitForText(selector, text) — wait for text condition
  • takeScreenshot(name) — manual screenshot
  • getText / getValue / getAttribute — element data extraction

POM Hierarchy

BasePage
  ├── BasicFormPage     (s1)
  ├── ButtonsPage       (s2)
  ├── CheckboxesPage    (s3)
  ├── DropdownsPage     (s4)
  ├── DynamicContentPage (s6, s7, s22, s23, s24, s25)
  ├── TablePage         (s8)
  ├── AlertsModalPage   (s9, s10)
  ├── AuthPage          (s21)
  └── AdvancedPage      (s11-s20, s26-s30)

🔌 Fixtures & Components

Custom Fixtures (fixtures/custom-fixtures.ts)

All Page Objects are injected automatically — no manual instantiation needed:

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

test('my test', async ({ authPage, tablePage }) => {
  await authPage.loginAndWaitForDashboard('admin', 'password123');
  await tablePage.goto();
  // ...
});

Reusable Components

import { TableComponent } from '../components/TableComponent';
import { FormComponent }  from '../components/FormComponent';

// Generic table helper
const table = new TableComponent(page, '#my-table');
const rows  = await table.getRowCount();
const sorted = await table.isSortedAscending(1);

// Generic form helper
const form = new FormComponent(page);
await form.fillByTestId('input-email', '[email protected]');
await form.submitByTestId('btn-submit');

🔄 CI/CD Integration

GitHub Actions (.github/workflows/playwright-ci.yml)

  • Triggers: push, PR, nightly schedule, manual dispatch
  • Sharded parallel runs (3 shards × chromium)
  • Cross-browser on schedule (Firefox + WebKit)
  • Merged HTML report published to GitHub Pages
  • Artifacts retained for 7–14 days

Azure DevOps (.azure/azure-pipelines.yml)

  • Parallel matrix strategy
  • JUnit results published to Azure Test Plans
  • HTML + Allure artifacts uploaded per shard
  • Parameterised environment and browser selection

Jenkins (.jenkins/Jenkinsfile)

  • Declarative pipeline with Docker agent
  • Parallel lint + type-check stage
  • Allure report via allure-jenkins-plugin
  • Slack notifications on pass/fail
  • Cross-browser stage gated to nightly triggers

🐳 Docker

# Build image
docker build -f docker/Dockerfile -t qa-playground-pw .

# Run smoke tests
docker compose -f docker/docker-compose.yml up playwright-smoke

# Run full regression
docker compose -f docker/docker-compose.yml up playwright-regression

# View Allure report at http://localhost:5050
docker compose -f docker/docker-compose.yml up allure

📊 Reporting

Reporter Output Command
HTML playwright-report/index.html npm run test:report
JSON test-results/results.json Auto-generated
JUnit test-results/results.xml Auto-generated (CI use)
Allure allure-report/ npm run report:allure
List Terminal stdout Default

Screenshots, videos, and traces are captured on failure and stored in test-results/artifacts/.

⚡ Execution Flow

npx playwright test
        │
        ▼
 Read playwright.config.ts
 (browsers, workers, retries, reporters)
        │
        ▼
  global-setup.ts
  (create dirs, copy HTML, log env)
        │
        ▼
  config/auth.setup.ts  ──────────────────┐
  (login once, save auth-state.json)      │
        │                                 │
        ▼                                 │
  Execute tests/ **/*.spec.ts             │
  (with injected fixtures from           (storageState
   custom-fixtures.ts)                    reused by
        │                                 test projects)
        │  Page Objects (pages/)         ─┘
        │  Components  (components/)
        │  Helpers     (utils/)
        │  Test Data   (test-data/)
        │
        ▼
  Reports: HTML + JSON + JUnit + Allure
        │
        ▼
  global-teardown.ts
  (log summary, cleanup)

⭐ Key Highlights

  • ✅ Page Object Model (POM) — clean separation between locators and test logic
  • ✅ TypeScript — strict typing throughout for better IDE support and safety
  • ✅ Reusable components — TableComponent, FormComponent usable across tests
  • ✅ Custom fixtures — all POMs auto-injected, zero boilerplate per test
  • ✅ Data-driven — test data externalised to test-data/users.json and products.json
  • ✅ Environment-aware — local / ci / staging configs with .env override
  • ✅ Parallelisation — sharded runs, configurable workers
  • ✅ Multi-browser — Chromium, Firefox, WebKit, Mobile Chrome, Mobile Safari
  • ✅ CI/CD ready — GitHub Actions, Azure DevOps, Jenkins pipelines included
  • ✅ Docker — fully containerised run with Allure server sidecar
  • ✅ Rich reporting — HTML, JSON, JUnit, Allure with screenshots, videos, traces on failure
  • ✅ 600+ test cases — 20 per section (10 positive + 10 negative) across all 30 sections

💡 Pro Tip: A well-structured framework improves reusability, maintainability and helps the team deliver stable and reliable automation at scale.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages