Visual Regression Testing

Visual Regression Testing with SmartUI

When to Use

• Reviewing visual changes between builds
• Investigating pixel, layout, or DOM differences in UI screenshots
• Analyzing a full SmartUI test run for visual regressions
• Understanding what changed visually in your application

MCP Tools Used

• getSmartUIScreenshotInfo - Get screenshot metadata and comparison details
• getSmartUIResources - Fetch comparison resources (baseline vs current)
• downloadSmartUIDomFiles - Download DOM structure for comparison
• summarizeSmartUIPixelDiff - Analyze pixel-level visual changes
• summarizeSmartUILayoutDiff - Analyze layout and structural changes
• summarizeSmartUIDomDiff - Analyze DOM/code-level changes
• analyzeSmartUIHumanDiff - Get human-readable visual change descriptions
• analyzeSmartUIRun - Comprehensive analysis of an entire test run

Steps

1. Analyze a Full Test Run

Use analyzeSmartUIRun for a comprehensive overview:

"Analyze SmartUI run for build abc123"
"Show me all visual changes in my latest SmartUI run"

What the tool does:

• Summarizes all screenshots with changes
• Categorizes changes by severity
• Highlights critical visual regressions

2. Inspect Individual Screenshots

Use getSmartUIScreenshotInfo to get details on a specific screenshot:

"Get SmartUI screenshot info for screenshot ID xyz789"
"Show me comparison details for this screenshot"

3. Analyze Specific Diff Types

Choose the right diff type based on what you need:

Pixel Diff — exact visual pixel changes:

"Summarize pixel differences for SmartUI screenshot xyz789"
"Show me pixel-level changes between baseline and current"

Layout Diff — structural/positioning changes:

"Summarize layout differences for SmartUI screenshot xyz789"
"What layout changes happened in this screenshot?"

DOM Diff — code-level changes in the DOM:

"Summarize DOM differences for SmartUI screenshot xyz789"
"What HTML/CSS changes caused the visual diff?"

Human Diff — natural language explanation:

"Give me a human-readable analysis of SmartUI screenshot xyz789"
"Explain what changed visually in this screenshot"

4. Download DOM Files

Use downloadSmartUIDomFiles for deep code-level comparison:

"Download DOM files for SmartUI screenshot xyz789"
"Get baseline and current DOM structures for comparison"

Common Scenarios

Review Full Test Run:

"Analyze my SmartUI run abc123"
→ Returns summary of all visual changes across screenshots
→ Highlights critical regressions vs expected changes

Investigate a Specific Change:

"Get info for SmartUI screenshot xyz789"
"Summarize pixel diff for screenshot xyz789"
"Explain what changed in human terms"

Debug Layout Issues:

"Summarize layout diff for screenshot xyz789"
"Download DOM files for screenshot xyz789"
"What CSS changes caused this layout shift?"

Example Workflow

User: "Review visual changes in my latest SmartUI build"

Steps:

1. Run overview: "Analyze SmartUI run for build abc123"
2. Identify flagged screenshots with significant changes
3. Deep dive: "Summarize pixel diff for screenshot xyz789"
4. Understand root cause: "Summarize DOM diff for screenshot xyz789"
5. Human summary: "Give me a human-readable analysis of the changes"
6. Approve or flag the changes

Quick Tips

• Start with analyzeSmartUIRun for a high-level overview of all changes
• Use pixel diff for exact visual comparisons
• Use layout diff for structural/positioning changes
• Use DOM diff to understand what code changes caused the visual diff
• Human diff provides natural language explanations of visual changes
• SmartUI caches results for 60 minutes for faster repeated access