e2e

Files (2)

• README.md
• SKILL.md

SKILL.md (first lines)

# 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, checkout, payments)
- Verifying multi-step flows work end-to-end
- Testing UI interactions and navigation
- Validating integration between frontend and backend
- Preparing for production deployment

## How It Works

The e2e-runner agent will:

1. **Analyze user flow** and identify test scenarios
2. **Generate Playwright test** using Page Object Model pattern
3. **Run tests** across multiple browsers (Chrome, Firefox, Safari)
4. **Capture failures** with screenshots, videos, and traces
5. **Generate report** with results and artifacts
6. **Identify flaky tests** and recommend fixes

## Example Usage

```
User: /e2e Test the product search and view flow

Agent (e2e-runner):
# E2E Test Generation: Product Search and View Flow

## Test Scenario Identified

**User Journey:** Product Search -> View Results -> Click Product -> View Details

**Test Coverage:**
1. Navigate to products page
2. Perform search
3. Verify search results
4. Click on first result
5. Verify product details page loads
6. Verify content renders

## Generated Test Code

```typescript
// tests/e2e/products/search-and-view.spec.ts
import { test, expect } from '@playwright/test'
import { ProductsPage } from '../../pages/ProductsPage'
import { ProductDetailsPage } from '../../pages/ProductDetailsPage'

test.describe('Product Search and View Flow', () => {
  test('user can search products and view details', async ({ page }) => {
    const productsPage = new ProductsPage(page)
    await productsPage.goto()
    await expect(page).toHaveTitle(/Products/)
    await productsPage.searchProducts('electronics')
    await page.waitForResponse(resp =>
      resp.url().includes('/api/products/search') && resp.status() === 200
    )
    const productCards = productsPage.productCards
    await expect(productCards.first()).toBeVisible()
    const firstProductTitle = await productCards.first().textContent()
    await productCards.first().click()
    await expect(page).toHaveURL(/\/products\/[a-z0-9-]+/)
    const detailsPage = new ProductDetailsPage(page)
    await expect(detailsPage.productName).toBeVisible()
    await expect(detailsPage.contentSection).toBeVisible()
  })
})
```
```

## 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:

```
FLAKY TEST DETECTED: tests/e2e/products/checkout.spec.ts

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

From PatriotAgenticLLC/better_claude_skillz, MIT.

More from PatriotAgenticLLC/better_claude_skillz