OrangeHRM Live Demo

This demo runs NAT's full FunctionalTestOrchestrator pipeline against the publicly available OrangeHRM (opens in a new tab) HR management demo site. It exercises login, the main dashboard, employee CRUD, the leave module, and the recruitment module — then produces a unified HTML report combining functional results, visual regression diffs, accessibility violations, and Core Web Vitals.

The demo is included with NAT. After installing nat-engine, run nat demo --target orangehrm to execute the full demo pipeline.

What the demo does

Phase	Actions
1 — Login	Navigate to the OrangeHRM demo login page, enter credentials, verify dashboard loads
2 — Dashboard	Capture screenshot, measure Core Web Vitals (LCP, FCP, CLS), run accessibility scan
3 — Employee CRUD	Add a new employee via the PIM module, verify the record appears in the employee list, then delete the test record
4 — Leave module	Navigate to Leave → Apply Leave, submit a leave request, verify it appears in My Leave List
5 — Recruitment	Navigate to Recruitment → Vacancies, verify vacancy list loads, inspect job posting details
6 — Report generation	Write unified HTML + JSON reports to `demo_output/`

Prerequisites

Install NAT and Playwright

pip install nat-engine playwright
playwright install chromium

Running the demo

Headless mode (default — for CI)

nat demo --target orangehrm

The browser runs invisibly in the background. This is the recommended mode for CI/CD pipelines and automated regression checks.

Headed mode (for live recording)

nat demo --target orangehrm --headed

The browser window is visible and each step includes a short pause so you can follow along. Use this mode when recording a screen capture or presenting a live demo.

Expected output

When the demo completes successfully you will see output similar to:

NAT OrangeHRM Demo
==================
[1/6] Login .............. ✓  (1.2s)
[2/6] Dashboard .......... ✓  LCP 1.8s · FCP 0.9s · CLS 0.02 · 3 accessibility warnings
[3/6] Employee CRUD ...... ✓  Created: John Demo (EMP-9042) · Deleted
[4/6] Leave module ....... ✓  Leave request submitted and visible in My Leave List
[5/6] Recruitment ........ ✓  2 vacancies listed
[6/6] Report ............. ✓  demo_output/report.html

Demo completed in 42.3s — 5/5 functional tests passed
Report: demo_output/report.html
JSON:   demo_output/report.json

Output files

File	Contents
`demo_output/report.html`	Self-contained unified HTML report (no external dependencies)
`demo_output/report.json`	Machine-readable JSON with all test results and metrics
`demo_output/screenshots/`	Per-step screenshots captured during the run
`demo_output/baselines/`	Visual regression baselines stored after the first run

Report sections

The unified HTML report contains four sections:

Functional results

A pass/fail table for every test step — login, dashboard, employee CRUD, leave, and recruitment — with timing, DOM snapshots, and screenshots for each step.

Visual regression

Pixel-diff comparison against stored baselines. On the first run, baselines are captured automatically. Subsequent runs highlight any visual changes above the configured threshold (default: 0.1%).

Accessibility

WCAG 2.1 violations grouped by severity (critical, serious, moderate, minor). For each violation, the report shows the affected element, a description of the issue, and the WCAG success criterion.

Performance

Core Web Vitals for each page visited during the demo:

Metric	Description	Google "Good" threshold
LCP	Largest Contentful Paint	≤ 2.5 s
FCP	First Contentful Paint	≤ 1.8 s
CLS	Cumulative Layout Shift	≤ 0.1
TBT	Total Blocking Time	≤ 200 ms

Configuration

The nat demo command accepts the following flags:

Argument	Description	Default
`--headed`	Run with a visible browser window	`false`
`--output-dir <path>`	Directory to write report files	`demo_output`
`--slow-mo <ms>`	Milliseconds of delay between actions (headed mode)	`500`
`--timeout <ms>`	Navigation timeout per step	`30000`
`--base-url <url>`	Override the OrangeHRM demo URL	OrangeHRM public demo

Running in CI

The demo runs cleanly in GitHub Actions with no additional setup beyond installing the dependencies:

- name: Install NAT and Playwright
  run: |
    pip install nat-engine playwright
    playwright install chromium
 
- name: Run OrangeHRM demo
  run: nat demo --target orangehrm
 
- name: Upload demo report
  uses: actions/upload-artifact@v4
  with:
    name: orangehrm-demo-report
    path: demo_output/

⚠️

The OrangeHRM public demo site is a shared environment that can occasionally be slow or temporarily unavailable. The script handles timeouts gracefully and prints a clear error message if a step fails. Retry the run if the demo site is unresponsive.

Troubleshooting

`playwright install chromium` fails in Docker

Add --with-deps to install system dependencies:

playwright install --with-deps chromium

Login fails with incorrect credentials

The OrangeHRM public demo uses standard credentials (Admin / admin123). If the site has been reset, check demo.orangehrm.com (opens in a new tab) for the current credentials.

Steps time out

Increase the timeout with --timeout 60000 (60 seconds). The OrangeHRM demo site can be slow at peak times.

Demo Mode guide — NAT's built-in sandboxed demo against a local example API
Functional Testing — full reference for browser-based test execution
CLI Reference — all NAT CLI commands and flags

Was this helpful?

Demo Hub