@nockdev/awf 6.2.0 → 6.2.1

package/.agent/skills/tooling/browser-agent/data/element-discovery.yaml

@@ -0,0 +1,208 @@
+# =============================================================================
+# element-discovery.yaml — Element Categorization from Accessibility Tree
+# =============================================================================
+
+version: "1.0.0"
+
+# How to discover and categorize interactive elements from browser_snapshot
+
+discovery_source: "browser_snapshot (accessibility tree)"
+
+element_types:
+  # =========================================================================
+  # SIMPLE INTERACTIVE ELEMENTS
+  # =========================================================================
+  interactive:
+    - type: button
+      detection:
+        roles: ["button"]
+        attributes: ["type=button", "type=submit", "type=reset"]
+        patterns: ["<button>", 'role="button"']
+      test_actions:
+        - "Click → verify action"
+        - "Check disabled state"
+        - "Verify loading state"
+        - "Tab focus + Enter activation"
+      mcp_tools: ["browser_click", "browser_press_key", "browser_snapshot"]
+      checklist_ref: "BT-F01 through BT-A04"
+
+    - type: link
+      detection:
+        roles: ["link"]
+        attributes: ["href"]
+        patterns: ["<a href>"]
+      test_actions:
+        - "Click → verify navigation"
+        - "Check target URL"
+        - "Verify opens in correct target (_blank, _self)"
+      mcp_tools: ["browser_click", "browser_snapshot"]
+
+    - type: text_input
+      detection:
+        roles: ["textbox", "searchbox"]
+        attributes: ["type=text", "type=email", "type=password", "type=search"]
+        patterns: ['<input type="text">', "<textarea>"]
+      test_actions:
+        - "Click to focus"
+        - "Type text → verify value"
+        - "Clear → verify empty"
+        - "Validation on blur"
+      mcp_tools: ["browser_click", "browser_type", "browser_snapshot"]
+
+    - type: checkbox
+      detection:
+        roles: ["checkbox"]
+        attributes: ["type=checkbox"]
+        patterns: ['<input type="checkbox">']
+      test_actions:
+        - "Click → toggle state"
+        - "Verify checked/unchecked"
+        - "Space key toggles"
+      mcp_tools: ["browser_click", "browser_press_key", "browser_snapshot"]
+
+    - type: radio
+      detection:
+        roles: ["radio"]
+        attributes: ["type=radio"]
+        patterns: ['<input type="radio">']
+      test_actions:
+        - "Click → select only one"
+        - "Arrow keys navigate group"
+        - "Verify mutual exclusivity"
+      mcp_tools: ["browser_click", "browser_press_key", "browser_snapshot"]
+
+    - type: switch
+      detection:
+        roles: ["switch"]
+        attributes: ["role=switch"]
+      test_actions:
+        - "Click → toggle on/off"
+        - "Space key toggles"
+        - "Verify visual state matches"
+      mcp_tools: ["browser_click", "browser_snapshot"]
+
+  # =========================================================================
+  # COMPOUND INTERACTIVE ELEMENTS (require multiple interactions)
+  # =========================================================================
+  compound:
+    - type: dropdown_native
+      detection:
+        roles: ["combobox", "listbox"]
+        patterns: ["<select>"]
+      test_actions:
+        - "Click → open options"
+        - "Select option → verify value"
+        - "Arrow keys navigate"
+        - "Escape closes"
+      mcp_tools: ["browser_click", "browser_select_option", "browser_press_key"]
+      checklist_ref: "DD-F01 through DD-VA03"
+
+    - type: dropdown_custom
+      detection:
+        roles: ["combobox"]
+        attributes: ["aria-haspopup=listbox", "aria-expanded"]
+      test_actions:
+        - "Click trigger → open list"
+        - "Click option → verify selection"
+        - "Keyboard: Enter open, arrows navigate, Escape close"
+        - "Search/filter (if available)"
+      mcp_tools:
+        [
+          "browser_click",
+          "browser_press_key",
+          "browser_type",
+          "browser_snapshot",
+        ]
+      checklist_ref: "DD-F01 through DD-VA03"
+
+    - type: modal
+      detection:
+        roles: ["dialog"]
+        attributes: ["aria-modal=true", "aria-haspopup=dialog"]
+      test_actions:
+        - "Click trigger → open modal"
+        - "Verify overlay and centered"
+        - "Focus trap: Tab stays inside"
+        - "Escape closes, focus returns"
+        - "Form inside: fill and submit"
+      mcp_tools:
+        [
+          "browser_click",
+          "browser_press_key",
+          "browser_fill_form",
+          "browser_snapshot",
+        ]
+      checklist_ref: "MD-TD01 through MD-FM04"
+
+    - type: accordion
+      detection:
+        attributes: ["aria-expanded"]
+        patterns: ["accordion", "collapsible"]
+      test_actions:
+        - "Click header → expand/collapse"
+        - "Verify content visibility"
+        - "Multiple open vs single open"
+      mcp_tools: ["browser_click", "browser_snapshot"]
+
+    - type: tabs
+      detection:
+        roles: ["tab", "tablist", "tabpanel"]
+      test_actions:
+        - "Click tab → show panel"
+        - "Arrow keys switch tabs"
+        - "Verify panel content"
+      mcp_tools: ["browser_click", "browser_press_key", "browser_snapshot"]
+
+    - type: menu
+      detection:
+        roles: ["menu", "menubar", "menuitem"]
+        attributes: ["aria-haspopup=menu"]
+      test_actions:
+        - "Click/hover → open menu"
+        - "Click item → action"
+        - "Arrow keys navigate"
+        - "Escape closes"
+      mcp_tools:
+        [
+          "browser_click",
+          "browser_hover",
+          "browser_press_key",
+          "browser_snapshot",
+        ]
+
+  # =========================================================================
+  # VISUAL INTERACTIVE ELEMENTS
+  # =========================================================================
+  visual:
+    - type: tooltip
+      detection:
+        attributes: ["aria-describedby", "data-tooltip"]
+        patterns: ["title="]
+      test_actions:
+        - "Hover → tooltip appears"
+        - "Focus → tooltip appears (keyboard)"
+        - "Content readable"
+        - "No layout shift"
+      mcp_tools: ["browser_hover", "browser_press_key", "browser_snapshot"]
+      checklist_ref: "HV-T01 through HV-TE02"
+
+    - type: carousel
+      detection:
+        attributes: ["role=region"]
+        patterns: ["carousel", "slider", "swiper"]
+      test_actions:
+        - "Next/prev buttons work"
+        - "Dots/indicators sync"
+        - "Auto-play pauses on hover"
+      mcp_tools: ["browser_click", "browser_hover", "browser_snapshot"]
+
+# Discovery Workflow
+workflow:
+  - step: "Call browser_snapshot"
+  - step: "Parse accessibility tree output"
+  - step: "For each element with an interactive role, add to test list"
+  - step: "For compound elements (aria-haspopup, aria-expanded), add enhanced tests"
+  - step: "Sort by priority: forms > modals > dropdowns > buttons > tooltips"
+  - step: "Generate Phase 3 test plan"
+
+# _DOMYH Awesome Code • Element Discovery Patterns v1.0.0_

