TurboSnap

Overview

TurboSnap dramatically reduces visual testing time by only capturing and comparing screenshots for components that have actually changed. On typical PRs, it skips 60-80% of screenshots.

How it works

Git Merge Base → Changed Files → File→Component Mapping → Affected Screenshots

Step 1: Find the merge base

git merge-base HEAD origin/main

This finds the common ancestor commit between your branch and the base branch, establishing the starting point for change detection.

Step 2: Get changed files

git diff --name-only <merge-base>..HEAD

Lists all files that have changed since the branch diverged.

Step 3: Map files to screenshots

Each changed file is mapped to the screenshots it could affect:

Step 4: Filter screenshots

Only screenshots with at least one affected file are captured and compared. Everything else is skipped.

Global dependencies

Some files affect the entire application. When these change, TurboSnap falls back to testing everything:

turboSnap:
  globalDeps:
    - "src/styles/**" # Global CSS
    - "tailwind.config.*" # Tailwind config
    - "package.json" # Dependencies
    - "src/lib/theme/**" # Theme system

Configuration

turboSnap:
  enabled: true
  baseBranch: "main" # Branch to compare against
  globalDeps:
    - "src/styles/**"
  includeUntracked: false # Include new untracked files

CLI usage

Standalone analysis

npx ui-inspect turbosnap --base-branch main

During builds

npx ui-inspect build --project proj_id --turbosnap

CI considerations

• Set fetch-depth: 0 in your checkout step (GitHub Actions) so the full git history is available
• TurboSnap requires a clean git state — uncommitted changes may affect results
• First build on a new branch always tests everything (no merge-base to compare against)

Performance impact