fe-testinglisted

# Frontend Testing Patterns ## Execution Workflow For each FE scenario from the test plan: 1. **Read the scenario** — understand steps, expected result, edge cases 2. **Execute main flow** — follow steps using Playwright MCP tools 3. **Verify result** — take snapshot, check for expected elements/text 4. **Execute edge cases** — run each edge case as a sub-test 5. **Record result** — pass/fail with details --- ## Playwright MCP Tool Patterns ### Navigation ``` browser_navigate(url: "http://localhost:3000/page") ``` - Always use full URLs with the base URL from the test plan - After navigation, take a snapshot to verify the page loaded: ``` browser_snapshot() ``` ### Interaction **Clicking elements:** ``` browser_click(element: "Submit button") browser_click(element: "Link with text 'Sign In'") browser_click(element: "Navigation menu item 'Settings'") ``` **Filling forms:** ``` browser_fill_form(formData: [ { ref: "email input", value: "test@example.com" }, { ref: "password input", value: "TestPass123!" } ]) ``` If `browser_fill_form` doesn't work for a field, fall back to: ``` browser_click(element: "email input field") browser_type(text: "test@example.com") ``` **Selecting options:** ``` browser_select_option(element: "Country dropdown", value: "PL") ``` **Keyboard actions:** ``` browser_press_key(key: "Enter") browser_press_key(key: "Escape") browser_press_key(key: "Tab") ``` ### Verification **Primary method — snapshot and inspect:** ``` browser_snapsho