create-harness-vibe-coding 0.8.6 → 0.8.7

package/templates/optional/skills/browser-e2e/.claude/skills/wf-browser/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wf-browser
-description: AI-driven browser automation for E2E testing, web scraping, form filling, and UI verification. Powered by Browser Use (89.1% WebVoyager benchmark). Use for /wf-browser, browser testing, web automation, page interaction, form filling, screenshot verification, or any task requiring real browser control. Dual mode: CLI (fast iteration, no LLM needed) + Python Agent API (complex multi-step workflows with AI reasoning).
+description: AI-driven browser automation for E2E testing, web scraping, form filling, and UI verification. Powered by Browser Use (89.1% WebVoyager benchmark). Use for Claude /wf-browser, Codex $wf-browser, browser testing, web automation, page interaction, form filling, screenshot verification, or any task requiring real browser control. Dual mode: CLI (fast iteration, no LLM needed) + Python Agent API (complex multi-step workflows with AI reasoning).
 ---
 
 # WF Browser — AI Browser Automation

package/templates/optional/skills/browser-e2e/Harness/workflows/browser-e2e.md

@@ -11,25 +11,13 @@ This workflow is active when:
 
 ## Contract
 
-Browser evidence in this project follows the contract:
-
-1. **Every browser claim needs real-browser evidence** — screenshot, state snapshot, or console output
-2. **CLI mode is preferred for deterministic steps** — use `browser-use open/state/click/screenshot` for predictable flows
-3. **Agent mode is for dynamic exploration** — use Browser Use Agent API when the page structure is unknown or changing
-4. **Evidence goes to the task directory** — `Harness/tasks/<task-id>/evidence/*.png`
-5. **Stable UI selector contract** — Stable accessible labels/roles and stable test selectors such as `data-testid` are required for critical UI controls and states: inputs, buttons, filters, rows, empty/error/loading states.
-
-## Chrome DevTools / CDP / MCP Checklist
-
-- [ ] record the URL and port
-- [ ] Verify available CDP, MCP, browser automation, or manual tooling
-- [ ] Check not just HTTP 200
-- [ ] Verify no runtime exceptions, console errors, and failed network requests
-- [ ] Confirm stable accessible labels/roles or `data-testid` on interactive elements
-- [ ] Test critical flow end-to-end
-- [ ] Capture screenshot, trace, video, or result artifact paths
-- [ ] Clean up any dev server or browser processes
-
+Browser evidence in this project follows the contract:
+
+1. **Every browser claim needs real-browser evidence** - screenshot, state snapshot, or console output
+2. **CLI mode is preferred for deterministic steps** - use `browser-use open/state/click/screenshot` for predictable flows
+3. **Agent mode is for dynamic exploration** - use Browser Use Agent API when the page structure is unknown or changing
+4. **Evidence goes to the task directory** - `Harness/tasks/<task-id>/evidence/*.png`
+
 ### Harness Bridge
 
 For frontend-backend flows, use `Harness/HARNESS_BRIDGE.md` to validate UI
@@ -37,6 +25,54 @@ selectors, API payloads, seeded data, runtime state probes, and CDP/network
 traces. Browser validation must produce an AC-by-AC result matrix when the task
 has acceptance criteria.
 
+### Stable UI Selector Contract
+
+All browser automation and E2E tests in this project use a stable selector contract. Selectors must be written against **public, stable attributes** that survive refactors, not against ephemeral class names or DOM indices.
+
+**Required selector priority (most stable first):**
+
+1. **`data-testid`** - the primary stable anchor for automated tests
+2. **accessible labels/roles** - `getByRole`, `getByLabelText`, `getByPlaceholderText` (ARIA roles, `<label>` associations, placeholder text)
+3. **Text content** - `getByText` for visible user-facing strings
+
+**Required coverage targets.** Every interactive page tested by browser automation must cover: inputs, buttons, filters, rows, empty/error/loading states.
+
+| Category | Examples |
+|---|---|
+| **Inputs** | text fields, textareas, selects, checkboxes, radios, file uploads |
+| **Buttons** | submit buttons, icon-only buttons, toggle buttons, CTA buttons |
+| **Filters** | search inputs, dropdown filters, date range pickers, filter chips/tags |
+| **Rows** | table rows, list items, card containers - the repeating data unit |
+| **Empty state** | "no results" message, empty illustration, zero-state CTA |
+| **Error state** | inline validation errors, toast notifications, server error banners |
+| **Loading state** | spinners, skeletons, progress bars, "Loading..." text |
+
+**Selector format examples:**
+
+```
+data-testid="search-input"
+data-testid="submit-btn"
+data-testid="filter-status"
+data-testid="result-row"
+data-testid="empty-state"
+data-testid="error-banner"
+data-testid="loading-spinner"
+```
+
+**Rationale:** `data-testid` attributes are decoupled from styling and layout - they survive CSS refactors, component renames, and DOM restructuring. Accessible labels and roles are the fallback when `data-testid` is not available, and they double as a11y coverage. Class-name and XPath selectors are not accepted in test automation because they break on cosmetic changes.
+
+## Chrome DevTools / CDP / MCP Checklist
+
+- [ ] record the URL and port
+- [ ] Verify available CDP, MCP, browser automation, or manual tooling
+- [ ] Check not just HTTP 200
+- [ ] Verify no runtime exceptions, console errors, and failed network requests
+- [ ] Confirm stable accessible labels/roles or `data-testid` on interactive elements
+- [ ] Test critical flow end-to-end
+- [ ] Capture screenshot, trace, video, or result artifact paths
+- [ ] Produce an AC-by-AC validation matrix
+- [ ] Clean up any dev server or browser processes
+
 ## Quick Install
 
 ```bash
@@ -69,7 +105,7 @@ If `browser-use` is not installed, fall back to:
 - **Harness Bridge**: use `Harness/HARNESS_BRIDGE.md` for UI contract, API contract, seeded test data, runtime state probes, and network trace collection.
 - **wf-browser**: Claude Code uses `.claude/skills/wf-browser/SKILL.md`; Codex uses `.agents/skills/wf-browser/SKILL.md`. Both load this workflow.
 - **MEMORY.md**: registered as optional workflow skill
-- **README.md**: routing table row "Browser E2E testing or automation" → browser-e2e
+- **README.md**: routing table row "Browser E2E testing or automation" -> browser-e2e
 
 ## File Locations
 
@@ -77,7 +113,7 @@ If `browser-use` is not installed, fall back to:
 |------|---------|
 | `.claude/skills/wf-browser/SKILL.md` | Claude Code skill adapter |
 | `.agents/skills/wf-browser/SKILL.md` | Codex repo skill adapter |
-| `Harness/workflows/browser-e2e.md` | This file — workflow contract and install guide |
+| `Harness/workflows/browser-e2e.md` | This file - workflow contract and install guide |
 | `~/.claude/skills/browser-use/SKILL.md` | Official Browser Use skill (user-level, auto-downloaded) |
 | `pip show browser-use \| findstr Location` | Python package install location (run to find) |
 | `~/.browser-use/` | Daemon state and browser profiles |