Playwright E2E Testing Suite

AngularNetTutorial - End-to-End & API Testing

Automated testing suite for the AngularNetTutorial CAT Pattern application using Playwright.

📖 What is This?

This repository contains end-to-end (E2E) tests that verify the entire AngularNetTutorial application works correctly from a user's perspective. Tests simulate real user interactions in a browser—clicking buttons, filling forms, navigating pages—to ensure features work as expected.

What is Playwright?

Playwright is a modern browser automation tool by Microsoft that allows you to:

Automate web browsers (Chromium, Firefox, WebKit)
Test web applications like a real user would interact with them
Run tests in parallel across multiple browsers
Debug tests with time-travel and visual tools
Integrate with CI/CD pipelines

What We Test

✅ Authentication Flows - Login/logout with IdentityServer (OAuth 2.0/OIDC)
✅ Role-Based Access Control - Different permissions for Employee, Manager, HRAdmin
✅ CRUD Operations - Create, read, update, delete employees, departments, positions
✅ Dashboard Features - Charts, metrics, and data visualization
✅ API Integration - Direct API endpoint testing
✅ Visual Regression - Screenshot comparison to detect UI changes
✅ Accessibility - ARIA compliance and keyboard navigation
✅ Cross-Browser - Tests run on Chromium, Firefox, and Safari (WebKit)

⚠️ Important: Prerequisites

1. Install Required Tools

Before running tests, you need:

Node.js 20+ - Download
npm 10+ - Included with Node.js
Git - Download

2. CRITICAL: Start All Services FIRST

Tests will fail if the application is not running!

You must start these three services before running any tests:

Terminal 1: IdentityServer (Authentication)

cd C:\apps\AngularNetTutotial\TokenService\Duende-IdentityServer\src\Duende.STS.Identity
dotnet run

Wait for: Now listening on: https://sts.skoruba.local

Terminal 2: .NET Web API (Backend)

cd C:\apps\AngularNetTutotial\ApiResources\TalentManagement-API
dotnet run

Wait for: Now listening on: https://localhost:44378

Terminal 3: Angular Client (Frontend)

cd C:\apps\AngularNetTutotial\Clients\TalentManagement-Angular-Material\talent-management
npm start

Wait for: Angular Live Development Server is listening on localhost:4200

Verify all services are running:

Angular: http://localhost:4200 (should show login page)
API: https://localhost:44378/swagger (should show Swagger UI)
IdentityServer: https://sts.skoruba.local (should show IdentityServer page)

🚀 Quick Start

Step 1: Install Dependencies

cd C:\apps\AngularNetTutotial\Tests\AngularNetTutorial-Playwright
npm install

Step 2: Install Playwright Browsers

First-time setup only:

npx playwright install

This downloads Chromium, Firefox, and WebKit browsers for testing.

Step 3: Run Tests

Make sure all services are running first! (See Prerequisites above)

# Run all tests (headless mode)
npx playwright test

# Run tests and see the browser (headed mode)
npx playwright test --headed

# Run tests with interactive UI (recommended for beginners)
npx playwright test --ui

Step 4: View Test Report

After tests complete:

npx playwright show-report

This opens an HTML report showing which tests passed/failed with screenshots and videos.

🧪 Running Tests

Basic Commands

# Run all tests
npx playwright test

# Run tests in headed mode (see browser actions)
npx playwright test --headed

# Run tests in UI mode (interactive debugging - RECOMMENDED)
npx playwright test --ui

# Run tests in debug mode (step-by-step debugger)
npx playwright test --debug

Run Specific Tests

# Run a specific test file
npx playwright test tests/auth/login.spec.ts

# Run all tests in a folder
npx playwright test tests/employee-management/

# Run tests matching a name pattern
npx playwright test -g "should login successfully"

# Run only failed tests from last run
npx playwright test --last-failed

Run in Different Browsers

# Run in Chromium (default)
npx playwright test --project=chromium

# Run in Firefox
npx playwright test --project=firefox

# Run in Safari (WebKit)
npx playwright test --project=webkit

# Run in all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

🐛 Debugging Tests

Playwright offers several powerful debugging tools:

1. UI Mode (Recommended for Beginners)

The best way to debug tests interactively:

npx playwright test --ui

Features:

Watch tests run in real-time
Time-travel debugging (go back to any step)
Inspect DOM at each step
View network requests
Pick specific tests to run
See screenshots and videos

2. Debug Mode (Step-by-Step)

Run tests with the Playwright Inspector:

npx playwright test --debug

Features:

Pause execution at each step
Step through test line-by-line
Inspect page elements with selector highlighter
View console logs
Execute Playwright commands manually

3. Headed Mode (Watch Browser)

See the browser as tests run:

npx playwright test --headed

Good for quickly seeing what's happening without the full debugger.

4. Screenshots & Videos

Tests automatically capture screenshots and videos on failure:

# Screenshots and videos saved to:
test-results/<test-name>/

View them in the HTML report:

npx playwright show-report

5. Trace Viewer (Advanced)

Record and replay test execution:

# Generate trace
npx playwright test --trace on

# View trace
npx playwright show-trace trace.zip

Features:

Complete timeline of test execution
Network activity
Console logs
DOM snapshots at each step
Screenshots

📂 Test Organization

Tests are organized by feature area:

tests/
├── auth/                       # Login, logout, authentication
├── employee-management/        # Employee CRUD operations
├── department-management/      # Department CRUD
├── position-management/        # Position CRUD (HRAdmin only)
├── salary-ranges/              # Salary range management
├── dashboard/                  # Dashboard features
├── api/                        # Direct API endpoint tests
├── workflows/                  # Multi-step user workflows
├── visual/                     # Visual regression tests
├── accessibility/              # ARIA compliance tests
└── performance/                # Performance tests

