Playwright/Cypress examples

[ajworkos]

Add end-to-end testing with Playwright and Cypress

Overview

Added comprehensive E2E test suites for both Playwright and Cypress to demonstrate authentication flows with WorkOS AuthKit. Tests cover both authenticated and unauthenticated user scenarios.

What's Added

Playwright Tests

• Test fixtures (tests/fixtures.ts) - Custom test setup with WorkOS authentication
• Authenticated flows (tests/authenticated-flows.spec.ts) - Tests for logged-in user behavior
• Unauthenticated flows (tests/unauthenticated-flows.spec.ts) - Tests for anonymous user redirects
• Configuration (playwright.config.ts) - Playwright setup with proper timeouts and browser configuration

Cypress Tests

• Custom commands (cypress/support/commands.ts) - cy.login() command for authentication
• WorkOS plugin (cypress/plugins/workos.ts) - Node.js task for API authentication
• Test specs (cypress/e2e/*.cy.ts) - Mirror of Playwright test coverage
• Configuration (cypress.config.ts) - Cypress setup with environment handling

Test Features

• Programmatic authentication - Uses WorkOS SDK to authenticate users via API
• Session caching - Efficient test runs by reusing authentication sessions
• Cross-browser testing - Runs on Chromium, Firefox, and Safari
• Environment flexibility - Configurable for different deployment environments

Test Scenarios Covered

Authenticated Users:

• Homepage displays welcome message and account navigation
• Account page shows user details and is accessible
• Sign out functionality works correctly
• Navigation between protected pages

Unauthenticated Users:

• Homepage shows sign-in prompt
• Protected routes redirect to WorkOS AuthKit login
• Sign-in button navigates to authentication flow

Setup Requirements

Set the following environment variables:

# WorkOS Configuration
WORKOS_API_KEY=your_api_key
WORKOS_CLIENT_ID=your_client_id
WORKOS_COOKIE_PASSWORD=your_cookie_password

# Test Configuration  
TEST_BASE_URL=http://localhost:3000
TEST_EMAIL=test@company.com
TEST_PASSWORD=test_password

# For Cypress (uses different variable names)
TEST_USERNAME=test@company.com

Running Tests

# Playwright
npm run test:playwright

# Cypress  
npm run test:cypress

Both test suites validate the same authentication flows and can be run independently or together for comprehensive coverage.