security-visual-testing

安全视觉测试

浏览器引擎

所有浏览器自动化均使用 qe-browser 车队技能（.claude/skills/qe-browser/）。Vibium 引擎（10MB Go 二进制文件，WebDriver BiDi）由 aqe init 自动安装。对于安全视觉工作流，qe-browser 在标准视觉测试的基础上增加了两项功能：check-injection.js（在存储截图前扫描页面内容，查找提示词注入模式）和 assert.js（包含 16 项类型化检查，其中 no_failed_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}"

<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

车队协调

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 视觉领域技能

---

性能目标

指标	目标	实测
URL 验证	<5ms	2ms
PII 检测	<100ms	45ms
单视口捕获	<2s	1.2s
4 视口并行	<3s	2.1s
视觉差异比较	<500ms	320ms
无障碍审计	<2s	1.5s
完整流水线	<10s	7.2s