SuperAPI AI 工具集

playwright-visual-testing

测试与质量

查看项目

更新于 10-16 00:05

技能介绍

用途:为浏览器界面的 .NET 应用建立 Playwright 视觉回归测试,覆盖 ASP.NET Core、Blazor、WebAssembly、静态页面及生成的前端资源;也用于修复截图不匹配、基线噪声和不稳定快照,并在 GitHub Actions 中运行截图测试并输出 expected、actual、diff 产物。

主要能力:默认使用 Playwright Test 的 expect(page).toHaveScreenshot() 快照断言;当需要集中式 baseline/actual/diff 目录、非 Playwright 图像输入或自定义报告时,改用 page.screenshot() 配合 Pixelmatch 与 pngjs 独立脚本。流程为:先检查现有浏览器测试面(最近的 AGENTS.md、package.json、锁文件、Playwright 配置、测试目录、CI 工作流、应用本地启动方式如 dotnet run、Aspire AppHost、静态预览或前端开发服务器),再选择比较路径,然后让截图确定化,最后提交经审查的基线并在 CI 运行。

确定化手段:固定视口、浏览器项目、语言/时区、配色方案与设备像素比;使用稳定测试数据并等待应用就绪状态;禁用动画或使用 Playwright 截图动画选项;遮罩或隐藏广告、时间、头像、随机 ID、加载动画、第三方 iframe 等易变区域。

用法要点:用 npm ci、npx playwright install --with-deps 安装依赖与浏览器,再运行 npx playwright test 或仓库的视觉测试脚本;仅在有意接受基线变更时使用 npx playwright test --update-snapshots。PR CI 不应自动创建或更新基线,应保留 expected、actual、diff、trace 与报告产物。保持 Playwright 默认并行,不要因 CI 或截图就设 workers: 1;用 fullyParallel 与分片隔离测试。可选先跑 npx playwright test --only-changed=origin/$GITHUB_BASE_REF,但必须随后跑全量套件。

限制与注意:截图渲染随宿主操作系统、浏览器构建、字体、无头模式和硬件变化,基线须在与比较相同的环境生成与审查;CI 需显式安装浏览器依赖,默认不建议缓存浏览器二进制。失败时先看 expected、actual、diff 三图,区分设计变更、渲染不确定性、应用缺陷或基线漂移,先修不确定性再调 maxDiffPixels、maxDiffPixelRatio 或 Pixelmatch 阈值。不适用于无浏览器界面的纯 .NET 单元/集成测试,也不用于无障碍、SEO、PWA、安全头审计、浏览器调试或 JS/TS/CSS/HTML 检查。具体版本与配置细节以资料所述为准,其余暂未提供。