E2E Testing with Playwright
Relevant source files
The following files were used as context for generating this wiki page:
End-to-End (E2E) testing in the Product Compare project is implemented using the Playwright framework to validate critical user journeys and system integrations. The testing suite focuses on verifying that the frontend, powered by React and Relay, correctly interacts with the Phoenix-based GraphQL API for authentication and product comparison workflows.
The E2E tests are designed to run against a local development server or a CI environment, ensuring that the application responds correctly to user inputs and navigations. By mocking GraphQL responses, the suite can simulate various backend states, including successful operations, validation errors, and network failures, providing a robust verification gate before deployment.
Sources: assets/tests/e2e/auth.spec.ts, assets/playwright.config.ts, backend_starting_guide.md:204-208
Testing Architecture and Configuration
The E2E testing infrastructure is centralized within the assets/ directory. Configuration is managed through playwright.config.ts, which defines the test environment, base URL, and the web server lifecycle.
Core Configuration Components
The project uses a dedicated web server for testing, typically running on port 4173. The configuration ensures that tests can run in both local development (reusing existing servers) and CI environments (starting fresh instances).
| Option | Value / Description |
|---|---|
testDir | ./tests/e2e |
baseURL | http://127.0.0.1:4173 |
command | bun run dev --host 127.0.0.1 --port 4173 --strictPort |
reuseExistingServer | Enabled outside of CI environments |
Sources: assets/playwright.config.ts:3-13
Test Execution Flow
E2E tests follow a structured flow involving environment setup, GraphQL mocking, and assertion of UI states.
The diagram shows the lifecycle of an E2E test execution, from starting the server to asserting the final UI state.
Sources: assets/package.json:11, assets/tests/e2e/auth.spec.ts:13-52
GraphQL Interception and Mocking
A critical feature of the E2E suite is the mockGraphQL utility. This function intercepts POST requests to **/api/graphql and fulfills them with predefined mock data based on the GraphQL operationName.
Mocking Logic
- Operation Extraction: The system parses the GraphQL query string using regex to identify the
operationName(e.g., "Login", "Register"). - Request Tracking: All intercepted requests are pushed to an array, allowing tests to verify that the correct variables were sent to the backend.
- Response Fulfillment: The utility returns a 200 OK status with a JSON body if the operation is found in the mock map; otherwise, it returns a 500 error.
The sequence diagram illustrates how the test suite intercepts frontend API calls to simulate backend behavior without requiring a live database.
Sources: assets/tests/e2e/auth.spec.ts:13-52
Functional Test Coverage
Authentication Workflows
The authentication tests cover the full lifecycle of user sessions, from login to password recovery.
- Login: Verifies that successful mutations redirect to the home route (
/) and that credential errors (e.g.,INVALID_CREDENTIALS) are rendered as alerts. - Registration: Ensures that new account creation correctly triggers a
Registermutation and redirects the user. - Password Management: Tests the "Forgot Password" and "Reset Password" flows, including verification that reset tokens are correctly consumed from the URL.
- Email Verification: Validates that verification links with tokens correctly update the UI status.
Sources: assets/tests/e2e/auth.spec.ts:59-183
Smoke Testing
A basic smoke test ensures the fundamental availability of the application by navigating to the root URL and checking for the visibility of the "Product Compare" heading.
Sources: assets/tests/e2e/smoke.spec.ts:3-6
Integration with Development Workflow
The E2E suite is integrated into the project's scripts and CI gates.
NPM Scripts
| Script | Command | Purpose |
|---|---|---|
test:e2e | playwright test | Runs the full E2E suite |
dev | vite | Starts the development server used by Playwright |
Sources: assets/package.json:11, assets/playwright.config.ts:10
Verification Gates
E2E integration tests are classified as a "required test layer" for critical product flows. They complement unit tests and context integration tests to provide a comprehensive verification strategy.
Sources: backend_starting_guide.md:204-208
Conclusion
E2E testing with Playwright provides the Product Compare project with a reliable method for verifying frontend-to-backend integration. By combining strict configuration with sophisticated GraphQL mocking, the suite ensures that critical paths like authentication and product discovery remain functional as the codebase evolves.