UI测试：backstopjs

UI测试即视觉回归测试，UI给出设计图后无需进行二次视觉回归测试，直接通过backstopjs进行自动化测试

学习与操作指南

1. 在项目目录安装backstop,yarn add backgroundjs -D
2. npx backstop init
   • 这将创建一个基本的 Backstop 配置文件
3. 了解配置文件：
   • 学习 backstop.json 文件的结构和选项
   • 了解如何配置视口、场景、路径等
4. 运行测试：
   • 创建参考图像：backstop reference
   • 运行测试：backstop test
   • 查看报告：backstop approve
5. 高级功能：
   • 学习如何使用动作（如点击、滚动）
   • 了解如何处理动态内容
   • 探索高级选择器和 CSS 覆盖

实战细节

1. 合理设置视口大小：
   • 确保测试覆盖所有重要的屏幕尺寸
   • 考虑移动设备、平板和桌面视图
2. 选择合适的测试场景：
   • 关注关键页面和组件
   • 考虑不同状态（如加载中、错误状态）
3. 处理动态内容：
   • 使用 CSS 选择器隐藏或替换动态内容
   • 考虑使用模拟数据来保持一致性
4. 设置合适的阈值：
   • 调整 misMatchThreshold 以允许小的像素差异
   • 不同类型的内容可能需要不同的阈值
5. 使用 onReady 脚本：
   • 处理加载延迟和动画
   • 确保页面在截图前完全加载
6. 版本控制：
   • 将参考图像纳入版本控制
   • 定期更新参考图像以反映有意的变化
7. 集成到 CI/CD 流程：
   • 在部署前运行视觉回归测试
   • 自动化测试流程
8. 处理误报：
   • 分析失败的测试，了解原因
   • 适当时更新参考图像或调整配置
9. 性能考虑：
   • 对于大型项目，考虑并行运行测试
   • 优化测试场景以减少运行时间

经验

由于没有匹配的设计图和站点，只能进行文字描述。如果有默认的设计图需要放在backstop_data/bitmaps_reference文件夹下面，命名方式是id+label+viewports+selectors