Stooland Docs

Appearance

测试工具使用指南 ​

概述 ​

本文档介绍了完整的测试工具体系，基于 Playwright 框架实现，包含 P0（核心）、P1（用户体验）、P2（质量保障）和 P3（完整性）优先级的测试工具，适用于项目中的所有前端应用。

测试体系概览 ​

优先级测试类型说明
P0核心测试E2E 功能测试、控制台分析
P1用户体验测试性能测试、响应式测试
P2质量保障测试视觉回归测试、可访问性测试
P3完整性测试跨浏览器测试、安全测试

项目覆盖 ​

  • hotel-web: 已完整实现（参考：hotel-web/test/playwright/）
  • storyboard-web: 已实现（参考：storyboard-web/test/playwright/）
  • admin: 已实现（参考：admin/test/playwright/）

测试工具类型 ​

1. 视觉回归测试 ​

视觉回归测试通过对比屏幕截图来检测 UI 变更，确保代码修改不会意外破坏应用的视觉表现。

功能特性 ​

  • 自动创建基准截图
  • 对比新旧截图差异
  • 生成详细的测试报告
  • 支持多页面测试

使用方法 ​

安装依赖

bash
# 进入项目目录
cd <project-dir>

# 安装 Playwright 浏览器
npm run test:install

创建基准截图

bash
# 首次运行会自动创建基准截图
npm run test:visual

运行视觉回归测试

bash
# 对比当前截图与基准截图
npm run test:visual

测试报告

  • 截图保存在：test/visual-reports/
  • 基准截图保存在：test/visual-baseline/
  • JSON 报告：test/visual-reports/visual-report-latest.json

2. 可访问性测试 ​

可访问性测试检查应用是否符合 WCAG（Web Content Accessibility Guidelines）标准，确保应用对所有用户都可访问。

功能特性 ​

  • 检查 HTML lang 属性
  • 验证图片 alt 属性
  • 检查按钮可访问名称
  • 验证输入框标签
  • 按严重程度分类问题（Critical/Serious/Moderate/Minor）

使用方法 ​

运行可访问性测试

bash
# 进入项目目录
cd <project-dir>

# 运行可访问性测试
npm run test:a11y

测试报告

  • JSON 报告保存在：test/a11y-reports/
  • 最新报告：test/a11y-reports/a11y-report-latest.json

项目配置 ​

storyboard-web ​

  • 开发服务器地址：http://localhost:3000
  • 测试页面：
    • / - 仪表盘
    • /login - 登录页

admin ​

  • 开发服务器地址：http://localhost:3001
  • 测试页面：
    • / - 仪表盘
    • /login - 登录页

hotel-web ​

  • 开发服务器地址：http://localhost:3800
  • 已包含完整测试套件

扩展测试页面 ​

如需添加更多测试页面，编辑对应项目的测试脚本：

视觉回归测试：test/playwright/visual-regression-tester.js

javascript
const allPages = [
  { path: '/', name: 'dashboard' },
  { path: '/login', name: 'login' },
  { path: '/your-page', name: 'your-page-name' }, // 添加新页面
]

可访问性测试：test/playwright/a11y-tester.js

javascript
const allPages = [
  { path: '/', name: 'dashboard' },
  { path: '/login', name: 'login' },
  { path: '/your-page', name: 'your-page-name' }, // 添加新页面
]

最佳实践 ​

  1. 定期运行测试：在每次代码提交前运行视觉回归测试
  2. 更新基准截图：当 UI 有预期变更时，删除 test/visual-baseline/ 中的对应截图重新生成
  3. 修复可访问性问题：优先修复 Critical 和 Serious 级别的问题
  4. 集成到 CI/CD：将测试集成到持续集成流程中

P3 - 完整性测试（规划中） ​

跨浏览器测试 ​

  • 目标：覆盖长尾用户，确保在主流浏览器中的兼容性
  • 浏览器：Chrome、Firefox、Safari、Edge
  • 测试内容：
    • 功能一致性验证
    • CSS 渲染兼容性
    • JavaScript 行为一致性
    • 移动端浏览器适配

安全测试 ​

  • 目标：定期安全审计，识别潜在安全漏洞
  • 测试内容：
    • XSS 漏洞检测
    • CSRF 防护验证
    • 敏感数据泄露检查
    • 认证与授权机制验证
    • CSP（内容安全策略）配置检查

相关文件 ​

  • hotel-web 测试示例：hotel-web/test/playwright/
  • storyboard-web 测试：storyboard-web/test/playwright/
  • admin 测试：admin/test/playwright/
  • hotel-web 完整测试文档：docs/hotel-web/test.md