/f5-test-e2e

name: f5-test-e2e
description: End-to-end testing with Playwright
argument-hint: <journey|critical|page|smoke|visual> [target]
mcp-servers: playwright
allowed-tools: Read, Write, Glob, Grep, Bash
user-invocable: true

/f5-test-e2e - End-to-End & Visual Testing

> **Version**: 1.4.0 > **Category**: Testing > **MCP Required**: Playwright

E2E testing và visual regression testing sử dụng MCP Playwright cho browser automation.

ARGUMENTS

The user's request is: $ARGUMENTS

---

MCP PRE-FLIGHT CHECK

| MCP Server | Required | Purpose | |------------|----------|---------| | Playwright | ✅ Yes | Browser automation, screenshots |

**If MCP unavailable:**

• ⚠️ Playwright not available
• Fallback: Manual testing instructions provided
• Run `/f5-mcp status` to check

---

SUBCOMMANDS

| Subcommand | Description | Example | |------------|-------------|---------| | `journey <name>` | Full user journey test | `/f5-test-e2e journey user-registration` | | `critical <path>` | Critical business path | `/f5-test-e2e critical checkout` | | `page <name>` | Single page test | `/f5-test-e2e page login` | | `smoke` | Quick sanity check | `/f5-test-e2e smoke` | | `regression` | Full regression suite | `/f5-test-e2e regression` | | `visual [options]` | Visual regression testing | `/f5-test-e2e visual --compare-figma` | | `generate-from-design` | Design → E2E | `/f5-test-e2e generate-from-design login` |

---

FLAGS

| Flag | Description | Default | |------|-------------|---------| | `--screenshot` | Capture screenshots at each step | false | | `--video` | Record video of test | false | | `--headless` | Run in headless mode | true | | `--browser <type>` | chromium, firefox, webkit | chromium | | `--fix` | Auto-fix UI issues found | false | | `--report` | Generate E2E report | false |

---

JOURNEY TESTING

/f5-test-e2e journey user-registration

Journey Definition Format

name: user-registration
description: "Complete user registration flow"
steps:
  1. Navigate to homepage
  2. Click "Sign Up" button
  3. Fill registration form
  4. Submit form
  5. Verify confirmation page

Execution Output

## 🎬 E2E Journey Test: user-registration

### Step 1: Navigate to Homepage
**Action:** `browser_navigate`
**URL:** http://localhost:3000
**Assertions:** Title visible ✅, Logo visible ✅
**Result:** ✅ PASS

### Step 2: Click Sign Up
**Action:** `browser_click`
**Selector:** `button[data-testid="signup-btn"]`
**Result:** ✅ PASS

### Step 3: Fill Registration Form
**Actions:**
- Fill email: `test@example.com` ✅
- Fill password: `SecureP@ss123` ✅
- Check terms: ✅
**Result:** ✅ PASS

### Journey Summary
| Step | Duration | Result |
|------|----------|--------|
| Navigate | 1.2s | ✅ |
| Click Sign Up | 0.8s | ✅ |
| Fill Form | 2.1s | ✅ |
| Submit | 1.5s | ✅ |

**Result:** ✅ JOURNEY PASSED

---

CRITICAL PATH TESTING

/f5-test-e2e critical checkout

Business-critical flows với higher scrutiny:

## 🔥 Critical Path Test: checkout

**Business Impact:** HIGH
**Must Pass:** 100%

| Step | Status | Duration |
|------|--------|----------|
| Add to cart | ✅ | 0.8s |
| View cart | ✅ | 0.5s |
| Enter shipping | ✅ | 1.2s |
| Payment | ✅ | 2.1s |
| Confirm | ✅ | 1.0s |

**Result:** ✅ CRITICAL PATH PASSED

---

PAGE TESTING

/f5-test-e2e page login

Single page với element và functionality checks:

## 📄 Page Test: login

### Elements Check
| Element | Selector | Status |
|---------|----------|--------|
| Email input | `#email` | ✅ Found |
| Password input | `#password` | ✅ Found |
| Submit button | `button[type="submit"]` | ✅ Found |

### Functionality Tests
| Test | Expected | Actual | Result |
|------|----------|--------|--------|
| Valid login | Redirect to /dashboard | ✅ | ✅ |
| Invalid login | Error message | ✅ | ✅ |
| Empty submit | Validation errors | ✅ | ✅ |

### Accessibility Check
| Check | Status |
|-------|--------|
| Form labels | ✅ |
| Tab order | ✅ |
| Color contrast | ✅ |

**Result:** ✅ PAGE PASSED

---

SMOKE TESTING

/f5-test-e2e smoke

Quick sanity check for critical pages:

## 💨 Smoke Test

| Page | URL | Status | Load Time |
|------|-----|--------|-----------|
| Home | / | ✅ | 1.2s |
| Login | /login | ✅ | 0.8s |
| Register | /register | ✅ | 0.9s |
| Dashboard | /dashboard | ✅ | 1.5s |

**Result:** ✅ ALL SYSTEMS GO

---

VISUAL TESTING

/f5-test-e2e visual [options]

Visual Testing Options

| Option | Description | |--------|-------------| | `--compare-figma` | Compare with Figma reference images | | `--update-baseline` | Update baseline screenshots | | `--apply-fixes` | Apply suggested CSS fixes | | `--suggest-fixes` | Show suggested fixes (preview) | | `--threshold <n>` | Max diff percentage (default: 5) | | `--pages <list>` | Comma-separated pages | | `--viewports <list>` | desktop, tablet, mobile | | `--ci` | CI mode - fail if threshold exceeded |

Configuration

File: `.f5/visual/config.yaml`

visual_testing:
  enabled: true
  threshold: 5  # % difference allowed
  mcp_tool: playwright

  viewports:
    desktop: { width: 1920, height: 1080 }
    tablet: { width: 768, height: 1024 }
    mobile: { width: 375, height: 812 }

  ignore_areas:
    - selector: ".dynamic-content"
    - selector: ".timestamp"

Figma Mapping

File: `.f5/input/figma/mapping.yaml`

pages:
  - url: "/"
    figma: "homepage.jpg"
    viewport: { width: 1920, height: 3000 }

  - url: "/login"
    figma: "login.jpg"
    viewport: { width: 1920, height: 1080 }

Visual Test Output

## 👁️ Visual Regression Report

**Date:** [timestamp]
**Pages Tested:** 4
**Threshold:** 5%

### Summary
| Page | Diff % | Threshold | Status |
|------|--------|-----------|--------|
| /services/transport | 12.5% | 5% | ❌ FAIL |
| /services/urban | 3.2% | 5% | ✅ PASS |
| /login | 1.1% | 5% | ✅ PASS |

**Pass Rate:** 2/3 (67%)

### Failed: /servi