qe-security-visual-testing

安全可视化测试

<default_to_action> 执行注重安全的可视化测试时：

1. 导航前验证 URL（检查是否存在恶意模式）
2. 保存屏幕截图前扫描 PII（遮蔽敏感数据）
3. 并行捕获多个视口（移动设备、平板电脑、桌面设备）
4. 与基线比较（检测视觉回归）
5. 审计无障碍性（符合 WCAG 2.1 AA）

快速安全可视化检查清单：

• URL 验证（不允许 javascript:、data:、file: 方案）
• PII 检测（电子邮件、电话、SSN、信用卡、API 密钥）
• 视觉回归（差异阈值 < 0.1%）
• 视口覆盖（320px、768px、1024px、1440px）
• 无障碍评分（axe-core 通过率 > 90%）

关键成功因素：

• 存储屏幕截图前始终遮蔽 PII
• 并行测试所有目标视口
• 将基线存储在版本控制中
• 每次视觉变更后都运行无障碍审计 </default_to_action>

快速参考卡

适用场景

场景	使用此技能？	原因
测试登录页面	是	包含 PII（密码、电子邮件）
视觉回归套件	是	并行视口 + 基线比较
支付表单	是	信用卡数据需要遮蔽
公开营销页面	也许	仅在可能包含敏感数据时
仅 API 测试	否	改用 security-testing 技能

主要功能

功能	说明	性能
URL 验证	导航前拦截恶意 URL	<5ms
PII 检测	查找 6 种以上的敏感数据	<100ms
并行视口	同时测试 4 个视口	快 4 倍
视觉回归	使用可配置阈值进行像素差异比较	<500ms
无障碍审计	符合 WCAG 2.1 A/AA/AAA	<2s

---

工作流

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

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

步骤：

1. 验证 URL 安全性（拦截恶意方案）
2. 扫描页面是否存在安全问题（XSS、注入模式）
3. 并行捕获 4 个视口的屏幕截图
4. 与存储的基线比较
5. 运行无障碍审计（axe-core）
6. 生成汇总报告

2. PII 安全屏幕截图

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

PII 检测模式：

• 电子邮件地址：[email protected]
• 电话号码：+1-555-123-4567
• 信用卡：4111-1111-1111-1111
• SSN：123-45-6789
• API 密钥：sk_live_...、AKIA...
• 密码：type="password" 的表单字段

遮蔽策略：

• 默认：高强度模糊
• 选项：redact（黑色方块）、pixelate（像素化）、blur（模糊）

3. 响应式可视化审计

# Test visual consistency across viewports
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	Full HD

---

与 AQE v3 集成

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

与 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 协调

内存命名空间

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

Fleet 协调

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

---

错误处理

错误	原因	解决方法
URL_BLOCKED	检测到恶意 URL 模式	检查 URL，移除 javascript:/data:
PII_DETECTED	在屏幕截图中发现敏感数据	启用遮蔽或手动涂黑
BASELINE_MISSING	没有可用于比较的基线	先运行 --update-baseline
VIEWPORT_TIMEOUT	浏览器未响应	增加超时时间或减少并行任务
ACCESSIBILITY_FAILED	发现 WCAG 违规	检查违规项并修复问题

---

相关技能

• visual-testing-advanced - 不含安全功能的纯可视化测试
• security-testing - 不含可视化组件的安全测试
• accessibility-testing - 仅进行无障碍测试
• qe-visual-accessibility - AQE v3 可视化领域技能

---

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