e2e-test-design

# E2E Test Design Skill

Design end-to-end tests that validate complete user journeys.

## When to Use

- Creating E2E tests for new features
- Designing regression tests for critical paths
- Building automated user flow validation
- Documenting expected user behavior

## E2E Test Specification Template

```markdown
# E2E Test: [Test Name]

## User Story

As a [user type]
I want to [action]
So that [benefit]

## Test Steps

1. Navigate to [URL]
2. Take screenshot of initial state
3. **Verify** [element/condition] is present
4. [Action] - Click/Enter/Select
5. Take screenshot of [state]
6. **Verify** [expected result]
7. [Continue steps...]

## Success Criteria

- [ ] [Criterion 1]
- [ ] [Criterion 2]
- [ ] [Criterion 3]
```

## Design Workflow

### Step 1: Define User Story

Start with the user's perspective:

```markdown
## User Story

As a registered user
I want to reset my password
So that I can regain access to my account
```

### Step 2: Map the User Journey

Identify each step the user takes:

1. User navigates to login page
2. User clicks "Forgot Password"
3. User enters email
4. User submits form
5. User receives confirmation message
6. User checks email (out of scope for E2E)

### Step 3: Add Verification Points

Mark critical checkpoints with **Verify**:

```markdown
## Test Steps

1. Navigate to /login
2. Take screenshot of login page
3. **Verify** "Forgot Password" link is visible
4. Click "Forgot Password" link
5. **Verify** password reset form appears
6. Enter email: "test@example.com"
7. Take screenshot of filled form
8. Click "Send Reset Link" button
9. **Verify** success message appears
10. Take screenshot of confirmation
```

### Step 4: Define Success Criteria

Clear pass/fail conditions:

```markdown
## Success Criteria

- [ ] Forgot password link is accessible
- [ ] Form accepts valid email
- [ ] Success message displayed after submission
- [ ] No error states encountered
- [ ] 3 screenshots captured
```

### Step 5: Add Structured Output

Defin