Playwright

Adds a project for testing the UI using playwright.dev

Technology

Playwright
Golang
Project Forge

The playwright module provides comprehensive end-to-end testing capabilities for Project Forge applications using Playwright. It enables cross-browser testing with support for multiple device configurations, accessibility scenarios, and progressive enhancement validation.

Overview

This module adds a complete Playwright testing setup that validates your application across:

Key Features

Cross-Browser Testing

Accessibility Testing

Visual Testing

Performance Testing

Test Configuration

Browser Matrix

The module includes comprehensive browser and device coverage:

Test Categories

Package Structure

Test Files

Configuration

Usage

Running Tests

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
# Navigate to the test directory
cd test/playwright

# Install dependencies
npm install

# Run all tests
npx playwright test

# Run specific browser tests
npx playwright test --project=chrome
npx playwright test --project=safari.mobile

# Run with visual output
npx playwright test --headed

# Generate HTML report
npx playwright show-report

Test Development

Create new test files following the existing pattern:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { expect, test } from '@playwright/test';

test.describe('feature name', () => {
  test('should validate functionality', async ({ page, browserName }, testInfo) => {
    await page.goto('/your-feature');
    
    // Take screenshots for visual validation
    const screenshot = await page.screenshot({ fullPage: true });
    await testInfo.attach(`feature/${browserName}`, { 
      body: screenshot, 
      contentType: 'image/png' 
    });
    
    // Perform assertions
    await expect(page).toHaveTitle(/Expected Title/);
  });
});

Accessibility Testing

The configuration automatically tests:

Integration

CI/CD Pipeline

The module integrates with GitHub Actions for: - Automated test execution on pull requests - Cross-browser compatibility verification - Visual regression detection - Performance monitoring

Local Development

Configuration

Custom Configuration

Modify playwright.config.ts to: - Add new browser configurations - Adjust viewport sizes - Configure additional test reporters - Set custom timeout values

Source Code

See Also