Cypress 视觉回归测试怎么做？

Cypress 本身不内置视觉回归功能，需借助插件实现：cypress-image-diff（轻量免费）、Percy/Chromatic（云端对比平台，付费）。核心流程是首次运行生成基准截图，后续运行做像素级 diff，差异超过阈值则判定失败。关键配置是 threshold 容忍度和动态内容排除策略。

追问

cypress-image-diff 和 Percy 怎么选？ cypress-image-diff 本地运行、零费用、适合小团队，截图存仓库；Percy 提供云端可视化审阅、多浏览器快照、PR 集成审批流，适合中大型团队。Percy 还能自动处理抗锯齿和字体渲染差异。

动态内容（日期、轮播图）导致误报怎么处理？ 三种策略：1) 截图前用 CSS 隐藏动态区域 cy.get('.carousel').invoke('css', 'visibility', 'hidden')；2) 插件的 ignore 区域配置；3) 用 cy.clock() 冻结时间，使时间戳固定。

threshold 阈值怎么设定？ 像素级对比用 0.01-0.05（严格），感知对比用 0.1-0.2（宽松）。建议核心页面 0.01，次要页面 0.1。首次跑测试建立 baseline 后再微调。

CI 环境中截图不一致怎么解决？ CI 和本地渲染差异（字体、GPU）导致误报。方案：1) Docker 统一运行环境；2) 只在 CI 中做视觉测试；3) 用 Percy 等云端工具消除本地差异；4) 禁用动画和字体反锯齿。

写段代码

javascript
// cypress-image-diff 基本用法
cy.compareSnapshot('homepage', 0.02);

// 排除动态区域
cy.get('.live-data').invoke('css', 'visibility', 'hidden');
cy.compareSnapshot('dashboard', 0.05);