Automation Portfolio  ·  Playwright + TypeScript

OrangeHRM
Playwright
Automation Framework

End-to-end employee workflow automation — POM, fixtures, data-driven testing, serial hooks, and CI/CD.

Playwright Test TypeScript Page Object Model Custom Fixtures Allure Reports GitHub Actions Data-Driven Headless Chromium
2 / 2
Tests Passing
0
Failures
69s
Total Duration
CI ✓
GitHub Actions
01 — Architecture

Framework Overview

Tech Stack
AreaDetails
ApplicationOrangeHRM Demo
ToolPlaywright Test
LanguageTypeScript
RuntimeNode.js
BrowserChromium — Headless
Test PatternPage Object Model
Test DataJSON Data Files
Configuration.env + environment helper
ReportsPlaywright HTML + Allure HTML
CI/CDGitHub Actions Workflow
Project Structure
OrangeHRMPlaywright/
  ├── .github/workflows/playwright.yml
  ├── fixtures/orangehrm.fixture.ts
  ├── pages/
  │   ├── LoginPage.ts
  │   └── PimPage.ts
  ├── test-data/
  │   ├── employees.json
  │   └── license.json
  ├── tests/employee-registration.spec.ts
  ├── types/employee.ts
  ├── utils/
  │   ├── env.ts
  │   └── jsonDataReader.ts
  ├── package.json
  └── playwright.config.ts
02 — Engineering

Framework Features

01
🏗️
Page Object Model
LoginPage.ts and PimPage.ts encapsulate all UI interactions. Tests remain clean, readable, and maintainable — zero raw selectors in spec files.
02
🔌
Custom Fixtures
orangehrm.fixture.ts extends Playwright's base fixture to inject page objects and JSON test data directly into test functions — zero boilerplate setup per test.
03
⚙️
Environment Config
utils/env.ts loads BASE_URL, credentials, headless flag, and data file paths from .env. Zero hardcoded values anywhere in the test suite.
04
🔗
Hooks & Serial Execution
beforeAll logs in once and reuses the browser session. test.describe.serial guarantees TC-02 only runs after TC-01 completes.
05
📊
Data-Driven Testing
Employee records from employees.json and license data from license.json drive all test inputs. Adding test cases requires only editing JSON — no code changes.
06
Assertions
Validates dashboard navigation, PIM module routing, employee detail persistence, and driving license field updates — covering the complete end-to-end business flow.
employee-registration.spec.ts
1import { test, expect } from '../fixtures/orangehrm.fixture';
2
3test.describe.serial('OrangeHRM Employee Flow', () => {
4
5  test.beforeAll(async ({ loginPage, page }) => {
6    // Single login — session reused across all tests
7    await loginPage.navigate();
8    await loginPage.login(env.USERNAME, env.PASSWORD);
9  });
10
11  test('Register multiple employees from JSON', async ({ pimPage, employees }) => {
12    for (const emp of employees) {
13      await pimPage.addEmployee(emp); // data-driven
14    }
15  });
16
17  test('Edit 4th employee driving license', async ({ pimPage, license }) => {
18    await pimPage.updateLicense(4, license.number);
19    await expect(pimPage.licenseField).toHaveValue(license.number);
20  });
21});
03 — Configuration

Playwright Configuration

Workers
1
Test Timeout
90 s
Expect Timeout
10 s
Parallel
Disabled
Browser
Chromium
Viewport
1440×900
Execution
Headless
Reporters
List · HTML · Allure
Trace
On Failure
Screenshot
On Failure
Video
On Failure
Test Dir
./tests
04 — Execution

Test Execution Flow

1
Launch
Chromium
Headless
2
Navigate
to
OrangeHRM
3
beforeAll
Single
Login
4
Navigate
PIM
Module
5
Register
Employees
from JSON
6
Return to
PIM after
each add
7
Open
4th Employee
Record
8
Update
License
Number
9
Assert
License
Value ✓
05 — Results

Test Execution Results

2
Total Tests
2
Passed
0
Failed
1
Worker
69s
Duration
TC-01 Register multiple employees from JSON chromium ✓ PASSED
TC-02 Edit 4th employee driving license chromium ✓ PASSED
Terminal — npx.cmd playwright test
Running 2 tests using 1 worker
[chromium] › OrangeHRM Employee Flow › Register multiple employees from JSON
[chromium] › OrangeHRM Employee Flow › Edit 4th employee driving license
2 passed (69.3s)
06 — Reporting

Allure Report Evidence

Total
2
Passed
2
Failed / Broken
0
Duration
69.295s
allure-report / index.html
2/2
Passed — 2
Failed — 0
Broken — 0
Skipped — 0
allure-report / suites
chromium
Register multiple employees from JSON 28s
Edit 4th employee driving license 41s
allure-report / graphs
Test Duration (seconds)
TC-01
28s
TC-02
41s
Pass Rate over Runs
Report Artifacts
📄
playwright-report/index.html
Playwright HTML Report
📄
allure-report/index.html
Allure HTML Report
📁
allure-results/
Raw Allure Result Files
07 — CI/CD

GitHub Actions Workflow

Push → main / master
Pull Request → main / master
ubuntu-latest runner
📥
Checkout
actions/checkout
⚙️
Node.js LTS
setup-node
📦
npm ci
Install deps
🌐
Browsers
playwright install
🧪
Run Tests
playwright test
📊
Gen Allure
allure:generate
☁️
Upload
Both artifacts
CI Pipeline — SUCCESS
Workflow: Playwright Tests  ·  Run #1  ·  Branch: main  ·  Trigger: Push
Job: test
2
Artifacts
ubuntu
Runner
08 — Summary

Portfolio Summary

What This Framework Demonstrates
Page Object Model — clean separation of UI and test logic
Custom Playwright fixtures — reusable, zero-boilerplate injection
JSON data-driven testing — scalable without code changes
Environment configuration — zero hardcoded values
Serial hooks — single session, guaranteed execution order
Dual reporting — Playwright HTML + Allure HTML
Full CI/CD pipeline on GitHub Actions
Final Verdict
2/2
Tests Passed
CI
Passed — Run #1
0
Failures
"A complete, production-grade Playwright automation setup — from data-driven test authoring through CI artifact publishing."