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.

Note POST test/set-session

This requires the developer exposes an endpoint on their app that allows to sideload sessions via saveSession. The idea is that the test runner will perform an authentication using the node SDK, and reuse the cookies to avoid having to enter credentials, bypass bot checks in hosted authkit, and generally run E2E tests faster.

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
[email protected]
TEST_PASSWORD=test_password

# For Cypress (uses different variable names)
[email protected]

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.

[ajworkos]

This is the route the developer must expose, and this is the method that must be called. This will return a wos-session cookie that we'll stash and store in cypress/playwright for subsequent tests with this user.

For multiple users in tests, we'll keep an in memory map of user credentials <> cookies for those users in cypress/playwright