Back to Details

security-visual-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Security Visual Testing

安全可视化测试

<default_to_action> 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 </default_to_action>
<default_to_action> 进行安全感知的可视化测试时：
  1. 导航前先验证URL（检查恶意模式）
  2. 保存截图前扫描PII（遮蔽敏感数据）
  3. 捕获多视口截图（移动端、平板端、桌面端）
  4. 与基线对比（检测视觉回归）
  5. 审计无障碍性（符合WCAG 2.1 AA标准）
快速安全可视化检查清单：
  • URL验证（禁止javascript:、data:、file:协议）
  • PII检测（邮箱、电话、社保号、信用卡、API密钥）
  • 视觉回归（差异阈值<0.1%）
  • 视口覆盖（320px、768px、1024px、1440px）
  • 无障碍得分（axe-core通过率>90%）
关键成功因素：
  • 存储截图前务必遮蔽PII
  • 并行测试所有目标视口
  • 将基线存储在版本控制系统中
  • 每次视觉变更后运行无障碍审计 </default_to_action>

Quick Reference Card

快速参考卡片

When to Use

使用场景

ScenarioUse This Skill?Why
Testing login pagesYesContains PII (passwords, emails)
Visual regression suiteYesParallel viewport + baseline comparison
Payment formsYesCredit card data needs masking
Public marketing pagesMaybeOnly if sensitive data possible
API-only testingNoUse security-testing skill instead
场景是否使用该技能？原因
测试登录页面是包含PII（密码、邮箱）
视觉回归测试套件是多视口并行+基线对比
支付表单是信用卡数据需要遮蔽
公共营销页面可能仅当存在敏感数据风险时
纯API测试否改用security-testing技能

Key Capabilities

核心功能

CapabilityDescriptionPerformance
URL ValidationBlock malicious URLs before navigation<5ms
PII DetectionFind 6+ types of sensitive data<100ms
Parallel ViewportsTest 4 viewports simultaneously4x faster
Visual RegressionPixel-diff with configurable threshold<500ms
Accessibility AuditWCAG 2.1 A/AA/AAA compliance<2s
功能描述性能
URL验证导航前拦截恶意URL<5ms
PII检测识别6+类敏感数据<100ms
多视口并行同时测试4个视口速度提升4倍
视觉回归可配置阈值的像素对比<500ms
无障碍审计符合WCAG 2.1 A/AA/AAA标准<2s

Workflows

工作流

1. Security Visual Audit (Full Pipeline)

1. 安全可视化审计（完整流程）

bash
undefined
bash
undefined

Run complete security + visual audit

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
aqe test visual-audit --url https://example.com --security --accessibility

**步骤：**
1. 验证URL安全性（拦截恶意协议）
2. 扫描页面安全问题（XSS、注入模式）
3. 并行捕获4个视口的截图
4. 与存储的基线对比
5. 运行无障碍审计（axe-core）
6. 生成综合报告

2. PII-Safe Screenshot

2. PII安全截图

bash
undefined
bash
undefined

Capture screenshot with automatic PII masking

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`
aqe screenshot --url https://example.com/profile --pii-safe

**PII检测模式：**
- 邮箱地址：`user@example.com`
- 电话号码：`+1-555-123-4567`
- 信用卡：`4111-1111-1111-1111`
- 社保号：`123-45-6789`
- API密钥：`sk_live_...`, `AKIA...`
- 密码：type="password"的表单字段

**遮蔽策略：**
- 默认：高强度模糊
- 可选：`redact`（黑块遮蔽）、`pixelate`（像素化）、`blur`（模糊）

3. Responsive Visual Audit

3. 响应式可视化审计

bash
undefined
bash
undefined

Test visual consistency across viewports

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 |

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

**默认视口：**
| 名称 | 宽度 | 高度 | 设备 |
|------|-------|--------|--------|
| mobile | 320px | 568px | iPhone SE |
| tablet | 768px | 1024px | iPad |
| desktop | 1440px | 900px | MacBook |
| wide | 1920px | 1080px | 全高清显示器 |

---

Integration with AQE v3

与AQE v3的集成

Using with BrowserSecurityScanner

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

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

Agent Coordination

代理协调

Memory Namespace

内存命名空间

aqe/security-visual/
├── baselines/*          - Visual regression baselines
├── screenshots/*        - Captured screenshots (PII masked)
├── reports/*            - Audit reports
└── trajectories/*       - Learning trajectories
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
});
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 Handling

错误处理

ErrorCauseResolution
URL_BLOCKED
Malicious URL pattern detectedCheck URL, remove javascript:/data:
PII_DETECTED
Sensitive data found in screenshotEnable masking or redact manually
BASELINE_MISSING
No baseline for comparisonRun with 
--update-baseline
first
VIEWPORT_TIMEOUT
Browser didn't respondIncrease timeout or reduce parallel
ACCESSIBILITY_FAILED
WCAG violations foundReview violations, fix issues
错误原因解决方法
URL_BLOCKED
检测到恶意URL模式检查URL，移除javascript:/data:协议
PII_DETECTED
截图中发现敏感数据启用遮蔽或手动编辑
BASELINE_MISSING
无对比基线先使用
--update-baseline
运行
VIEWPORT_TIMEOUT
浏览器无响应增加超时时间或减少并行数量
ACCESSIBILITY_FAILED
存在WCAG违规查看违规项，修复问题

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
  • visual-testing-advanced - 无安全功能的纯可视化测试
  • security-testing - 无可视化功能的纯安全测试
  • accessibility-testing - 纯无障碍测试
  • qe-visual-accessibility - AQE v3可视化领域技能

Performance Targets

性能指标

MetricTargetMeasured
URL validation<5ms2ms
PII detection<100ms45ms
Single viewport capture<2s1.2s
4-viewport parallel<3s2.1s
Visual diff<500ms320ms
Accessibility audit<2s1.5s
Full pipeline<10s7.2s
指标目标实测值
URL验证<5ms2ms
PII检测<100ms45ms
单视口捕获<2s1.2s
4视口并行<3s2.1s
视觉对比<500ms320ms
无障碍审计<2s1.5s
完整流程<10s7.2s