Playwright End-to-End Testing Guide¶

Overview¶

This document outlines the commands for running and debugging E2E tests within the frontend workspace. All commands should be executed from the frontend/ directory.

cd frontend

Development & Debugging¶

The Interactive UI Mode (Recommended) For the best experience during local development, use the UI mode. It provides a visual timeline, "time-travel" debugging, and automatic snapshots of the DOM for every test step.

I use that on my Mac makes debugging the Playwright tests cleaner in an easy ui suite.

pnpm exec playwright test --ui

Debug Mode Launches the Playwright Inspector, allowing you to step through your tests line-by-line in a headed browser.

pnpm exec playwright test --debug

Targeted Test Execution¶

Use these commands to narrow your test scope, keeping the feedback loop fast while iterating on specific features.

Test a Single Feature (Fastest Feedback) Run a specific spec file while working on a targeted fix or feature.

pnpm exec playwright test --config=playwright.config.ts tests/e2e/avif_SetByFileSize_Download_Test.spec.ts

Run a Feature Group (e.g., PDF Workflows) Use regex to run all tests related to a specific module, such as a PDF regression sweep.

pnpm exec playwright test --config=playwright.config.ts -g "pdf"

Note: Alternatively, you can target the filename pattern:

pnpm exec playwright test --config=playwright.config.ts 'tests/e2e/pdf_.*\.spec\.ts'

Full Suite (Pre-Push Validation) Execute the entire test suite to ensure no regressions exist before pushing to the repository.

pnpm exec playwright test --config=playwright.config.ts

Key Execution Flags¶

Post-Test Reports¶

If a test fails in a headless environment (like CI), you can view the detailed HTML report locally:

pnpm exec playwright show-report