🎭 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
Prerequisites
Quick Start
Configuration
Running Tests
Test Organisation
Page Objects
Fixtures & Components
CI/CD Integration
Docker
Reporting
Execution Flow
Key Highlights

📁 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', 'test@example.com');
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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🎭 QA Automation Practice Playground — Playwright Framework

📋 Table of Contents

📁 Framework Structure

🔧 Prerequisites

🚀 Quick Start

⚙️ Configuration

Environment Variables (`config/.env`)

▶️ Running Tests

npm scripts

Shell script (with options)

Run a specific section

🧪 Test Organisation

Tag taxonomy

🏗️ Page Objects

POM Hierarchy

🔌 Fixtures & Components

Custom Fixtures (`fixtures/custom-fixtures.ts`)

Reusable Components

🔄 CI/CD Integration

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

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

Jenkins (`.jenkins/Jenkinsfile`)

🐳 Docker

📊 Reporting

⚡ Execution Flow

⭐ Key Highlights

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🎭 QA Automation Practice Playground — Playwright Framework

📋 Table of Contents

📁 Framework Structure

🔧 Prerequisites

🚀 Quick Start

⚙️ Configuration

Environment Variables (config/.env)

▶️ Running Tests

npm scripts

Shell script (with options)

Run a specific section

🧪 Test Organisation

Tag taxonomy

🏗️ Page Objects

POM Hierarchy

🔌 Fixtures & Components

Custom Fixtures (fixtures/custom-fixtures.ts)

Reusable Components

🔄 CI/CD Integration

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

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

Jenkins (.jenkins/Jenkinsfile)

🐳 Docker

📊 Reporting

⚡ Execution Flow

⭐ Key Highlights

Environment Variables (`config/.env`)

Custom Fixtures (`fixtures/custom-fixtures.ts`)

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

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

Jenkins (`.jenkins/Jenkinsfile`)