张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
201 lines
6.5 KiB
Markdown
201 lines
6.5 KiB
Markdown
# 视觉测试标准与验收准则
|
||
|
||
## 1. 概述
|
||
|
||
本文档定义了 Novalon 官网项目的视觉测试标准、验收准则和测试流程，确保用户界面在不同设备、浏览器和屏幕尺寸下的视觉一致性和正确性。
|
||
|
||
## 2. 测试范围
|
||
|
||
### 2.1 视觉元素覆盖
|
||
|
||
| 类别 | 测试内容 | 测试方式 |
|
||
|------|---------|---------|
|
||
| 页面布局 | 网格系统、间距、对齐方式、响应式断点 | 全页截图对比 |
|
||
| 色彩显示 | 品牌色、功能色、文本色、背景色 | CSS 变量验证 + 截图对比 |
|
||
| 字体样式 | 字体族、字号、字重、行高、字间距 | 计算样式检查 + 截图对比 |
|
||
| 图片渲染 | 图片加载、尺寸比例、清晰度、懒加载 | 截图对比 + 元素可见性检查 |
|
||
| 交互状态 | hover、focus、active、disabled 状态 | 组件截图对比 |
|
||
| 动画效果 | 过渡动画、加载动画、微交互 | 动画禁用后截图对比 |
|
||
| 主题切换 | 浅色/深色主题切换 | 主题切换后截图对比 |
|
||
| 响应式适配 | 桌面、平板、移动端布局 | 多视口截图对比 |
|
||
|
||
### 2.2 测试页面（12 个核心页面）
|
||
|
||
1. 首页 (`/`)
|
||
2. 关于我们 (`/about`)
|
||
3. 联系我们 (`/contact`)
|
||
4. 产品中心 (`/products`)
|
||
5. 产品详情 (`/products/erp`)
|
||
6. 解决方案列表 (`/solutions`)
|
||
7. 解决方案详情 (`/solutions/manufacturing`)
|
||
8. 服务列表 (`/services`)
|
||
9. 服务详情 (`/services/software`)
|
||
10. 新闻列表 (`/news`)
|
||
11. 新闻详情 (`/news/company-founded`)
|
||
12. 团队介绍 (`/team`)
|
||
|
||
### 2.3 测试矩阵
|
||
|
||
| 维度 | 配置 |
|
||
|------|------|
|
||
| 浏览器 | Chromium (Chrome)、Firefox、WebKit (Safari) |
|
||
| 视口尺寸 | 桌面 1280×800、平板 834×1194、移动端 390×844 |
|
||
| 主题 | 浅色主题、深色主题 |
|
||
| 设备类型 | 桌面端、平板端、移动端（含触摸支持） |
|
||
|
||
## 3. 测试层级
|
||
|
||
### L1: 全页面视觉回归测试
|
||
|
||
**目标**: 检测整页布局的意外变化
|
||
|
||
**测试方法**:
|
||
- 使用 Playwright `toHaveScreenshot` 进行全页截图对比
|
||
- 每个核心页面生成基线截图
|
||
- 每次代码变更后与基线对比
|
||
|
||
**验收标准**:
|
||
- 像素差异率 ≤ 0.5%
|
||
- 最大差异像素数 ≤ 200px
|
||
- 允许的差异区域：动态内容（时间、随机数等）、第三方组件
|
||
|
||
### L2: 组件级视觉状态测试
|
||
|
||
**目标**: 验证 UI 组件在不同状态下的视觉表现
|
||
|
||
**测试组件**:
|
||
- 按钮：默认、悬停、聚焦、禁用
|
||
- 导航菜单：桌面端、移动端展开
|
||
- 卡片组件：默认、悬停
|
||
- 表单输入：默认、聚焦、错误状态
|
||
- 页头页脚：品牌一致性
|
||
|
||
**验收标准**:
|
||
- 状态变化有明确的视觉反馈
|
||
- 色彩过渡自然，无突兀跳变
|
||
- 聚焦环可见且符合 WCAG 标准
|
||
|
||
### L3: 排版与色彩验证
|
||
|
||
**目标**: 确保品牌视觉规范的一致性
|
||
|
||
**验证内容**:
|
||
- H1-H6 标题字体样式
|
||
- 正文文本可读性
|
||
- 品牌主色调准确性
|
||
- 色彩对比度符合 WCAG AA 标准
|
||
|
||
**验收标准**:
|
||
- 品牌色值误差 ≤ 5%
|
||
- 标题字号层级清晰
|
||
- 文本对比度 ≥ 4.5:1（普通文本）
|
||
- 大文本对比度 ≥ 3:1（18pt 或 14pt 加粗）
|
||
|
||
## 4. 验收准则
|
||
|
||
### 4.1 通过标准
|
||
|
||
视觉测试通过需同时满足以下条件：
|
||
|
||
1. **L1 全页回归**: 100% 页面通过像素对比（差异在允许范围内）
|
||
2. **L2 组件状态**: 100% 组件状态测试通过
|
||
3. **L3 排版色彩**: 品牌色和字体样式符合规范
|
||
4. **跨浏览器**: Chromium、Firefox、WebKit 三大浏览器无布局断裂
|
||
5. **响应式**: 桌面、平板、移动三端布局正常，无内容溢出或重叠
|
||
|
||
### 4.2 严重等级定义
|
||
|
||
| 等级 | 定义 | 示例 | 修复时限 |
|
||
|------|------|------|---------|
|
||
| P0 - 阻塞 | 页面无法正常渲染、内容缺失或严重错位 | 首页白屏、导航栏消失 | 立即修复 |
|
||
| P1 - 严重 | 核心功能区域视觉异常，影响用户理解或操作 | 表单无法识别、按钮不可见 | 24 小时内 |
|
||
| P2 - 中等 | 非核心区域视觉问题，不影响主要功能 | 间距不一致、颜色轻微偏差 | 本周内 |
|
||
| P3 - 轻微 | 细节优化，不影响功能和可读性 | 边框圆角差异、字重细微不同 | 下个迭代 |
|
||
|
||
### 4.3 可接受的差异
|
||
|
||
以下情况的视觉差异属于可接受范围：
|
||
|
||
1. **字体渲染差异**: 不同操作系统/浏览器的字体抗锯齿差异
|
||
2. **亚像素差异**: 1px 级别的渲染差异（非布局性）
|
||
3. **动态内容**: 日期、随机数等动态数据（需在测试中 mask）
|
||
4. **图片压缩**: 不同浏览器的图片解码细微差异
|
||
5. **滚动条样式**: 操作系统级别的滚动条样式差异
|
||
|
||
## 5. 测试流程
|
||
|
||
### 5.1 基线建立流程
|
||
|
||
1. 确保代码处于稳定状态（主分支最新代码）
|
||
2. 运行 `npm run test:visual:update` 生成基线截图
|
||
3. 人工审核所有基线截图的视觉正确性
|
||
4. 将基线截图提交到版本库
|
||
|
||
### 5.2 日常测试流程
|
||
|
||
1. 代码提交前运行 `npm run test:visual` 进行桌面端 Chromium 测试
|
||
2. CI/CD 中运行完整的视觉测试套件（所有浏览器和视口）
|
||
3. 测试失败时生成差异报告
|
||
4. 开发人员确认是 bug 还是预期变更
|
||
5. 预期变更则更新基线，bug 则修复代码
|
||
|
||
### 5.3 人工验证流程
|
||
|
||
1. 自动化测试通过后，进行关键页面的人工抽查
|
||
2. 重点检查：品牌一致性、信息层次、可读性、交互反馈
|
||
3. 记录发现的视觉问题并跟踪修复
|
||
|
||
## 6. 工具与命令
|
||
|
||
### 6.1 可用命令
|
||
|
||
```bash
|
||
# 桌面端 Chromium 视觉测试（快速验证）
|
||
npm run test:visual
|
||
|
||
# 完整视觉测试（所有浏览器和视口）
|
||
npm run test:visual:all
|
||
|
||
# 更新基线截图
|
||
npm run test:visual:update
|
||
|
||
# 移动端视觉测试
|
||
npm run test:visual:mobile
|
||
|
||
# 平板端视觉测试
|
||
npm run test:visual:tablet
|
||
|
||
# 跨浏览器桌面端测试
|
||
npm run test:visual:browsers
|
||
```
|
||
|
||
### 6.2 测试配置
|
||
|
||
- **测试框架**: Playwright
|
||
- **截图目录**: `e2e/visual-snapshots/`
|
||
- **测试报告**: `e2e/playwright-report/`
|
||
- **像素差异阈值**: 0.5% 或 200px（取较宽松者）
|
||
- **动画处理**: 测试时禁用 CSS 动画
|
||
|
||
## 7. 维护与更新
|
||
|
||
### 7.1 基线更新时机
|
||
|
||
- 发布新功能或 UI 重构后
|
||
- 品牌视觉规范更新后
|
||
- 修复视觉 bug 并验证后
|
||
- 依赖库升级导致合理视觉变化后
|
||
|
||
### 7.2 测试用例维护
|
||
|
||
- 新增页面时同步添加 L1 全页测试
|
||
- 新增组件时添加 L2 组件状态测试
|
||
- 品牌色更新时调整 L3 验证标准
|
||
- 定期 review 测试覆盖率
|
||
|
||
## 8. 参考资料
|
||
|
||
- [Playwright Visual Testing](https://playwright.dev/docs/test-snapshots)
|
||
- [WCAG 2.1 对比度指南](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum)
|
||
- 项目品牌设计规范
|