package/.agent/skills/tooling/browser-agent/data/recording-patterns.yaml

@@ -0,0 +1,74 @@
+# =============================================================================
+# recording-patterns.yaml — WebP Video Recording Best Practices
+# =============================================================================
+
+version: "1.0.0"
+
+# browser_subagent automatically records sessions as WebP videos
+
+naming:
+  format: "lowercase_with_underscores"
+  max_words: 3
+  examples:
+    - name: "page_load_check"
+      when: "Basic page load verification"
+    - name: "comprehensive_test"
+      when: "Full interaction testing"
+    - name: "dropdown_test"
+      when: "Testing specific dropdown component"
+    - name: "modal_focus_trap"
+      when: "Testing modal focus trap behavior"
+    - name: "form_submission"
+      when: "Testing form fill and submit flow"
+    - name: "visual_comparison"
+      when: "Before/after visual comparison"
+
+  anti_patterns:
+    - bad: "test_1"
+      reason: "Not descriptive"
+      fix: "login_form_test"
+    - bad: "MyComponentTest"
+      reason: "Not lowercase"
+      fix: "component_test"
+    - bad: "testing-the-dropdown-menu-v2"
+      reason: "Too long, has hyphens"
+      fix: "dropdown_menu_test"
+
+when_to_record:
+  always:
+    - "Comprehensive verification (proof of work)"
+    - "Bug reproduction (evidence)"
+    - "Visual comparison (before/after)"
+  optional:
+    - "Quick page load check"
+    - "Single component test"
+  never:
+    - "Sensitive data on screen (credentials, PII)"
+    - "Long-running background processes"
+
+best_practices:
+  - practice: "Keep recordings focused"
+    details: "One recording per logical test flow, not one giant recording"
+    max_duration: "60 seconds per recording"
+
+  - practice: "Include meaningful interactions"
+    details: "Ensure clicks, type actions, and results are visible"
+
+  - practice: "Capture error states"
+    details: "If something fails, the recording provides evidence"
+
+  - practice: "Name describes content"
+    details: "RecordingName should tell what was tested"
+
+  - practice: "Use screenshots for static evidence"
+    details: "For pass/fail evidence, screenshots are lighter than videos"
+
+  - practice: "Always include return info in task"
+    details: "Tell browser_subagent what to return — the recording alone is not enough"
+
+storage:
+  location: "Artifacts directory (auto-managed by browser_subagent)"
+  format: "WebP"
+  retention: "Per conversation session"
+
+# _DOMYH Awesome Code • Recording Patterns v1.0.0_

