everything-claude-code/commands/e2e.md

description

description
Legacy slash-entry shim for the e2e-testing skill. Prefer the skill directly.

E2E Command (Legacy Shim)

Use this only if you still invoke /e2e. The maintained workflow lives in skills/e2e-testing/SKILL.md.

Canonical Surface

• Prefer the e2e-testing skill directly.
• Keep this file only as a compatibility entry point.

Arguments

$ARGUMENTS

Delegation

Apply the e2e-testing skill.

• Generate or update Playwright coverage for the requested user flow.

• Run only the relevant tests unless the user explicitly asked for the entire suite.

• Capture the usual artifacts and report failures, flake risk, and next fixes without duplicating the full skill body here. await marketsPage.searchMarkets('xyznonexistentmarket123456')

  // Verify empty state await expect(page.locator('[data-testid="no-results"]')).toBeVisible() await expect(page.locator('[data-testid="no-results"]')).toContainText( /no.*results|no.*markets/i )

  const marketCount = await marketsPage.marketCards.count() expect(marketCount).toBe(0) })

  test('can clear search and see all markets again', async ({ page }) => { const marketsPage = new MarketsPage(page) await marketsPage.goto()

  // Initial market count const initialCount = await marketsPage.marketCards.count()

  // Perform search await marketsPage.searchMarkets('trump') await page.waitForLoadState('networkidle')

  // Verify filtered results const filteredCount = await marketsPage.marketCards.count() expect(filteredCount).toBeLessThan(initialCount)

  // Clear search await marketsPage.searchInput.clear() await page.waitForLoadState('networkidle')

  // Verify all markets shown again const finalCount = await marketsPage.marketCards.count() expect(finalCount).toBe(initialCount) }) })

## Running Tests

```bash
# Run the generated test
npx playwright test tests/e2e/markets/search-and-view.spec.ts

Running 3 tests using 3 workers

  ✓  [chromium] › search-and-view.spec.ts:5:3 › user can search markets and view details (4.2s)
  ✓  [chromium] › search-and-view.spec.ts:52:3 › search with no results shows empty state (1.8s)
  ✓  [chromium] › search-and-view.spec.ts:67:3 › can clear search and see all markets again (2.9s)

  3 passed (9.1s)

Artifacts generated:
- artifacts/search-results.png
- artifacts/market-details.png
- playwright-report/index.html

Test Report

╔══════════════════════════════════════════════════════════════╗
║                    E2E Test Results                          ║
╠══════════════════════════════════════════════════════════════╣
║ Status:     PASS: ALL TESTS PASSED                              ║
║ Total:      3 tests                                          ║
║ Passed:     3 (100%)                                         ║
║ Failed:     0                                                ║
║ Flaky:      0                                                ║
║ Duration:   9.1s                                             ║
╚══════════════════════════════════════════════════════════════╝

Artifacts:
 Screenshots: 2 files
 Videos: 0 files (only on failure)
 Traces: 0 files (only on failure)
 HTML Report: playwright-report/index.html

View report: npx playwright show-report

PASS: E2E test suite ready for CI/CD integration!

## Test Artifacts

When tests run, the following artifacts are captured:

**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

```bash
# 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

Flaky Test Detection

If a test fails intermittently:

WARNING:  FLAKY TEST DETECTED: tests/e2e/markets/trade.spec.ts

Test passed 7/10 runs (70% pass rate)

Common failure:
"Timeout waiting for element '[data-testid="confirm-btn"]'"

Recommended fixes:
1. Add explicit wait: await page.waitForSelector('[data-testid="confirm-btn"]')
2. Increase timeout: { timeout: 10000 }
3. Check for race conditions in component
4. Verify element is not hidden by animation

Quarantine recommendation: Mark as test.fixme() until fixed

Browser Configuration

Tests run on multiple browsers by default:

• PASS: Chromium (Desktop Chrome)
• PASS: Firefox (Desktop)
• PASS: WebKit (Desktop Safari)
• PASS: Mobile Chrome (optional)

Configure in playwright.config.ts to adjust browsers.

CI/CD Integration

Add to your CI pipeline:

# .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/

PMX-Specific Critical Flows

For PMX, prioritize these E2E tests:

CRITICAL (Must Always Pass):

1. User can connect wallet
2. User can browse markets
3. User can search markets (semantic search)
4. User can view market details
5. User can place trade (with test funds)
6. Market resolves correctly
7. User can withdraw funds

IMPORTANT:

1. Market creation flow
2. User profile updates
3. Real-time price updates
4. Chart rendering
5. Filter and sort markets
6. Mobile responsive layout

Best Practices

DO:

• PASS: Use Page Object Model for maintainability
• PASS: Use data-testid attributes for selectors
• PASS: Wait for API responses, not arbitrary timeouts
• PASS: Test critical user journeys end-to-end
• PASS: Run tests before merging to main
• PASS: Review artifacts when tests fail

DON'T:

• FAIL: Use brittle selectors (CSS classes can change)
• FAIL: Test implementation details
• FAIL: Run tests against production
• FAIL: Ignore flaky tests
• FAIL: Skip artifact review on failures
• FAIL: Test every edge case with E2E (use unit tests)

Important Notes

CRITICAL for PMX:

• E2E tests involving real money MUST run on testnet/staging only
• Never run trading tests against production
• Set test.skip(process.env.NODE_ENV === 'production') for financial tests
• Use test wallets with small test funds only

Integration with Other Commands

• Use /plan to identify critical journeys to test
• Use /tdd for unit tests (faster, more granular)
• Use /e2e for integration and user journey tests
• Use /code-review to verify test quality

Related Agents

This command invokes the e2e-runner agent provided by ECC.

For manual installs, the source file lives at: agents/e2e-runner.md

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