Supporting Files:

fixtures/ - Reusable test helpers (login, test data, API calls)
page-objects/ - Page Object Models for complex pages
config/ - Test users, environment URLs
playwright.config.ts - Playwright configuration

👥 Test User Accounts

The application has three test users with different permission levels:

Role	Username	Password	Permissions
Employee	`antoinette16`	`Pa$$word123`	Read-only - Can view data only
Manager	`rosamond33`	`Pa$$word123`	Create/Update - Can create and edit employees & departments (cannot delete)
HRAdmin	`ashtyn1`	`Pa$$word123`	Full Access - Complete CRUD on all entities including positions and salary ranges

Note: These credentials are defined in config/test-users.json and match the users configured in IdentityServer.

🔧 Configuration

Playwright Config (`playwright.config.ts`)

Key settings:

Base URL: http://localhost:4200
Timeout: 30 seconds per test
Retries: 2 retries on CI, 0 locally
Browsers: Chromium, Firefox, WebKit
Screenshots: Captured on failure
Videos: Recorded on first retry
Reporters: HTML, JSON, JUnit

Environment URLs (`config/environments.json`)

{
  "development": {
    "angularUrl": "http://localhost:4200",
    "apiUrl": "https://localhost:44378",
    "identityServerUrl": "https://sts.skoruba.local"
  }
}

🐛 Troubleshooting

Tests Fail with Connection Errors

Problem: net::ERR_CONNECTION_REFUSED or timeout errors

Solution:

Verify all three services are running (Angular, API, IdentityServer)
Check URLs are accessible:

Tests Timeout

Problem: Tests fail with Test timeout of 30000ms exceeded

Solution: Increase timeout in playwright.config.ts or for specific tests:

// In your test file
test.setTimeout(60000); // 60 seconds

Login Tests Fail

Problem: Authentication tests fail

Possible causes:

IdentityServer not running
Wrong test credentials
Browser cookies/storage interfering

Solution:

Restart IdentityServer
Verify test users exist in IdentityServer
Run tests in UI mode to see what's happening: npx playwright test --ui

Element Not Found Errors

Problem: Element not found or Selector not found

Solution:

Use UI mode to inspect the page: npx playwright test --ui
Check if element has loaded: add await page.waitForSelector('selector')
Verify the selector is correct using Playwright Inspector

Tests Pass Locally but Fail in CI

Problem: Tests work on your machine but fail in GitHub Actions

Possible causes:

Timing issues (CI is slower)
Browser differences
Environment variables

Solution:

Increase timeouts for CI
Add explicit waits for elements
Check CI logs for specific errors

📊 Viewing Test Results

HTML Report (Recommended)

npx playwright show-report

Shows:

✅ Passed/Failed tests
⏱️ Test duration
📷 Screenshots on failure
🎥 Videos of test execution
📋 Error messages and stack traces

Command Line Output

npx playwright test

Shows real-time test progress with pass/fail indicators.

CI/CD Reports

Tests run automatically on GitHub Actions when you push code. Results appear in the Actions tab.

📚 Learn More

Playwright Documentation

Project Documentation

CLAUDE.md - Complete development guide
docs/ - Additional documentation

Related Repositories

AngularNetTutorial - Main tutorial repository
Angular Client - Frontend application
.NET API - Backend API
IdentityServer - Authentication service

🤝 Contributing

Writing New Tests

Choose the appropriate test folder (e.g., tests/employee-management/)
Create a new .spec.ts file
Follow existing test patterns
Use fixtures for common operations (login, test data)
Run tests locally before committing

Test Writing Best Practices

Keep tests independent - Each test should work in isolation
Use descriptive names - test('should allow Manager to create employee', ...)
Use Page Object Models - For complex pages, create POM in page-objects/
Use fixtures - Reuse login, data creation helpers from fixtures/
Clean up test data - Delete created records in afterEach
Avoid hard-coded waits - Use waitForSelector() instead of waitForTimeout()

📞 Support

Questions?

Check Playwright Documentation
Review existing tests for examples
Open an issue in the repository

📝 License

This project is part of the AngularNetTutorial repository. See parent repository for license information.

Last Updated: March 3, 2026 Playwright Version: Latest Node.js Required: 20+

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Playwright E2E Testing Suite

AngularNetTutorial - End-to-End & API Testing

📖 What is This?

What is Playwright?

What We Test

⚠️ Important: Prerequisites

1. Install Required Tools

2. CRITICAL: Start All Services FIRST

Terminal 1: IdentityServer (Authentication)

Terminal 2: .NET Web API (Backend)

Terminal 3: Angular Client (Frontend)

🚀 Quick Start

Step 1: Install Dependencies

Step 2: Install Playwright Browsers

Step 3: Run Tests

Step 4: View Test Report

🧪 Running Tests

Basic Commands

Run Specific Tests

Run in Different Browsers

🐛 Debugging Tests

1. UI Mode (Recommended for Beginners)

2. Debug Mode (Step-by-Step)

3. Headed Mode (Watch Browser)

4. Screenshots & Videos

5. Trace Viewer (Advanced)

📂 Test Organization

👥 Test User Accounts

🔧 Configuration

Playwright Config (playwright.config.ts)

Environment URLs (config/environments.json)

🐛 Troubleshooting

Tests Fail with Connection Errors

Tests Timeout

Login Tests Fail

Element Not Found Errors

Tests Pass Locally but Fail in CI

📊 Viewing Test Results

HTML Report (Recommended)

Command Line Output

CI/CD Reports

📚 Learn More

Playwright Documentation

Project Documentation

Related Repositories

🤝 Contributing

Writing New Tests

Test Writing Best Practices

📞 Support

📝 License

Playwright Config (`playwright.config.ts`)

Environment URLs (`config/environments.json`)