Smithery is now a part of Arcade.dev! Read more in our announcement here

security-visual-testing

proffesor-for-testing/security-visual-testing

Security

158

About

SKILL.md

security-visual-testing

proffesor-for-testing/security-visual-testing

Security

158

About

Security-first visual testing combining URL validation, PII detection, and visual regression with parallel viewport support...

SKILL.md

Security Visual Testing

Browser engine

Uses the qe-browser fleet skill (.claude/skills/qe-browser/) for all browser automation. The Vibium engine (10MB Go binary, WebDriver BiDi) is installed automatically by aqe init. For security-visual workflows, qe-browser adds two things on top of stock visual testing: check-injection.js (scans page content for prompt-injection patterns before screenshots are stored) and assert.js (16 typed checks including no_failed_requests for detecting data-leak requests).

# Before storing any screenshot, scan the page
vibium go "$TARGET_URL"
vibium wait load
node .claude/skills/qe-browser/scripts/check-injection.js --include-hidden
INJ=$?
if [ $INJ -ne 0 ]; then
  echo "Prompt-injection findings — do NOT store screenshot"
  exit $INJ
fi
# Safe to proceed with visual-diff
node .claude/skills/qe-browser/scripts/visual-diff.js --name "${PAGE_NAME}"

When performing security-aware 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)

Quick Security-Visual Checklist:

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)

Critical Success Factors:

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

Quick Reference Card

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

Workflows

1. Security Visual Audit (Full Pipeline)

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

Steps:

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

2. PII-Safe Screenshot

# 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

# 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

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

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

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

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

About

SKILL.md

About

Security-first visual testing combining URL validation, PII detection, and visual regression with parallel viewport support...

SKILL.md

Security Visual Testing

Browser engine

# Before storing any screenshot, scan the page
vibium go "$TARGET_URL"
vibium wait load
node .claude/skills/qe-browser/scripts/check-injection.js --include-hidden
INJ=$?
if [ $INJ -ne 0 ]; then
  echo "Prompt-injection findings — do NOT store screenshot"
  exit $INJ
fi
# Safe to proceed with visual-diff
node .claude/skills/qe-browser/scripts/visual-diff.js --name "${PAGE_NAME}"

Quick Security-Visual Checklist:

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)

Critical Success Factors:

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

Quick Reference Card

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

Workflows

1. Security Visual Audit (Full Pipeline)

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

Steps:

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

2. PII-Safe Screenshot

# 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

# 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

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

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

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

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