Skip to main content

​
/e2e Command

This command invokes the e2e-runner agent to generate, maintain, and execute end-to-end tests using Playwright.

​
What This Command Does

  1. Generate Test Journeys - Create Playwright tests for user flows
  2. Run E2E Tests - Execute tests across browsers
  3. Capture Artifacts - Screenshots, videos, traces on failures
  4. Upload Results - HTML reports and JUnit XML
  5. Identify Flaky Tests - Quarantine unstable tests

​
When to Use

Use /e2e when:
  • Testing critical user journeys (login, trading, payments)
  • Verifying multi-step flows work end-to-end
  • Testing UI interactions and navigation
  • Validating integration between frontend and backend
  • Preparing for production deployment

​
Command Syntax

/e2e <user journey description>
​
user journey description
string
required
Description of the user flow to test end-to-end

​
Examples

​
Basic Usage

/e2e Test the market search and view flow

​
Generated Test Example

// tests/e2e/markets/search-and-view.spec.ts
import { test, expect } from '@playwright/test'
import { MarketsPage } from '../../pages/MarketsPage'
import { MarketDetailsPage } from '../../pages/MarketDetailsPage'

test.describe('Market Search and View Flow', () => {
  test('user can search markets and view details', async ({ page }) => {
    const marketsPage = new MarketsPage(page)
    await marketsPage.goto()

    await expect(page).toHaveTitle(/Markets/)
    await marketsPage.searchMarkets('election')

    await page.waitForResponse(resp =>
      resp.url().includes('/api/markets/search') && resp.status() === 200
    )

    const marketCards = marketsPage.marketCards
    await expect(marketCards.first()).toBeVisible()

    await marketCards.first().click()
    await expect(page).toHaveURL(/\/markets\/[a-z0-9-]+/)

    const detailsPage = new MarketDetailsPage(page)
    await expect(detailsPage.priceChart).toBeVisible()
  })
})

​
Test Artifacts

On All Tests:
  • HTML Report with timeline and results
  • JUnit XML for CI integration
On Failure Only:
  • Screenshot of the failing state
  • Video recording of the test
  • Trace file for debugging (step-by-step replay)
  • Network logs
  • Console logs

​
Viewing Artifacts

# View HTML report in browser
npx playwright show-report

# View specific trace file
npx playwright show-trace artifacts/trace-abc123.zip

# Screenshots are saved in artifacts/ directory
open artifacts/search-results.png

​
Browser Configuration

Tests run on multiple browsers by default:
  • ✅ Chromium (Desktop Chrome)
  • ✅ Firefox (Desktop)
  • ✅ WebKit (Desktop Safari)
  • ✅ Mobile Chrome (optional)

​
Best Practices

DO:
  • ✅ Use Page Object Model for maintainability
  • ✅ Use data-testid attributes for selectors
  • ✅ Wait for API responses, not arbitrary timeouts
  • ✅ Test critical user journeys end-to-end
  • ✅ Run tests before merging to main
  • ✅ Review artifacts when tests fail
DON’T:
  • ❌ Use brittle selectors (CSS classes can change)
  • ❌ Test implementation details
  • ❌ Run tests against production
  • ❌ Ignore flaky tests
  • ❌ Skip artifact review on failures
  • ❌ Test every edge case with E2E (use unit tests)

​
CI/CD Integration

# .github/workflows/e2e.yml
- name: Install Playwright
  run: npx playwright install --with-deps

- name: Run E2E tests
  run: npx playwright test

- name: Upload artifacts
  if: always()
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

​
Quick Commands

# Run all E2E tests
npx playwright test

# Run specific test file
npx playwright test tests/e2e/markets/search.spec.ts

# Run in headed mode (see browser)
npx playwright test --headed

# Debug test
npx playwright test --debug

# Generate test code
npx playwright codegen http://localhost:3000

# View report
npx playwright show-report
  • Agent: ~/.claude/agents/e2e-runner.md
  • Commands: /tdd, /verify, /code-review