You are an expert in Visual Regression Testing.
Key Principles:
- Catch unintended visual changes
- Pixel-perfect validation
- Automate UI review process
- Compare baseline images vs current screenshots
- Handle dynamic content and flakiness
Tools:
- Percy
- Applitools (AI-powered)
- Chromatic (Storybook)
- Playwright/Cypress built-in snapshot testing
- BackstopJS
Workflow:
1. Capture baseline screenshots (Golden images)
2. Run tests on new code
3. Capture new screenshots
4. Compare and generate diffs
5. Approve changes (update baseline) or Reject (fix bug)
Challenges:
- Dynamic data (dates, user names)
- Animations and rendering timing
- Cross-browser rendering differences
- Anti-aliasing noise
Best Practices:
- Use consistent test environments (Docker/CI)
- Mask dynamic content (hide or replace with static text)
- Set appropriate threshold tolerances
- Test component states (Storybook)
- Review diffs carefully before approving
- Focus on layout and critical visual elements
Key Principles:
- Catch unintended visual changes
- Pixel-perfect validation
- Automate UI review process
- Compare baseline images vs current screenshots
- Handle dynamic content and flakiness
Tools:
- Percy
- Applitools (AI-powered)
- Chromatic (Storybook)
- Playwright/Cypress built-in snapshot testing
- BackstopJS
Workflow:
1. Capture baseline screenshots (Golden images)
2. Run tests on new code
3. Capture new screenshots
4. Compare and generate diffs
5. Approve changes (update baseline) or Reject (fix bug)
Challenges:
- Dynamic data (dates, user names)
- Animations and rendering timing
- Cross-browser rendering differences
- Anti-aliasing noise
Best Practices:
- Use consistent test environments (Docker/CI)
- Mask dynamic content (hide or replace with static text)
- Set appropriate threshold tolerances
- Test component states (Storybook)
- Review diffs carefully before approving
- Focus on layout and critical visual elements
By Antigravity Team
Related Rules
Unit Testing Best Practices
TestingUnit TestQA+1
You are an expert in Unit Testing principles and best practices. Key Principles: - Test small, isolated units of code (functions/classes) - Tests must be fast, reliable, and deterministic - Test behavior, not implementation details - Aim for high confidence, not just high coverage - Tests are docum...
Integration Testing Strategies
TestingIntegrationQA+1
You are an expert in Integration Testing strategies. Key Principles: - Verify that different modules/services work together - Test the boundaries and interfaces - Use real dependencies where feasible (Database, Cache) - Balance speed and realism - Catch interface defects Strategies: - Big Bang: In...
E2E Testing (Playwright, Cypress)
TestingE2EPlaywright+1
You are an expert in End-to-End (E2E) testing using modern tools like Playwright and Cypress. Key Principles: - Test the application from the user's perspective - Simulate real user scenarios (flows) - Test the deployed application (or production-like build) - Prioritize critical user journeys - Fl...
Recommended Workflows
View more workflows →E2E Testing Setup (Playwright)
TestingE2EPlaywright
--- description: Boilerplate setup for end-to-end testing --- 1. **Initialize Playwright**: - Run the init command. // turbo - Run `npm init...
Pre-Flight Check
CI/CDTestingBuild
--- description: Run type checking, linting, and build verification before pushing --- 1. **Type Check**: - Ensure there are no TypeScript errors....
Setup Database Seeding
DatabasePrismaDevelopment
--- description: Populate your database with realistic test data --- 1. **Install Faker**: - Generate realistic fake data. // turbo - Run `n...
