Skip to main content

Frontend E2E Tests

Status: ✅ ALL 22 TESTS PASSING Framework: Playwright v1.57.0 Last Updated: 2025-12-13

Overview​

Automated E2E tests that mirror backend HTTP test files (auths.http, employers.http, users.http) through the browser UI against the real API.

Test Summary​

FileTestsStatusBackend Reference
auth.spec.ts9✅ Passauths.http
employer.spec.ts5✅ Passemployers.http
users.spec.ts8✅ Passusers.http
Total22✅ Pass

Running Tests​

Prerequisites​

# Terminal 1: Start backend
cd backend && dotnet watch run --project SafetyApp.Api

# Terminal 2: Start frontend
cd frontend && ng serve

Commands​

cd frontend

# Run all tests
pnpm e2e

# Run with UI (debug mode)
pnpm e2e:ui

# View HTML report
pnpm e2e:report

Zed Tasks​

  • E2E: Run All Tests - Run all Playwright tests
  • E2E: Run Tests (UI Mode) - Open Playwright UI for debugging
  • E2E: Show Report - View HTML test report

Test Cases​

Auth Tests (9) - mirrors auths.http​

TCDescriptionBackend TC
TC-1.1Valid login redirects to dashboard1.1
TC-1.2Invalid email format prevents submission1.2
TC-1.3Wrong password shows Thai error message1.3
TC-1.4Non-existent email shows Thai error message1.4
TC-1.5Empty email prevents submission1.5
TC-1.6Empty password prevents submission1.6
TC-2.1Logout redirects to login page2.1
TC-8.1Admin login redirects to employer settings8.1
TC-8.3Contractor login redirects to my-tasks8.3

Employer Tests (5) - mirrors employers.http​

TCDescriptionBackend TC
TC-EMP-1.1Admin can view employer settings1.1
TC-EMP-1.4Contractor cannot access employer settings1.4
TC-EMP-2.1Admin can save employer settings2.1
-All employer settings tabs accessible(bonus)
-Refresh button reloads employer data(bonus)

Users Tests (8) - mirrors users.http​

TCDescriptionBackend TC
TC-USR-1Admin can view user management page1.1
TC-USR-2Admin can create new user (WorkspaceOwner)2.1
TC-USR-3Admin can edit existing user4.1
TC-USR-4Admin can send invitation email7.1
TC-USR-5Admin can delete user (handles FK constraint)5.1, 5.2
TC-USR-6Purchasing can only see contractor users9.1
TC-USR-7Contractor cannot access user management2.4
TC-USR-8Purchasing can create contractor user9.2

Backend → UI Test Mapping​

Why not all 80 backend tests?​

The backend HTTP test files contain 80 tests total (56 auth + 24 employer), but only ~14 are UI-testable:

CategoryReason NOT UI-testable
TC 1.7-1.15API edge cases (SQL injection, null values, long strings)
TC 2.2-2.3Logout edge cases (cookie manipulation)
TC 3.xRefresh token (handled internally by HTTP interceptor)
TC 4.xCreate account (feature disabled in UI)
TC 6.xSearch role types (internal API, no direct UI)
TC 7.xMulti-tenancy (X-Domain header set automatically)

File Structure​

frontend/
├── playwright.config.ts          # Playwright configuration
├── package.json                  # Scripts: e2e, e2e:ui, e2e:report
├── e2e/
│   ├── auth.spec.ts              # Auth E2E tests (9)
│   ├── employer.spec.ts          # Employer E2E tests (5)
│   ├── users.spec.ts             # Users E2E tests (8)
│   └── fixtures/
│       └── test-data.ts          # Test credentials & data

Test Data​

Test credentials are defined in e2e/fixtures/test-data.ts:

RoleEmailRedirect
Admintn@thaiscada.com/tools/settings/employer
Purchasingsafety-purchasing@outlook.com/tasks/my-tasks
Contractorsafety-contractor1-0@outlook.com/tasks/my-tasks

Completed Phases​

PhaseFeatureTestsStatus
1Authentication9✅ Completed
2Employer Settings5✅ Completed
3User Management8✅ Completed (2025-12-13)

Notes​

  • Admin creates WorkspaceOwner users (Purchasing role creates contractors)
  • Delete test handles FK constraint gracefully for invited users
  • TC-USR-8 tests Purchasing role creating contractor with company info