agentic-qe 1.9.4 → 2.1.0

package/.claude/skills/testability-scoring/scripts/run-assessment.sh

@@ -0,0 +1,70 @@
+#!/bin/bash
+set -e
+
+# Testability Scoring Assessment Runner
+# Usage: ./run-assessment.sh <URL> [browser]
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/../../../.." && pwd)"
+TEST_FILE="$PROJECT_ROOT/tests/testability-scoring/testability-scoring.spec.js"
+
+# Colors
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Check if URL provided
+if [ -z "$1" ]; then
+    echo -e "${RED}Error: URL required${NC}"
+    echo "Usage: $0 <URL> [browser]"
+    echo "Example: $0 https://example.com chromium"
+    exit 1
+fi
+
+TARGET_URL="$1"
+BROWSER="${2:-chromium}"
+
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${GREEN}🎯 Testability Assessment${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+echo -e "  ${YELLOW}URL:${NC}     $TARGET_URL"
+echo -e "  ${YELLOW}Browser:${NC} $BROWSER"
+echo ""
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# Change to project root
+cd "$PROJECT_ROOT"
+
+# Run Playwright tests with TEST_URL environment variable
+echo -e "${YELLOW}⏳ Running assessment...${NC}\n"
+
+TEST_URL="$TARGET_URL" npx playwright test "$TEST_FILE" --project="$BROWSER" --workers=1
+
+# Check if tests passed
+if [ $? -eq 0 ]; then
+    echo ""
+    echo -e "${GREEN}✅ Assessment completed successfully!${NC}"
+    
+    # Find the latest JSON report
+    LATEST_JSON=$(ls -t "$PROJECT_ROOT/tests/reports/testability-results-"*.json 2>/dev/null | head -1)
+    
+    if [ -n "$LATEST_JSON" ]; then
+        # Generate HTML report
+        echo -e "\n${YELLOW}📊 Generating HTML report...${NC}\n"
+        node "$SCRIPT_DIR/generate-html-report.js" "$LATEST_JSON"
+        
+        echo ""
+        echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+        echo -e "${GREEN}✓ Complete! Check your browser for the report.${NC}"
+        echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    else
+        echo -e "${YELLOW}⚠️  JSON report not found${NC}"
+    fi
+else
+    echo -e "\n${RED}❌ Assessment failed${NC}"
+    exit 1
+fi

package/.claude/skills/visual-testing-advanced/SKILL.md

@@ -1,142 +1,219 @@
 ---
 name: visual-testing-advanced
-description: Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.
+description: "Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency."
+category: specialized-testing
+priority: high
+tokenEstimate: 900
+agents: [qe-visual-tester, qe-test-executor, qe-quality-gate]
+implementation_status: optimized
+optimization_version: 1.0
+last_optimized: 2025-12-02
+dependencies: []
+quick_reference_card: true
+tags: [visual, regression, screenshot, pixel-diff, percy, playwright, responsive]
 ---
 
 # Advanced Visual Testing
 
-## Core Principle
+<default_to_action>
+When detecting visual regressions or validating UI:
+1. CAPTURE baseline screenshots (first run establishes baseline)
+2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
+3. MASK dynamic content (timestamps, ads, user counts)
+4. TEST across devices (desktop, tablet, mobile viewports)
+5. REVIEW and approve intentional changes, fail on regressions
+
+**Quick Visual Testing Steps:**
+- Set up baseline on main branch
+- Compare feature branch against baseline
+- Mask dynamic elements (timestamps, avatars)
+- Use AI-powered comparison to reduce false positives
+- Integrate in CI/CD to block visual regressions
+
+**Critical Success Factors:**
+- Functional tests don't catch visual bugs
+- AI-powered tools reduce false positives
+- Review diffs, don't just auto-approve
+</default_to_action>
+
+## Quick Reference Card
+
+### When to Use
+- UI component changes
+- CSS/styling modifications
+- Responsive design validation
+- Cross-browser consistency checks
+
+### Visual Bug Types
+| Bug Type | Description |
+|----------|-------------|
+| Layout shift | Elements moved position |
+| Color change | Unintended color modification |
+| Font rendering | Typography issues |
+| Alignment | Spacing/alignment problems |
+| Missing images | Broken image paths |
+| Overflow | Content clipping |
+
+### Comparison Algorithms
+| Algorithm | Best For |
+|-----------|----------|
+| **Pixel diff** | Exact match requirement |
+| **Structural similarity** | Handle anti-aliasing |
+| **AI semantic** | Ignore insignificant changes |
 
-**Visual bugs are bugs. Test what users see.**
-
-Visual testing catches UI regressions that functional tests miss: layout shifts, color changes, font rendering, alignment issues.
-
-## Visual Regression Testing
+---
 
-**Process:**
-1. Capture baseline screenshots
-2. Make code changes
-3. Capture new screenshots
-4. Compare pixel-by-pixel
-5. Flag differences for review
+## Visual Regression with Playwright
 
-**With Playwright:**
 ```javascript
 import { test, expect } from '@playwright/test';
 
 test('homepage visual regression', async ({ page }) => {
   await page.goto('https://example.com');
 
-  // Capture screenshot
+  // Capture and compare screenshot
   await expect(page).toHaveScreenshot('homepage.png');
   // First run: saves baseline
   // Subsequent runs: compares to baseline
 });
 
-test('responsive design on mobile', async ({ page }) => {
-  await page.setViewportSize({ width: 375, height: 667 }); // iPhone
-
+test('responsive design', async ({ page }) => {
+  // Mobile viewport
+  await page.setViewportSize({ width: 375, height: 667 });
   await page.goto('https://example.com');
   await expect(page).toHaveScreenshot('homepage-mobile.png');
+
+  // Tablet viewport
+  await page.setViewportSize({ width: 768, height: 1024 });
+  await expect(page).toHaveScreenshot('homepage-tablet.png');
 });
 ```
 
-**Configuration:**
+---
+
+## Handling Dynamic Content
+
 ```javascript
-// playwright.config.js
-export default {
-  expect: {
-    toHaveScreenshot: {
-      maxDiffPixels: 100, // Allow 100 pixel difference
-      threshold: 0.2, // 20% similarity threshold
-      animations: 'disabled', // Disable animations
-      caret: 'hide' // Hide cursor
-    }
-  }
-};
+test('mask dynamic elements', async ({ page }) => {
+  await page.goto('https://example.com');
+
+  await expect(page).toHaveScreenshot({
+    mask: [
+      page.locator('.timestamp'),     // Dynamic time
+      page.locator('.user-count'),    // Live counter
+      page.locator('.advertisement'), // Ads
+      page.locator('.avatar')         // User avatars
+    ]
+  });
+});
 ```
 
-## AI-Powered Visual Testing
+---
+
+## AI-Powered Visual Testing (Percy)
 
-**Percy (BrowserStack):**
 ```javascript
 import percySnapshot from '@percy/playwright';
 
-test('homepage visual test', async ({ page }) => {
+test('AI-powered visual test', async ({ page }) => {
   await page.goto('https://example.com');
 
-  // AI-powered comparison (ignores minor anti-aliasing differences)
+  // Percy uses AI to ignore anti-aliasing, minor font differences
   await percySnapshot(page, 'Homepage');
 });
-```
 
-## Cross-Browser Visual Testing
+test('component visual test', async ({ page }) => {
+  await page.goto('https://example.com/components');
 
-```javascript
-test.describe('cross-browser visual consistency', () => {
-  test('Chrome vs Firefox', async ({ browser }) => {
-    const chromePage = await browser.newPage();
-    await chromePage.goto('https://example.com');
-    const chromeScreenshot = await chromePage.screenshot();
-
-    // Compare Chrome vs Firefox rendering
-    expect(chromeScreenshot).toMatchSnapshot('chrome-homepage.png');
+  // Snapshot specific component
+  const button = page.locator('.primary-button');
+  await percySnapshot(page, 'Primary Button', {
+    scope: button
   });
 });
 ```
 
-## Dynamic Content Handling
+---
 
-**Mask dynamic elements:**
-```javascript
-test('ignore dynamic content', async ({ page }) => {
-  await page.goto('https://example.com');
+## Playwright Configuration
 
-  await expect(page).toHaveScreenshot({
-    mask: [
-      page.locator('.timestamp'),   // Mask timestamps
-      page.locator('.user-count'),  // Mask dynamic counters
-      page.locator('.advertisement') // Mask ads
-    ]
-  });
-});
+```javascript
+// playwright.config.js
+export default {
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixels: 100,      // Allow 100 pixel difference
+      maxDiffPixelRatio: 0.01, // Or 1% of image
+      threshold: 0.2,          // Color similarity threshold
+      animations: 'disabled',  // Disable animations
+      caret: 'hide'            // Hide cursor
+    }
+  }
+};
 ```
 
-## With qe-visual-tester Agent
+---
+
+## Agent-Driven Visual Testing
 
 ```typescript
-// Agent performs comprehensive visual testing
-const results = await agent.visualRegressionTest({
+// Comprehensive visual regression
+await Task("Visual Regression Suite", {
   baseline: 'main-branch',
   current: 'feature-branch',
   pages: ['homepage', 'product', 'checkout'],
   devices: ['desktop', 'tablet', 'mobile'],
-  browsers: ['chrome', 'firefox', 'safari']
-});
+  browsers: ['chrome', 'firefox', 'safari'],
+  threshold: 0.01
+}, "qe-visual-tester");
 
 // Returns:
 // {
-//   totalPages: 3,
-//   totalDevices: 3,
-//   totalBrowsers: 3,
-//   comparisons: 27, // 3 × 3 × 3
+//   comparisons: 27,  // 3 pages × 3 devices × 3 browsers
 //   differences: 2,
 //   report: 'visual-regression-report.html'
 // }
 ```
 
-## Remember
+---
+
+## Agent Coordination Hints
+
+### Memory Namespace
+```
+aqe/visual-testing/
+├── baselines/*          - Baseline screenshots
+├── comparisons/*        - Diff results
+├── components/*         - Component snapshots
+└── reports/*            - Visual regression reports
+```
 
-**Functional tests don't catch visual bugs.**
+### Fleet Coordination
+```typescript
+const visualFleet = await FleetManager.coordinate({
+  strategy: 'visual-testing',
+  agents: [
+    'qe-visual-tester',   // Screenshot comparison
+    'qe-test-executor',   // Cross-browser execution
+    'qe-quality-gate'     // Block on visual regressions
+  ],
+  topology: 'parallel'
+});
+```
+
+---
+
+## Related Skills
+- [accessibility-testing](../accessibility-testing/) - Visual a11y checks
+- [compatibility-testing](../compatibility-testing/) - Cross-browser visuals
+- [regression-testing](../regression-testing/) - Regression suite
+
+---
+
+## Remember
 
-Visual regressions include:
-- Layout shifts
-- Color changes
-- Font rendering
-- Alignment issues
-- Missing images
-- Broken CSS
+**Functional tests don't catch visual bugs.** Layout shifts, color changes, font rendering, alignment issues - all invisible to functional tests but visible to users.
 
-**AI-powered tools reduce false positives.**
+**AI-powered tools reduce false positives.** Percy, Applitools use AI to ignore insignificant differences (anti-aliasing, minor font rendering).
 
-**With Agents:** `qe-visual-tester` automates visual regression across browsers and devices, uses AI to ignore insignificant differences, and generates visual diff reports.
+**With Agents:** `qe-visual-tester` automates visual regression across browsers and devices, uses AI to filter noise, and generates visual diff reports. Catches UI regressions before users see them.