名称: 安全视觉测试描述: “以安全为先的视觉测试，结合URL验证、PII检测和视觉回归，支持并行视口。用于测试处理敏感数据的web应用程序、需要视觉回归覆盖或要求WCAG可访问性合规性的情况。” 类别: 专项测试优先级: 高令牌估计: 1400 代理: [qe-visual-tester, qe-security-scanner, qe-accessibility-auditor] 实现状态: 稳定优化版本: 1.0 最后优化: 2026-01-21 依赖项: [视觉测试高级版, 安全测试, 可访问性测试] 快速参考卡: true 标签: [安全, 视觉测试, pii, 可访问性, wcag, 并行视口, 回归] 信任等级: 3 验证: 架构路径: schemas/output.json 验证器路径: scripts/validate-config.json 评估路径: evals/security-visual-testing.yaml

安全视觉测试

<默认操作> 执行安全感知的视觉测试时：

在导航前验证URL（检查恶意模式）
在保存屏幕截图前扫描PII（屏蔽敏感数据）
捕获并行视口（移动设备、平板、桌面）
与基线比较（检测视觉回归）
审计可访问性（WCAG 2.1 AA 合规性）

快速安全视觉检查清单：

URL验证（无javascript:、data:、file: 方案）
PII检测（电子邮件、电话号码、社保号、信用卡、API密钥）
视觉回归（差异阈值 < 0.1%）
视口覆盖（320px、768px、1024px、1440px）
可访问性评分（> 90% axe-core 通过率）

关键成功因素：

在存储屏幕截图前始终屏蔽PII
并行测试所有目标视口
将基线存储在版本控制中
每次视觉更改都运行可访问性审计 </默认操作>

快速参考卡

何时使用

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

关键能力

能力	描述	性能
URL验证	导航前阻止恶意URL	<5ms
PII检测	查找6+种敏感数据类型	<100ms
并行视口	同时测试4个视口	4x 更快
视觉回归	像素差异，可配置阈值	<500ms
可访问性审计	WCAG 2.1 A/AA/AAA 合规性	<2s

工作流程

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

# 运行完整安全 + 视觉审计
aqe test visual-audit --url https://example.com --security --accessibility

步骤：

验证URL安全性（阻止恶意方案）
扫描页面安全问题（XSS、注入模式）
并行捕获4个视口的屏幕截图
与存储的基线比较
运行可访问性审计（axe-core）
生成整合报告

2. PII安全屏幕截图

# 使用自动PII屏蔽捕获屏幕截图
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...
密码：类型为“password”的表单字段

屏蔽策略：

默认：高强度模糊
选项：redact（黑色框）、pixelate、blur

3. 响应式视觉审计

# 测试视口间的视觉一致性
aqe test responsive --url https://example.com --viewports mobile,tablet,desktop

默认视口：

名称	宽度	高度	设备
移动设备	320px	568px	iPhone SE
平板	768px	1024px	iPad
桌面	1440px	900px	MacBook
宽屏	1920px	1080px	全高清

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

// 记录测试轨迹用于学习
await adapter.startTrajectory('security-visual-test', {
  url: 'https://example.com',
  testType: 'security-visual'
});

// ... 执行测试 ...

await adapter.endTrajectory(trajectoryId, {
  success: true,
  piiFound: 3,
  visualRegressions: 0,
  accessibilityScore: 95
});

代理协调

内存命名空间

aqe/security-visual/
├── baselines/*          - 视觉回归基线
├── screenshots/*        - 捕获的屏幕截图（PII已屏蔽）
├── reports/*            - 审计报告
└── trajectories/*       - 学习轨迹

舰队协调

const fleet = await FleetManager.coordinate({
  strategy: 'security-visual-audit',
  agents: [
    'qe-visual-tester',      // 视觉回归
    'qe-security-scanner',   // URL/PII扫描
    'qe-accessibility-auditor' // WCAG合规性
  ],
  topology: 'parallel',
  maxConcurrent: 4
});

错误处理

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

性能目标

指标	目标	实测
URL验证	<5ms	2ms
PII检测	<100ms	45ms
单视口捕获	<2s	1.2s
4视口并行	<3s	2.1s
视觉差异	<500ms	320ms
可访问性审计	<2s	1.5s
完整流程	<10s	7.2s

安全视觉测试Skill security-visual-testing