agentic-qe 3.9.8 → 3.9.10

package/assets/skills/a11y-ally/SKILL.md

@@ -69,32 +69,54 @@ Claude: [Runs scan] → [Analyzes violations] → [Downloads video] → [Extract
 
 ## STEP 1: BROWSER AUTOMATION - Content Fetching
 
-### 1.1: Try VIBIUM First (Primary)
-```javascript
-ToolSearch("select:mcp__vibium__browser_launch")
-ToolSearch("select:mcp__vibium__browser_navigate")
-mcp__vibium__browser_launch({ headless: true })
-mcp__vibium__browser_navigate({ url: "TARGET_URL" })
-```
+Uses the **qe-browser** fleet skill as the browser engine. qe-browser wraps Vibium (WebDriver BiDi, 10MB Go binary) and provides the QE primitives we rely on. See `.claude/skills/qe-browser/SKILL.md`.
 
-**If Vibium fails** → Go to STEP 1b
+### 1.1: PRIMARY — qe-browser via Vibium CLI
+```bash
+# Navigate
+vibium go "$TARGET_URL"
+vibium wait load
 
-### 1b: Try AGENT-BROWSER Fallback
-```javascript
-ToolSearch("select:mcp__claude-flow_alpha__browser_open")
-mcp__claude-flow_alpha__browser_open({ url: "TARGET_URL", waitUntil: "networkidle" })
+# Capture accessibility tree without visual render
+vibium a11y-tree --json > /tmp/a11y-work/tree.json
+
+# Screenshot for Vision pipeline
+vibium screenshot -o /tmp/a11y-work/page.png --full-page
 ```
 
-**If agent-browser fails** → Go to STEP 1c
+If Vibium MCP tools are registered (`mcp__vibium__*`), prefer them; otherwise shell out to the `vibium` binary installed by `aqe init`.
+
+### 1.2: Run axe-core + WCAG assertions via qe-browser
+```bash
+# Inject axe-core via vibium eval and collect violations
+vibium eval --stdin <<'EOF'
+const s = document.createElement('script');
+s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js';
+document.head.appendChild(s);
+await new Promise(r => s.onload = r);
+const results = await axe.run();
+JSON.stringify({ violations: results.violations.length, issues: results.violations });
+EOF
+
+# Enforce: no critical a11y violations + no failed network requests
+node .claude/skills/qe-browser/scripts/assert.js --checks '[
+  {"kind": "no_console_errors"},
+  {"kind": "no_failed_requests"},
+  {"kind": "selector_visible", "selector": "main, [role=main]"}
+]'
+```
 
-### 1c: PLAYWRIGHT + STEALTH (Final Fallback)
+### 1.3: FALLBACK — pa11y + Lighthouse (when axe alone is insufficient)
 ```bash
