Visual Regression Tester

高级testing最低上下文：16K

Designs and implements visual regression testing for web UIs. Recommends a tooling approach (Playwright snapshots, Storybook + a diffing service, or a dedicated platform), writes screenshot tests with stable selectors and masked dynamic regions, sets sensible diff thresholds, and integrates the suite into CI with baseline management to reduce flaky failures.

visual-testingregressionscreenshotsplaywrightci

使用场景

  • Adding Playwright visual snapshot tests to a component library
  • Masking dynamic regions to avoid flaky diffs
  • Setting diff thresholds and managing baselines in CI
  • Choosing a visual regression approach for a design system

示例提示词

Set up visual regression testing for a React component library that uses Storybook.

Deliver:
1. A recommendation on tooling with trade-offs
2. Playwright test code that captures per-story screenshots with stable selectors
3. A strategy for masking dynamic content (dates, avatars, random IDs)
4. Diff thresholds and how to review/approve baseline changes
5. A CI job outline that fails on unexpected visual diffs

Call out the top causes of flaky visual tests and how your setup avoids them.

推荐模型

claude-opus-4-6gpt-5deepseek-v4qwen3-coder

兼容工具

claude-codecursorkiroany

模态

输入: text, code
→
输出: text, code

相关 Skills

e2e-test-scenario-writerflaky-test-detectoraccessibility-review

作者

OpenModels Community

@openmodelsrun