docs(test): 添加设计文档、测试规范与 E2E 测试套件

- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
2026-07-07 06:54:25 +08:00
parent 8def296301
commit 636bc4ecde
31 changed files with 9262 additions and 41 deletions
@@ -0,0 +1,200 @@
+# 视觉测试标准与验收准则
+
+## 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)
+- 项目品牌设计规范