security-visual-testing

When to Use

| Scenario | Use This Skill? | Why |

|----------|-----------------|-----|

| Testing login pages | Yes | Contains PII (passwords, emails) |

| Visual regression suite | Yes | Parallel viewport + baseline comparison |

| Payment forms | Yes | Credit card data needs masking |

| Public marketing pages | Maybe | Only if sensitive data possible |

| API-only testing | No | Use security-testing skill instead |

Key Capabilities

| Capability | Description | Performance |

|------------|-------------|-------------|

| URL Validation | Block malicious URLs before navigation | <5ms |

| PII Detection | Find 6+ types of sensitive data | <100ms |

| Parallel Viewports | Test 4 viewports simultaneously | 4x faster |

| Visual Regression | Pixel-diff with configurable threshold | <500ms |

| Accessibility Audit | WCAG 2.1 A/AA/AAA compliance | <2s |

---

1. Security Visual Audit (Full Pipeline)

```bash

# Run complete security + visual audit

aqe test visual-audit --url https://example.com --security --accessibility

```

Steps:

1. Validate URL security (block malicious schemes)
2. Scan page for security issues (XSS, injection patterns)
3. Capture screenshots across 4 viewports in parallel
4. Compare against stored baselines
5. Run accessibility audit (axe-core)
6. Generate consolidated report

2. PII-Safe Screenshot

```bash

# Capture screenshot with automatic PII masking

aqe screenshot --url https://example.com/profile --pii-safe

```

PII Detection Patterns:

• Email addresses: user@example.com
• Phone numbers: +1-555-123-4567
• Credit cards: 4111-1111-1111-1111
• SSN: 123-45-6789
• API keys: sk_live_..., AKIA...
• Passwords: Form fields with type="password"

Masking Strategy:

• Default: Blur with high intensity
• Options: redact (black box), pixelate, blur

3. Responsive Visual Audit

```bash

# Test visual consistency across viewports

aqe test responsive --url https://example.com --viewports mobile,tablet,desktop

```

Default Viewports:

| Name | Width | Height | Device |

|------|-------|--------|--------|

| mobile | 320px | 568px | iPhone SE |

| tablet | 768px | 1024px | iPad |

| desktop | 1440px | 900px | MacBook |

| wide | 1920px | 1080px | Full HD |

---

Using with BrowserSecurityScanner

```typescript

import { BrowserSecurityScanner } from '@agentic-qe/v3';

const scanner = new BrowserSecurityScanner(memory, {

urlValidation: { enabled: true },

piiDetection: { enabled: true, maskBeforeSave: true },

parallelViewports: { maxConcurrent: 4 }

});

const result = await scanner.scanUrl('https://example.com', {

viewports: ['mobile', 'tablet', 'desktop'],

accessibility: true

});

```

Using with TrajectoryAdapter

```typescript

import { TrajectoryAdapter } from '@agentic-qe/v3';

const adapter = new TrajectoryAdapter(memory);

// Record testing trajectory for learning

await adapter.startTrajectory('security-visual-test', {

url: 'https://example.com',

testType: 'security-visual'

});

// ... perform tests ...

await adapter.endTrajectory(trajectoryId, {

success: true,

piiFound: 3,

visualRegressions: 0,

accessibilityScore: 95

});

```

---

Memory Namespace

```

aqe/security-visual/

├── baselines/* - Visual regression baselines

├── screenshots/* - Captured screenshots (PII masked)

├── reports/* - Audit reports

└── trajectories/* - Learning trajectories

```

Fleet Coordination

```typescript

const fleet = await FleetManager.coordinate({

strategy: 'security-visual-audit',

agents: [

'qe-visual-tester', // Visual regression

'qe-security-scanner', // URL/PII scanning

'qe-accessibility-auditor' // WCAG compliance

],

topology: 'parallel',

maxConcurrent: 4

});

```

---

| Error | Cause | Resolution |

|-------|-------|------------|

| URL_BLOCKED | Malicious URL pattern detected | Check URL, remove javascript:/data: |

| PII_DETECTED | Sensitive data found in screenshot | Enable masking or redact manually |

| BASELINE_MISSING | No baseline for comparison | Run with --update-baseline first |

| VIEWPORT_TIMEOUT | Browser didn't respond | Increase timeout or reduce parallel |

| ACCESSIBILITY_FAILED | WCAG violations found | Review violations, fix issues |

---

• [visual-testing-advanced](../visual-testing-advanced/) - Pure visual testing without security
• [security-testing](../security-testing/) - Security testing without visual component
• [accessibility-testing](../accessibility-testing/) - Accessibility-only testing
• [qe-visual-accessibility](../qe-visual-accessibility/) - AQE v3 visual domain skill

---

| Metric | Target | Measured |

|--------|--------|----------|

| URL validation | <5ms | 2ms |

| PII detection | <100ms | 45ms |

| Single viewport capture | <2s | 1.2s |

| 4-viewport parallel | <3s | 2.1s |

| Visual diff | <500ms | 320ms |

| Accessibility audit | <2s | 1.5s |

| Full pipeline | <10s | 7.2s |