How It Works

ViSnap catches visual changes in your UI through a simple yet powerful workflow that compares screenshots over time.

The Testing Process

1. Establishing Baselines

First, you create baseline screenshots - these are your "source of truth" screenshots that represent the correct appearance of your UI. Running visnap update captures these baseline screenshots under controlled conditions.

2. Capturing Test Snapshots

During testing, visnap test takes fresh screenshots of your current UI using the exact same conditions as your baselines. This ensures fair comparisons between what you expect and what actually renders.

3. Detecting Changes

ViSnap automatically compares each new snapshot against its corresponding baseline. When differences exceed your configured threshold, it generates diff images that visually highlight exactly what changed - making it easy to spot both intended updates and unexpected regressions.

Results & Storage

All images (baseline screenshots, current snapshots, and diffs) are saved to your filesystem according to your configuration settings. You can browse these files directly in your file explorer for detailed inspection.

Beyond raw files, ViSnap provides two complementary reporting formats:

• HTML Report: Interactive visual comparisons with side-by-side views and highlighted differences
• JSON Report: Structured data perfect for CI/CD pipelines and automated decision-making

Next Steps

• Getting Started - Set up ViSnap for your project
• Adapters Overview - Learn about browser and test source adapters
• Comparison Engines - Understand how visual differences are detected