> Execute end-to-end UI tests by running through all defined user flows with Playwright
Run end-to-end UI tests using Playwright to validate user flows defined in your project's journey and flow artifacts. Use this after implementing features to verify they work correctly from start to finish.
/plugin marketplace add KreativReason/merged-end-to-end-ai-dpp---e2e-cli/plugin install kreativreason-e2e-pipeline@kreativreason-marketplaceworkflows/Execute end-to-end UI tests by running through all defined user flows with Playwright
/kreativreason:e2e/kreativreason:e2e <url> [options]
Examples:
/kreativreason:e2e http://localhost:3000
/kreativreason:e2e http://localhost:3000 --flow=FLOW-001
/kreativreason:e2e http://localhost:3000 --journey=JRN-001
/kreativreason:e2e https://staging.myapp.com --all
| Parameter | Required | Description |
|---|---|---|
url | Yes | Base URL of the application to test |
--flow | No | Test specific flow by ID (e.g., FLOW-001) |
--journey | No | Test specific journey by ID (e.g., JRN-001) |
--all | No | Run all flows (default if no filter specified) |
--headless | No | Run in headless mode (default: false for visibility) |
--screenshots | No | Screenshot mode: all, failures, none (default: all) |
The E2E command reads your project's journey and flow artifacts, then systematically executes each user flow using Playwright. It validates:
The E2E command relies on genesis artifacts that were transferred to the child project during scaffolding. These artifacts provide the "a priori memory" - the project knows its flows and journeys from birth.
1. Load genesis artifacts from docs/:
- docs/flow.json → User/system flows (FLOW-001, FLOW-002, etc.)
- docs/journey.json → User journeys with touchpoints (JRN-001, etc.)
- docs/prd.json → Feature context (FR-XXX references)
- docs/erd.json → Entity context (for data validation)
2. Parse all defined flows and journeys
3. Build test execution plan based on:
- Journey touchpoints → Test steps
- Flow actions → Playwright commands
- Expected outcomes → Assertions
4. Display summary and confirm with user
Note: If artifacts are missing, the scaffolder may not have transferred them. Run /kreativreason:genesis with the latest plugin version to ensure artifacts are copied to the child project.
1. Launch Playwright browser (visible by default)
2. Navigate to base URL
3. Verify application is accessible
4. Take baseline screenshot
5. Check for console errors on initial load
For each flow in the test plan:
┌─────────────────────────────────────────────────────────┐
│ FLOW: User Registration (FLOW-001) │
├─────────────────────────────────────────────────────────┤
│ Step 1: Navigate to /register │
│ → browser_navigate │
│ → browser_snapshot (verify page elements) │
│ → browser_take_screenshot │
│ → browser_console_messages (check errors) │
│ │
│ Step 2: Fill registration form │
│ → browser_snapshot (find form fields) │
│ → browser_fill_form (email, password, etc.) │
│ → browser_take_screenshot │
│ │
│ Step 3: Submit form │
│ → browser_click (submit button) │
│ → browser_network_requests (verify API call) │
│ → Wait for response │
│ → browser_take_screenshot │
│ │
│ Step 4: Verify success state │
│ → browser_snapshot (check success message/redirect) │
│ → browser_console_messages (no errors) │
│ → browser_take_screenshot │
└─────────────────────────────────────────────────────────┘
| Check | Tool | Pass Criteria |
|---|---|---|
| Page loads | browser_navigate | No timeout, status 200 |
| Elements exist | browser_snapshot | Required elements in accessibility tree |
| Forms work | browser_fill_form | Fields accept input |
| Buttons click | browser_click | Element responds |
| API calls succeed | browser_network_requests | 2xx response, correct payload |
| No JS errors | browser_console_messages | No error-level messages |
| Correct navigation | browser_snapshot | Expected URL/content after action |
e2e-report/
├── summary.json # Overall pass/fail + stats
├── flows/
│ ├── FLOW-001/
│ │ ├── result.json # Pass/fail + details
│ │ ├── step-1.png # Screenshots
│ │ ├── step-2.png
│ │ ├── network.json # API calls captured
│ │ └── console.log # Browser console
│ └── FLOW-002/
│ └── ...
└── failures/ # Failed tests only (quick review)
└── FLOW-003-step-2.png
{
"artifact_type": "e2e_test_report",
"status": "pass|partial|fail",
"data": {
"base_url": "http://localhost:3000",
"tested_at": "ISO-8601",
"duration": "3m 45s",
"summary": {
"total_flows": 8,
"passed": 7,
"failed": 1,
"skipped": 0,
"pass_rate": "87.5%"
},
"environment": {
"browser": "Chromium",
"viewport": "1280x720",
"headless": false
},
"flows": [
{
"id": "FLOW-001",
"name": "User Registration",
"status": "pass",
"duration": "12s",
"steps_total": 5,
"steps_passed": 5,
"screenshots": ["step-1.png", "step-2.png", "step-3.png"]
},
{
"id": "FLOW-002",
"name": "User Login",
"status": "fail",
"duration": "8s",
"steps_total": 4,
"steps_passed": 2,
"failed_at": {
"step": 3,
"action": "Click login button",
"expected": "Redirect to /dashboard",
"actual": "Stayed on /login with error",
"error": "API returned 401 Unauthorized",
"screenshot": "FLOW-002-step-3-failure.png"
}
}
],
"api_calls": [
{
"flow": "FLOW-001",
"step": 3,
"method": "POST",
"url": "/api/auth/register",
"status": 201,
"duration": "234ms"
},
{
"flow": "FLOW-002",
"step": 3,
"method": "POST",
"url": "/api/auth/login",
"status": 401,
"duration": "89ms",
"error": "Invalid credentials"
}
],
"console_errors": [
{
"flow": "FLOW-002",
"step": 3,
"level": "error",
"message": "Unhandled promise rejection: AuthError"
}
]
}
}
{
"flow_id": "FLOW-001",
"name": "User Registration",
"journey_id": "JRN-001",
"status": "pass",
"steps": [
{
"step": 1,
"action": "Navigate to /register",
"status": "pass",
"checks": {
"page_loaded": true,
"elements_found": ["email-input", "password-input", "submit-btn"],
"console_errors": 0,
"screenshot": "step-1.png"
}
},
{
"step": 2,
"action": "Fill registration form",
"status": "pass",
"inputs": {
"email": "test@example.com",
"password": "***"
},
"checks": {
"fields_filled": true,
"validation_errors": 0,
"screenshot": "step-2.png"
}
},
{
"step": 3,
"action": "Submit form",
"status": "pass",
"checks": {
"button_clicked": true,
"api_called": true,
"api_response": 201,
"screenshot": "step-3.png"
}
},
{
"step": 4,
"action": "Verify redirect to /dashboard",
"status": "pass",
"checks": {
"url_changed": true,
"expected_url": "/dashboard",
"actual_url": "/dashboard",
"success_message_visible": true,
"screenshot": "step-4.png"
}
}
]
}
The command automatically maps flow definitions to Playwright actions:
| Flow Step Type | Playwright Action |
|---|---|
navigate | browser_navigate |
click | browser_click (finds element via snapshot) |
fill_form | browser_fill_form |
type | browser_type |
wait | browser_wait |
verify_url | Check URL after action |
verify_element | browser_snapshot + check |
verify_text | browser_snapshot + text match |
verify_api | browser_network_requests |
For form inputs and test data:
{
"test_data": {
"user_registration": {
"email": "e2e-test-{{timestamp}}@example.com",
"password": "TestPassword123!",
"name": "E2E Test User"
},
"user_login": {
"email": "existing-user@example.com",
"password": "ExistingPassword123!"
}
}
}
Placeholders:
{{timestamp}} - Unix timestamp (unique emails){{uuid}} - Random UUID{{random}} - Random stringFor flows requiring auth:
1. Check if flow requires authenticated user
2. If yes, run login flow first (or use saved session)
3. Continue with authenticated flow
4. Option to save session for reuse
/kreativreason:e2e http://localhost:3000
> Loading test artifacts...
> Found: docs/flow.json (8 flows)
> Found: docs/journey.json (3 journeys)
>
> Test Plan:
> FLOW-001: User Registration (5 steps)
> FLOW-002: User Login (4 steps)
> FLOW-003: Create Campaign (7 steps)
> FLOW-004: Connect Facebook Account (6 steps)
> ... (4 more)
>
> Total: 8 flows, 42 steps
> Estimated time: ~4 minutes
>
> Start E2E tests? [Y/n]
> Launching browser...
> Testing FLOW-001: User Registration
> Step 1/5: Navigate to /register ✓
> Step 2/5: Fill email field ✓
> Step 3/5: Fill password field ✓
> Step 4/5: Click submit button ✓
> Step 5/5: Verify dashboard redirect ✓
> FLOW-001: PASS (12s)
>
> Testing FLOW-002: User Login
> Step 1/4: Navigate to /login ✓
> Step 2/4: Fill credentials ✓
> Step 3/4: Click login button ✗
> ERROR: API returned 401
> Screenshot: e2e-report/failures/FLOW-002-step-3.png
> FLOW-002: FAIL (8s)
>
> ... (continues)
>
> ═══════════════════════════════════════════
> E2E TEST RESULTS
> ═══════════════════════════════════════════
> Total: 8 flows
> Passed: 7 (87.5%)
> Failed: 1
>
> Failed Flows:
> FLOW-002: User Login
> - Step 3: Login API returned 401
> - Screenshot: e2e-report/failures/FLOW-002-step-3.png
>
> Full report: e2e-report/summary.json
> ═══════════════════════════════════════════
>
> Next steps:
> 1. /kreativreason:debug http://localhost:3000/login "Login returns 401"
> 2. Review screenshots in e2e-report/
> 3. Fix and re-run: /kreativreason:e2e http://localhost:3000 --flow=FLOW-002
/kreativreason:work: Verify implementation works end-to-end--headless flag for automation/kreativreason:debug for failed flows| Tool | Purpose |
|---|---|
browser_navigate | Go to URLs |
browser_snapshot | Get accessibility tree (find elements) |
browser_click | Click buttons, links |
browser_type | Type into fields |
browser_fill_form | Fill multiple form fields |
browser_take_screenshot | Capture visual evidence |
browser_console_messages | Check for JS errors |
browser_network_requests | Monitor API calls |
browser_wait | Wait for conditions |
If a step fails:
docs/ (transferred during scaffolding):
docs/flow.json - Required for flow-based testingdocs/journey.json - Required for journey-based testingdocs/prd.json - Feature context (optional but recommended)docs/erd.json - Entity context (optional but recommended)If artifacts are missing: The child project was scaffolded before artifact transfer was implemented. Either:
/kreativreason:genesis with plugin v2.3.0+projects/{project}/docs/ to child's docs/