-mkdir -p /tmp/a11y-work && cd /tmp/a11y-work
-npm init -y 2>/dev/null
-npm install playwright-extra puppeteer-extra-plugin-stealth @axe-core/playwright pa11y lighthouse chrome-launcher 2>/dev/null
+# Only use when you need the extra rulesets, not as the primary path
+pa11y "$TARGET_URL" --reporter json > /tmp/a11y-work/pa11y.json
+lighthouse "$TARGET_URL" --only-categories=accessibility --output=json --output-path=/tmp/a11y-work/lighthouse.json --chrome-flags="--headless"
 ```
 
-Create and run scan script - see STEP 2 for full multi-tool scan code.
+**Why we dropped playwright-extra + puppeteer-extra-plugin-stealth from the primary path:**
+- 300MB+ of Node deps vs Vibium's 10MB binary
+- Redundant: Vibium uses WebDriver BiDi which is less fingerprintable than raw CDP
+- Simpler: one tool instead of a cascade
 
 ### 1d: PARALLEL MULTI-PAGE AUDIT (Optional)
 

package/assets/skills/accessibility-testing/SKILL.md

@@ -23,6 +23,10 @@ validation:
 
 > **Consolidated**: For comprehensive WCAG auditing with multi-tool testing (axe-core + pa11y + Lighthouse), video accessibility, and remediation, prefer [`/a11y-ally`](../a11y-ally/). This skill provides a quick reference card for basic accessibility testing patterns.
 
+## Browser engine
+
+Browser-driven a11y checks should go through the **qe-browser** fleet skill. `vibium a11y-tree --json` returns the full accessibility tree without visual rendering — feed it into axe-core via `vibium eval --stdin` for ruleset enforcement. See `.claude/skills/qe-browser/SKILL.md`.
+
 <default_to_action>
 When testing accessibility or ensuring compliance:
 1. APPLY POUR principles: Perceivable, Operable, Understandable, Robust

package/assets/skills/compatibility-testing/SKILL.md

@@ -19,6 +19,29 @@ validation:
 
 # Compatibility Testing
 
+## Browser engine
+
+Browser-driven checks (viewport emulation, responsive validation, cross-browser screenshots) should go through the **qe-browser** fleet skill (`.claude/skills/qe-browser/`). Vibium is installed by `aqe init`. Quick reference:
+
+```bash
+# Viewport emulation per breakpoint
+vibium viewport 375 667   # mobile
+vibium viewport 768 1024  # tablet
+vibium viewport 1920 1080 # desktop
+
+# Full device emulation (user-agent, DPR, touch)
+vibium emulate-device "iPhone 15"
+
+# Visual diff per viewport
+for vp in "375 667 mobile" "768 1024 tablet" "1920 1080 desktop"; do
+  read w h name <<< "$vp"
+  vibium viewport $w $h
+  node .claude/skills/qe-browser/scripts/visual-diff.js --name "homepage-$name"
+done
+```
+
+Cross-browser (Firefox/Safari) still requires Playwright or a cloud device farm today — Vibium's BiDi backend is Chrome-only at v26.3.x.
+
 <default_to_action>
 When validating cross-browser/platform compatibility:
 1. DEFINE browser matrix (cover 95%+ of users)

package/assets/skills/e2e-flow-verifier/SKILL.md

@@ -1,12 +1,12 @@
 ---
 name: e2e-flow-verifier
-description: "Use when verifying complete user flows end-to-end with Playwright, recording video evidence, and asserting state at each step. For product verification with real browser automation."
+description: "Use when verifying complete user flows end-to-end with the qe-browser skill (Vibium), recording session evidence, and asserting state at each step. For product verification with real browser automation."
 user-invocable: true
 ---
 
 # E2E Flow Verifier
 
-Product verification skill that drives user flows with Playwright, asserts state at each step, and records video evidence.
+Product verification skill that drives user flows with the **qe-browser** fleet skill (Vibium engine), asserts state at each step, and records evidence as a ZIP of screenshots + DOM snapshots.
 
 ## Activation
 
@@ -14,65 +14,100 @@ Product verification skill that drives user flows with Playwright, asserts state
 /e2e-flow-verifier [flow-name]
 ```
 
