bee-dev-frontend-e2e-vuejs

name: bee:dev-frontend-e2e-vuejs title: Vue.js frontend development cycle E2E testing (Gate 5) category: development-cycle-frontend-vuejs tier: 1 when_to_use: | Use after visual testing (Gate 4) is complete in the Vue.js frontend dev cycle. MANDATORY for all Vue.js frontend development tasks - validates complete user flows. description: | Gate 5 of the Vue.js frontend development cycle - ensures all user flows from product-designer have passing E2E tests with Playwright across browsers.

trigger: |

• After visual testing complete (Gate 4)
• MANDATORY for all Vue.js frontend development tasks
• Validates user flows end-to-end

NOT_skip_when: |

• "Unit tests cover the flow" - Unit tests don't test real browser + API interaction.
• "We only need Chromium" - Users use Firefox and Safari too.
• "Happy path is enough" - Error handling MUST be tested.

sequence: after: [bee:dev-frontend-visual-vuejs] before: [bee:dev-frontend-performance-vuejs]

related: complementary: [bee:dev-cycle-frontend-vuejs, bee:dev-frontend-visual-vuejs, bee:qa-analyst-frontend-vuejs]

input_schema: required: - name: unit_id type: string description: "Task or subtask identifier" - name: implementation_files type: array items: string description: "Files from Gate 0 implementation" optional: - name: user_flows_path type: string description: "Path to user-flows.md from product-designer" - name: backend_handoff type: object description: "Backend endpoints and contracts from backend dev cycle" - name: gate4_handoff type: object description: "Full handoff from Gate 4 (visual testing)"

output_schema: format: markdown required_sections: - name: "E2E Testing Summary" pattern: "^## E2E Testing Summary" required: true - name: "Flow Coverage" pattern: "^## Flow Coverage" required: true - name: "Handoff to Next Gate" pattern: "^## Handoff to Next Gate" required: true metrics: - name: result type: enum values: [PASS, FAIL] - name: flows_tested type: integer - name: happy_path_tests type: integer - name: error_path_tests type: integer - name: browsers_passed type: integer - name: iterations type: integer

verification: automated: - command: "grep -rn 'test(' --include='.spec.ts' --include='.e2e.ts' ." description: "Playwright tests exist" success_pattern: "test(" - command: "grep -rn 'getByRole\|getByTestId\|getByLabel' --include='*.spec.ts' ." description: "Semantic selectors used" success_pattern: "getByRole\|getByTestId\|getByLabel" manual: - "All user flows from product-designer have E2E tests" - "Error paths tested (API 500, timeout, validation)" - "Tests pass on Chromium, Firefox, and WebKit" - "Responsive viewports covered" - "3 consecutive passes without flaky failures"

examples:

• name: "E2E tests for transaction flow" input: unit_id: "task-001" implementation_files: ["src/pages/transactions/index.vue"] user_flows_path: "docs/pre-dev/transactions/user-flows.md" expected_output: |

  E2E Testing Summary

  Status: PASS Flows Tested: 3/3 Happy Path Tests: 3 Error Path Tests: 6 Browsers Passed: 3/3

  Flow Coverage

  User Flow	Happy Path	Error Paths	Browsers	Status
  Create Transaction	PASS	API 500, Validation	3/3	PASS

  Handoff to Next Gate

  • Ready for Gate 6 (Performance Testing): YES

Dev Frontend E2E Testing - Vue.js (Gate 5)

Overview

Ensure all user flows from bee:product-designer have passing Playwright E2E tests across Chromium, Firefox, and WebKit with responsive viewport coverage.

Core principle: If the product-designer defined a user flow, it must have an E2E test. If the user can encounter an error, it must be tested.

CRITICAL: Role Clarification

This skill ORCHESTRATES. Vue.js Frontend QA Analyst Agent (e2e mode) EXECUTES.

Standards Reference

MANDATORY: Load testing-e2e.md standards via WebFetch.

Step 1: Validate Input

REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]

OPTIONAL INPUT:
- user_flows_path: [path to user-flows.md]
- backend_handoff: [endpoints, contracts from backend cycle]
- gate4_handoff: [full Gate 4 output]

if any REQUIRED input is missing:
  → STOP and report: "Missing required input: [field]"

if user_flows_path provided:
  → Load user flows as E2E test scenarios
  → All flows MUST be covered

if backend_handoff provided:
  → Verify E2E tests exercise backend endpoints
  → Verify request payloads match contracts

Step 2: Dispatch Vue.js Frontend QA Analyst Agent (E2E Mode)

⛔ Agent Name Resolution: MUST resolve bee: names to runtime-qualified names before dispatch. See shared-patterns/shared-orchestrator-principle.md → "Agent Runtime Resolution".

Task tool:
  subagent_type: "bee:qa-analyst-frontend-vuejs"
  model: "opus"
  prompt: |
    **MODE:** E2E TESTING (Gate 5)

    **Standards:** Load testing-e2e.md (frontend-vuejs)

    **Input:**
    - Unit ID: {unit_id}
    - Implementation Files: {implementation_files}
    - User Flows: {user_flows_path or "N/A"}
    - Backend Handoff: {backend_handoff or "N/A"}
    - Framework: Vue 3 / Nuxt 3

    **Requirements:**
    1. Create Playwright tests for all user flows
    2. Test happy path + error paths (API 500, timeout, validation)
    3. Run on Chromium, Firefox, WebKit
    4. Test responsive viewports (mobile, tablet, desktop)
    5. Use data-testid or semantic role selectors only
    6. Run 3x consecutively to verify no flaky tests

    **Vue/Nuxt-Specific Checks:**
    - Nuxt page transitions do not break test selectors between navigations
    - Pinia store state resets correctly between test scenarios (use store.$reset() in beforeEach)
    - Vue Router navigation guards are tested (auth redirects, role-based access)
    - Async component loading (defineAsyncComponent) resolves before assertions
    - Server-Side Rendering (SSR) hydration does not cause test timing issues
    - useFetch / useAsyncData composables resolve before interaction assertions
    - NuxtLink navigation uses Playwright's waitForNavigation correctly

    **Output Sections Required:**
    - ## E2E Testing Summary
    - ## Flow Coverage
    - ## Handoff to Next Gate

Step 3: Evaluate Results

Parse agent output:

if "Status: PASS" in output:
  → Gate 5 PASSED
  → Return success with metrics

if "Status: FAIL" in output:
  → If flow not covered: re-dispatch agent to add missing tests
  → If browser failure: re-dispatch implementation agent to fix
  → If flaky: re-dispatch agent to stabilize tests
  → Re-run E2E tests (max 3 iterations)
  → If still failing: ESCALATE to user

Step 4: Generate Output

## E2E Testing Summary
**Status:** {PASS|FAIL}
**Flows Tested:** {X/Y}
**Happy Path Tests:** {count}
**Error Path Tests:** {count}
**Browsers Passed:** {X/3}
**Consecutive Passes:** {X/3}

## Flow Coverage
| User Flow | Happy Path | Error Paths | Browsers | Viewports | Status |
|-----------|------------|-------------|----------|-----------|--------|
| {flow} | {PASS|FAIL} | {descriptions} | {X/3} | {X/3} | {PASS|FAIL} |

## Backend Handoff Verification
| Endpoint | Method | Contract Verified | Status |
|----------|--------|-------------------|--------|
| {endpoint} | {method} | {fields} | {PASS|FAIL} |

## Handoff to Next Gate
- Ready for Gate 6 (Performance Testing): {YES|NO}
- Iterations: {count}

Anti-Rationalization Table

See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific: