Visual Regression

The Visual Regression step captures screenshots of your pages and compares them over time to detect visual changes.

Overview

Visual Regression testing catches changes that other tests might miss:

• Layout shifts
• Color changes
• Font changes
• Missing or moved elements
• Broken images
• CSS regressions

How It Works

1. Capture Baseline: Take a screenshot of each page in its "correct" state
2. Run Comparison: Take new screenshots and compare pixel-by-pixel
3. AI Analysis: If differences found, AI determines if they're real issues or expected changes
4. Review Results: See diff images highlighting what changed

The Baselines Tab

Viewing Baselines

The Baselines tab shows all captured baseline screenshots:

• Page URL
• Baseline image thumbnail
• Viewport size
• Last comparison status
• Configuration settings

Baseline Information

Each baseline displays:

• Screenshot: Visual preview of the baseline
• Page: Source page URL
• Viewport: Screen dimensions (e.g., 1920x1080)
• Threshold: Allowed pixel difference percentage
• Wait Time: Milliseconds to wait after page load
• Last Result: Pass/Fail from most recent comparison

Capturing Baselines

Auto Capture (Page Snap)

Simple screenshot capture:

1. Click "Capture Baseline" on a page
2. Select "Auto (Page Snap)" mode
3. Configure settings:
   • Wait after load: Time to wait for content (default 2000ms)
   • Viewport: Screen size to capture
4. Click "Capture"

Record & Snap

For pages that require interaction before capturing:

1. Click "Capture Baseline"
2. Select "Record & Snap" mode
3. Enter your Chrome Extension ID
4. Record prerequisite actions:
   • Navigate to the page
   • Click to open modals/menus
   • Fill forms to specific states
   • Scroll to specific content
5. Capture when the page is in the desired state
6. Save the recording with the baseline

When to Use Record & Snap

• Pages behind authentication
• Content that appears after scrolling
• Modal or dropdown states
• Form validation states
• Multi-step processes

Baseline Configuration

Viewport Settings

Choose the screen size for capture:

• Desktop (1920x1080)
• Tablet (768x1024)
• Mobile (375x667)
• Custom dimensions

Threshold Settings

Set the allowed difference percentage:

• 0%: Exact pixel match required
• 1-5%: Small differences allowed (recommended)
• 5-10%: More tolerance for dynamic content
• Higher values = more tolerance

Wait Time

Time to wait after page loads:

• 1000-2000ms: Fast-loading pages
• 3000-5000ms: Pages with animations
• 5000ms+: Heavy JavaScript apps

Running Comparisons

Single Page Comparison

1. Find the baseline in the list
2. Click "Compare"
3. QAID:
   • Captures current state
   • Compares against baseline
   • Applies threshold
   • Runs AI analysis if different
4. View result

Batch Comparison

1. Click "Run All Comparisons"
2. All baselines are compared
3. View summary of results

The Comparisons Tab

Viewing Results

The Comparisons tab shows comparison history:

• Timestamp
• Page URL
• Status (Passed/Failed)
• Mismatch percentage
• AI analysis result

Comparison Details

Click a comparison to see:

• Baseline Image: The expected state
• Current Image: What was captured
• Diff Image: Highlighted differences (red = changed pixels)
• Mismatch %: Percentage of different pixels
• AI Analysis: Whether changes are dynamic or real issues

AI Analysis of Changes

When differences are detected, QAID's AI evaluates whether the change is a real issue or expected dynamic content (timestamps, counters, live data).

Analysis Results

Managing Baselines

Updating a Baseline

When legitimate changes occur:

1. Find the baseline
2. Click "Recapture"
3. New baseline is saved
4. Old baseline is replaced

Deleting Baselines

1. Select baselines to delete
2. Click "Delete Selected"
3. Confirm deletion

Batch Operations

• Select multiple baselines
• Delete all selected
• Run comparisons on selected

Real-Time Reporting

During comparison jobs:

• See progress as each page is compared
• Immediate pass/fail indicators
• Live updating results
• Can cancel running jobs

Best Practices

Setting Up Baselines

• Capture when site is in a stable state
• Use consistent viewport sizes
• Set appropriate wait times
• Start with moderate thresholds (2-3%)

Handling Dynamic Content

• Use Record & Snap for consistent states
• Consider page-specific thresholds
• Mark known dynamic areas
• Review AI analysis results

Maintenance

• Update baselines after intentional changes
• Review failed comparisons promptly
• Keep threshold settings appropriate
• Remove baselines for deleted pages

Troubleshooting

Many False Positives

Possible causes:

• Dynamic content (dates, times, counters)
• A/B testing
• User-specific content
• Animations captured mid-frame

Solutions:

• Increase wait time for animations
• Use Record & Snap for consistent states
• Adjust threshold higher
• Review AI analysis for patterns

Baseline Not Capturing Correctly

Possible causes:

• Page not fully loaded
• JavaScript still rendering
• Authentication issues
• Network timeouts

Solutions:

• Increase wait time
• Check authentication settings
• Verify page loads manually
• Check network connectivity

Differences Not Detected

Possible causes:

• Threshold too high
• Changes below detection limit
• Anti-aliasing differences ignored

Solutions:

• Lower threshold percentage
• Check comparison settings
• Manually inspect both images

Record & Snap Not Working

Prerequisites:

• Chrome Extension installed
• Extension ID configured in QAID
• Extension enabled on the target site

Check:

• Extension ID is correct
• Extension has permissions
• Browser isn't blocking the extension

Related Topics

• Page Discovery - Pages must be discovered first
• Chrome Extension - Required for Record & Snap
• Settings - Configure default settings