package/.agent/skills/tooling/browser-agent/data/reporting-patterns.yaml

@@ -0,0 +1,97 @@
+# =============================================================================
+# reporting-patterns.yaml — Evidence-Based Reporting Templates
+# =============================================================================
+
+version: "1.0.0"
+
+templates:
+  summary_table:
+    name: "Pass/Fail Summary Table"
+    when: "Summarizing test results for all elements"
+    format: |
+      ## Frontend Verification Report
+
+      | # | Element | Type | Test | Status | Notes |
+      |---|---------|------|------|--------|-------|
+      | 1 | Submit button | button | click → action | ✅ PASS | Navigates to /success |
+      | 2 | Country dropdown | dropdown | open → select | ✅ PASS | 195 options loaded |
+      | 3 | Settings modal | modal | open → Escape close | ✅ PASS | Focus returns to trigger |
+      | 4 | Delete button | button | disabled state | ❌ FAIL | Disabled but still clickable |
+
+      **Summary**: 3/4 passed (75%)
+      **Console Errors**: 0
+      **Network Failures**: 0
+    required_fields: ["element", "type", "test", "status", "notes"]
+
+  issue_report:
+    name: "Issue Detail Report"
+    when: "Documenting a specific failing element"
+    format: |
+      ### ❌ Issue: {Element Name} — {Test Name}
+
+      **Element**: {element description and location}
+      **Type**: {button | dropdown | modal | hover}
+      **Severity**: {Critical | High | Medium | Low}
+
+      **Expected**: {What should happen}
+      **Actual**: {What actually happens}
+
+      **Steps to Reproduce**:
+      1. Navigate to {URL}
+      2. {Action 1}
+      3. {Action 2}
+      4. Observe: {What goes wrong}
+
+      **Evidence**: ![screenshot](file:///path/to/screenshot.png)
+
+      **Possible Cause**: {If identifiable}
+    required_fields:
+      ["element", "severity", "expected", "actual", "steps", "evidence"]
+
+  interaction_log:
+    name: "Interaction Log"
+    when: "Detailed log of all interactions performed"
+    format: |
+      ## Interaction Log — {URL}
+
+      | Time | Action | Element | Result |
+      |------|--------|---------|--------|
+      | 0:00 | navigate | {URL} | ✅ HTTP 200 |
+      | 0:02 | snapshot | page | 12 buttons, 3 dropdowns, 1 modal |
+      | 0:03 | click | Submit button | ✅ Form submitted |
+      | 0:04 | snapshot | result page | Success message visible |
+      | 0:05 | click | Country dropdown | ✅ Options opened |
+      | 0:06 | select | "Vietnam" | ✅ Value updated |
+      | 0:07 | press_key | Escape | ✅ Dropdown closed |
+    note: "This format is useful for reproducing exact test sequences"
+
+  accessibility_scorecard:
+    name: "Accessibility Scorecard"
+    when: "Reporting accessibility-specific results"
+    format: |
+      ## Accessibility Scorecard
+
+      | Category | Check | Status |
+      |----------|-------|--------|
+      | **Keyboard** | All elements reachable via Tab | ✅ |
+      | **Keyboard** | Enter activates buttons | ✅ |
+      | **Keyboard** | Escape closes modals/dropdowns | ✅ |
+      | **Keyboard** | Arrow keys navigate lists | ❌ |
+      | **Focus** | Visible focus indicator | ✅ |
+      | **Focus** | Focus trap in modals | ✅ |
+      | **Focus** | Focus returns after close | ❌ |
+      | **ARIA** | Roles correctly assigned | ✅ |
+      | **ARIA** | Labels present | ✅ |
+      | **Screen Reader** | Content announced correctly | ⚠️ Not tested |
+
+      **Score**: 7/9 passed (78%)
+      **Needs Attention**: Arrow key navigation, focus return
+    categories: ["keyboard", "focus", "aria", "screen_reader", "color_contrast"]
+
+# Recommended Report Structure:
+# 1. Summary table (always include)
+# 2. Issue reports (for each failure)
+# 3. Interaction log (optional, for debugging)
+# 4. Accessibility scorecard (if a11y testing performed)
+
+# _DOMYH Awesome Code • Reporting Patterns v1.0.0_

package/.agent/skills/tooling/browser-agent/data/subagent-patterns.yaml

@@ -0,0 +1,158 @@
+# =============================================================================
+# subagent-patterns.yaml — browser_subagent Task Description Templates
+# =============================================================================
+
+version: "1.0.0"
+
+# These templates are used with the browser_subagent tool in AI IDEs
+# (e.g., Antigravity). The Task argument should be detailed and explicit.
+
+templates:
+  verify_page_load:
+    name: "Page Load Verification"
+    when: "Quick check that page loads correctly"
+    recording_name: "page_load_check"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      1. Take a screenshot of the full page
+      2. Take a browser_snapshot to see the accessibility tree
+      3. Check browser_console_messages for any errors (level: error)
+      4. Check browser_network_requests for any failed requests (4xx/5xx)
+
+      Return:
+      - Whether the page loaded successfully (HTTP 200)
+      - Any console errors found
+      - Any failed network requests
+      - A brief description of the page layout
+    return_conditions: "Return after all 4 checks completed"
+
+  test_all_interactions:
+    name: "Comprehensive Interaction Testing"
+    when: "Full verification of all interactive elements"
+    recording_name: "comprehensive_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      PHASE 1: Discover all interactive elements
+      - Take a browser_snapshot
+      - List ALL buttons, links, inputs, dropdowns, and modal triggers
+
+      PHASE 2: Test EACH element systematically
+      For each BUTTON found:
+        - Click it and verify the expected action happens
+        - Take a screenshot after clicking
+        - Note if it's disabled, loading, or changes state
+
+      For each DROPDOWN found:
+        - Click to open it
+        - Verify options are visible
+        - Select an option and verify the value updates
+        - Press Escape to close and verify it closes
+
+      For each INPUT found:
+        - Click to focus
+        - Type test text and verify it appears
+        - If it has validation, try submitting empty
+
+      For each MODAL TRIGGER found:
+        - Click to open the modal
+        - Verify the modal appears with correct content
+        - Press Escape to close
+        - Verify focus returns to the trigger
+
+      PHASE 3: Edge cases
+      - Check browser_console_messages for errors
+      - Check browser_network_requests for failures
+
+      Return: A table with columns [Element, Type, Test, Pass/Fail, Notes]
+      for every element tested.
+    return_conditions: "Return after all elements tested and evidence collected"
+
+  test_specific_component:
+    name: "Specific Component Testing"
+    when: "Test a particular component in depth"
+    recording_name: "component_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Find the {COMPONENT_NAME} component ({COMPONENT_DESCRIPTION}).
+
+      Test it thoroughly:
+      1. Take a browser_snapshot to find the exact element ref
+      2. Interact with it: {SPECIFIC_INTERACTIONS}
+      3. Verify: {EXPECTED_BEHAVIOR}
+      4. Test keyboard: Tab to it, Enter/Space to activate, Escape to dismiss
+      5. Take screenshots before and after each interaction
+
+      Return:
+      - Whether the component works as expected
+      - Any issues found
+      - Screenshots of each state
+    return_conditions: "Return after all specified interactions tested"
+
+  visual_comparison:
+    name: "Before/After Visual Comparison"
+    when: "Compare UI before and after a code change"
+    recording_name: "visual_comparison"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Take a full-page screenshot as the "current state".
+
+      Then perform these actions to test the change:
+      {CHANGE_DESCRIPTION}
+
+      Take another full-page screenshot as the "after state".
+
+      Compare the two states and report:
+      1. What changed visually?
+      2. Is the layout correct?
+      3. Are all elements still accessible?
+      4. Any unexpected visual changes?
+
+      Return: Description of visual changes with screenshots.
+    return_conditions: "Return after both screenshots taken and compared"
+
+  form_flow_test:
+    name: "Complete Form Flow Testing"
+    when: "Test end-to-end form submission"
+    recording_name: "form_flow_test"
+    task_template: |
+      Navigate to {URL}. Wait for page to fully load.
+
+      Find the {FORM_NAME} form.
+
+      Test 1: Happy Path
+      1. Fill all required fields with valid data:
+         {FIELD_VALUES}
+      2. Click the submit button
+      3. Verify success state (message, redirect, etc.)
+      4. Take screenshot of success state
+
+      Test 2: Validation
+      1. Clear all fields (or reload page)
+      2. Click submit without filling anything
+      3. Verify validation error messages appear
+      4. Take screenshot of error state
+
+      Test 3: Individual Field Validation
+      For each required field:
+      1. Fill all fields EXCEPT the current one
+      2. Submit
+      3. Verify specific error for that field
+
+      Return:
+      - Happy path: Pass/Fail with screenshot
+      - Validation: Pass/Fail with error messages
+      - Per-field validation: Pass/Fail for each field
+    return_conditions: "Return after all 3 test types completed"
+
+# Usage Example:
+# browser_subagent(
+#   TaskName: "Comprehensive Verification",
+#   Task: templates.test_all_interactions.task_template.replace("{URL}", "http://localhost:3000"),
+#   RecordingName: "comprehensive_test"
+# )
+
+# _DOMYH Awesome Code • Browser Subagent Task Templates v1.0.0_