Security Visual Testing

1. VALIDATE URLs before navigation (check for malicious patterns)
2. SCAN for PII before saving screenshots (mask sensitive data)
3. CAPTURE parallel viewports (mobile, tablet, desktop)
4. COMPARE against baselines (detect visual regressions)
5. AUDIT accessibility (WCAG 2.1 AA compliance)

• URL validation (no javascript:, data:, file: schemes)
• PII detection (emails, phones, SSN, credit cards, API keys)
• Visual regression (diff threshold < 0.1%)
• Viewport coverage (320px, 768px, 1024px, 1440px)
• Accessibility score (> 90% axe-core pass rate)

• Always mask PII before storing screenshots
• Test across all target viewports in parallel
• Store baselines in version control
• Run accessibility audits on every visual change </default_to_action>

Quick Reference Card

When to Use

Key Capabilities

Workflows

1. Security Visual Audit (Full Pipeline)

# Run complete security + visual audit
aqe test visual-audit --url https://example.com --security --accessibility

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

# Capture screenshot with automatic PII masking
aqe screenshot --url https://example.com/profile --pii-safe

• 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"

• Default: Blur with high intensity
• Options:

  redact

  (black box),

  pixelate

  ,

  blur

3. Responsive Visual Audit

# Test visual consistency across viewports
aqe test responsive --url https://example.com --viewports mobile,tablet,desktop

Integration with AQE v3

Using with BrowserSecurityScanner

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

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
});

Agent Coordination

Memory Namespace

aqe/security-visual/
├── baselines/*          - Visual regression baselines
├── screenshots/*        - Captured screenshots (PII masked)
├── reports/*            - Audit reports
└── trajectories/*       - Learning trajectories

Fleet Coordination

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 Handling

URL_BLOCKED

PII_DETECTED

BASELINE_MISSING

--update-baseline

VIEWPORT_TIMEOUT

ACCESSIBILITY_FAILED

Related Skills

• visual-testing-advanced - Pure visual testing without security
• security-testing - Security testing without visual component
• accessibility-testing - Accessibility-only testing
• qe-visual-accessibility - AQE v3 visual domain skill

Performance Targets