-## Flow Verification Pattern
-
-```typescript
-import { test, expect } from '@playwright/test';
-
-test.describe('{{Flow Name}}', () => {
-  // Record video for evidence
-  test.use({
-    video: 'on',
-    screenshot: 'on',
-    trace: 'on',
-  });
-
-  test('complete user journey', async ({ page }) => {
-    // Step 1: Navigate
-    await page.goto('{{base_url}}');
-    await expect(page).toHaveTitle(/{{expected_title}}/);
-
-    // Step 2: Authenticate (if needed)
-    await page.fill('[data-testid="email"]', '{{test_user}}');
-    await page.fill('[data-testid="password"]', '{{test_password}}');
-    await page.click('[data-testid="login-btn"]');
-    await expect(page.locator('[data-testid="dashboard"]')).toBeVisible();
-
-    // Step 3: Perform action
-    await page.click('[data-testid="{{action_element}}"]');
-    await expect(page.locator('[data-testid="{{result_element}}"]')).toContainText('{{expected_text}}');
-
-    // Step 4: Verify state change
-    // Assert both UI state AND backend state
-    const apiResponse = await page.request.get('/api/{{resource}}');
-    expect(apiResponse.status()).toBe(200);
-    const data = await apiResponse.json();
-    expect(data.{{field}}).toBe('{{expected_value}}');
-  });
-});
+## Dependency
+
+This skill uses `.claude/skills/qe-browser/` for all browser automation. The `vibium` binary is installed automatically by `aqe init`. See `qe-browser/SKILL.md` for the full command reference.
+
+## Flow Verification Pattern (qe-browser + batch + assert)
+
+Define the flow as a JSON batch plan and drive it with the qe-browser batch runner:
+
+```bash
+# flows/{{flow-name}}.json
+cat > /tmp/{{flow-name}}.json <<'EOF'
+[
+  {"action": "go",      "url": "{{base_url}}"},
+  {"action": "wait_load"},
+  {"action": "fill",    "selector": "[data-testid=email]",    "text": "{{test_user}}"},
+  {"action": "fill",    "selector": "[data-testid=password]", "text": "{{test_password}}"},
+  {"action": "click",   "selector": "[data-testid=login-btn]"},
+  {"action": "wait_url","pattern": "/dashboard"},
+  {"action": "assert",  "checks": [
+    {"kind": "url_contains",    "text": "/dashboard"},
+    {"kind": "selector_visible","selector": "[data-testid=dashboard]"},
+    {"kind": "no_console_errors"},
+    {"kind": "no_failed_requests"}
+  ]},
+  {"action": "click",   "selector": "[data-testid={{action_element}}]"},
+  {"action": "assert",  "checks": [
+    {"kind": "text_visible", "text": "{{expected_text}}"}
+  ]}
+]
+EOF
+
+# Record evidence AND drive the flow
+vibium record start --screenshots --snapshots --name "{{flow-name}}"
+node .claude/skills/qe-browser/scripts/batch.js --steps "@/tmp/{{flow-name}}.json"
+FLOW_EXIT=$?
+vibium record stop -o "test-results/{{flow-name}}/evidence.zip"
+exit $FLOW_EXIT
 ```
 
+The batch runner exits non-zero if any step fails, so CI gates work with a plain `$?` check.
+
 ## Evidence Collection
 
-After each flow verification:
-1. **Video** — `test-results/{{flow-name}}/video.webm`
-2. **Screenshots** — at each assertion point
-3. **Trace** — `test-results/{{flow-name}}/trace.zip` (open with `npx playwright show-trace`)
-4. **Network log** — HAR file with all API calls
+After each flow verification, `vibium record` produces a ZIP containing:
+
+1. **Screenshots** — one per action + annotated failure shots
+2. **DOM snapshots** — before/after each interaction
+3. **Timeline** — ordered event log with URLs and timings
+4. **Console/network logs** — captured inline
+
+Use `vibium har-export` for a separate HAR 1.2 network log if needed.
+
+## Asserting backend state alongside UI
+
+The qe-browser `assert.js` check kinds include network assertions that capture backend calls made from the page:
+
+```bash
+node .claude/skills/qe-browser/scripts/assert.js --checks '[
+  {"kind": "response_status", "url": "/api/{{resource}}", "status": 200},
+  {"kind": "request_url_seen", "url": "/api/{{resource}}"}
+]'
+```
+
+For API calls that don't originate from the page, run the API check in a separate step (`curl` + `jq`, or a dedicated API test skill).
 
 ## Common Flows to Verify
 
 | Flow | Steps | Critical Assertions |
 |------|-------|-------------------|
-| Sign-up | Register → Verify email → Login | Account created, session valid |
-| Purchase | Browse → Add to cart → Checkout → Pay | Order created, payment processed |
-| Profile | Login → Edit profile → Save | Changes persisted, shown on reload |
-| Search | Enter query → Filter → Select result | Results relevant, filters work |
+| Sign-up | Register → Verify email → Login | `url_contains /dashboard`, `no_failed_requests` |
+| Purchase | Browse → Add to cart → Checkout → Pay | `response_status /api/orders 201`, `text_visible "Thank you"` |
+| Profile | Login → Edit profile → Save | `value_equals` on the reloaded form, `no_console_errors` |
+| Search | Enter query → Filter → Select result | `element_count .result >= 1`, `text_visible <query>` |
+
+## Reusing auth state across runs
+
+```bash
+# Once: log in and save state
+vibium go "{{base_url}}/login"
+vibium fill "[data-testid=email]" "$USERNAME"
+vibium fill "[data-testid=password]" "$PASSWORD"
+vibium click "[data-testid=login-btn]"
+vibium wait url "/dashboard"
+vibium storage -o test-results/auth/state.json
+
+# Every subsequent run
+vibium storage restore test-results/auth/state.json
+vibium go "{{base_url}}/dashboard"
+```
 
 ## Gotchas
 
-- Agent writes Playwright tests but doesn't run them — always execute and check video evidence
-- Selectors break on deployment — use `data-testid` attributes, never CSS classes
-- Tests pass locally but fail in CI — headless browser behavior differs, use `--headed` for debugging
-- Auth tokens in E2E tests expire — use fresh login per test, not shared tokens
-- Video evidence is large — clean up after verification, keep only failure videos
+- **Re-map after DOM changes** — Vibium `@e1` refs are invalidated by navigation; use `vibium diff map` to see what changed and re-map if needed.
+- **Selectors break on deployment** — prefer `data-testid` over CSS classes.
+- **Auth tokens expire** — use fresh login per run, or rotate `storage` snapshots.
+- **Evidence ZIPs grow** — keep failure runs only in CI, gc after N days.
+- **No raw Playwright** — this skill used to use `@playwright/test`. If you need Playwright's network interception (`page.route`), use it in a separate skill and call it as a step; don't reintroduce the dependency here.

package/assets/skills/enterprise-integration-testing/SKILL.md

@@ -20,6 +20,10 @@ validation:
 
 # Enterprise Integration Testing
 
+## Browser engine
+
+UI-level enterprise integration checks (SAP Fiori launchpad smoke tests, admin UI validation) should use the **qe-browser** fleet skill. RFC/BAPI/IDoc/OData/SOAP testing continues to use the dedicated `qe-soap-tester`, `qe-sap-rfc-tester`, `qe-sap-idoc-tester`, and `qe-odata-contract-tester` agents. See `.claude/skills/qe-browser/SKILL.md`.
+
 <default_to_action>
 When testing enterprise integrations or SAP-connected systems:
 1. MAP the end-to-end flow (web -> API -> middleware -> backend -> response)

package/assets/skills/localization-testing/SKILL.md

@@ -20,6 +20,20 @@ validation:
 
 # Localization & Internationalization Testing
 
+## Browser engine
+
+Browser-driven locale checks (RTL layout diffs, language-switching flows, locale-specific screenshots) should go through the **qe-browser** fleet skill. Example:
+
+```bash
+vibium go "$BASE_URL?lang=ar"  # Arabic, RTL
+vibium wait load
+node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage-ar-rtl
+vibium go "$BASE_URL?lang=ja"  # Japanese, CJK text expansion
+node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage-ja
+```
+
+See `.claude/skills/qe-browser/SKILL.md` for the full reference.
+
 <default_to_action>
 When testing multi-language/region support:
 1. VERIFY translation coverage (all strings translated)

package/assets/skills/observability-testing-patterns/SKILL.md

@@ -20,6 +20,22 @@ validation:
 
 # Observability Testing Patterns
 
+## Browser engine
+
+Dashboard screenshot validation and alert-UI verification go through the **qe-browser** fleet skill (`.claude/skills/qe-browser/`). Vibium is installed by `aqe init`. Typical dashboard regression workflow:
+
+```bash
+vibium go "$GRAFANA_URL/d/api-latency"
+vibium wait load
+node .claude/skills/qe-browser/scripts/assert.js --checks '[
+  {"kind": "selector_visible", "selector": ".panel-title"},
+  {"kind": "no_console_errors"},
+  {"kind": "no_failed_requests"},
+  {"kind": "element_count", "selector": ".panel", "op": ">=", "count": 4}
+]'
+node .claude/skills/qe-browser/scripts/visual-diff.js --name "grafana-api-latency"
+```
+
 <default_to_action>
 When testing observability infrastructure, dashboards, or monitoring:
 1. VALIDATE data accuracy (source data matches what the dashboard displays)