القائمة
Gate 5 of the Vue.js frontend development cycle - ensures all user flows from product-designer have passing E2E tests with Playwright across browsers.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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\n**Status:** PASS\n**Flows Tested:** 3/3\n**Happy Path Tests:** 3\n**Error Path Tests:** 6\n**Browsers Passed:** 3/3\n\n## Flow Coverage\n| User Flow | Happy Path | Error Paths | Browsers | Status |\n|-----------|------------|-------------|----------|--------|\n| Create Transaction | PASS | API 500, Validation | 3/3 | PASS |\n\n## Handoff to Next Gate\n- Ready for Gate 6 (Performance Testing): YES\n"}] |
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.
<block_condition>
This skill ORCHESTRATES. Vue.js Frontend QA Analyst Agent (e2e mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Vue.js Agent | Write Playwright tests, run cross-browser, verify flows |
MANDATORY: Load testing-e2e.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-vuejs/testing-e2e.md </fetch_required>
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
⛔ 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
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
## 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}
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Unit tests cover the flow" | Unit tests don't test real browser interaction. | Write E2E tests |
| "Only Chromium matters" | Firefox and Safari have different behavior. | Test all 3 browsers |
| "Happy path is enough" | Users encounter errors. Test error handling. | Add error path tests |
| "CSS selectors are fine" | CSS changes with refactors. Use semantic selectors. | Use roles and testids |
| "Product-designer flows are suggestions" | Flows define acceptance criteria. Cover all. | Test all flows |
| "Test is flaky, skip it" | Flaky tests indicate real instability. | Fix the test |
| "Pinia store doesn't need reset between tests" | Shared state causes test pollution and order dependency. | Reset store in beforeEach |
| "SSR makes E2E too complex" | SSR is the production behavior. Test it accurately. | Write tests for SSR routes |
Gate 4 of development cycle - dispatches 6 specialized reviewers (code, business-logic, security, test, nil-safety, consequences) in parallel for comprehensive code review feedback.
Gate 7 of development cycle - ensures chaos tests exist using Toxiproxy to verify graceful degradation under connection loss, latency, and partitions.
Main orchestrator for the 8-gate development cycle system. Loads tasks/subtasks from PM team output and executes through implementation → unit testing → fuzz testing → property testing → integration testing (write) → chaos testing (write) → review → validation gates (Gates 0-7), with state persistence and metrics collection. Gates 4-5 (integration/chaos) write and update test code per unit but only execute tests at end of cycle (deferred execution).
Development cycle feedback system - calculates assertiveness scores, analyzes prompt quality for all agents executed, aggregates cycle metrics, performs root cause analysis on failures, and generates improvement reports to docs/feedbacks/cycle-{date}/.
Gate 1 of the React Native frontend development cycle - ensures all components pass accessibility checks with zero violations: correct accessibilityLabel, accessibilityRole, accessibilityHint, VoiceOver (iOS) and TalkBack (Android) compatibility, and minimum touch target sizes.
Gate 1 of frontend development cycle - ensures all components pass axe-core automated accessibility scans with zero WCAG 2.1 AA violations.