World of QA2026-04-18 22:36

107 challenges

Visual Regression Lab

Snapshot Diffs & Pixel Comparison

15 challenges covering pixel-perfect comparison, responsive breakpoints, dynamic content handling, and advanced visual diff techniques.

Pixel comparison(5)

Pixel Perfect Button

easy

Detect padding differences between two buttons. The baseline has 16px padding, the current version has 12px.

baseline:: Button with 16px padding
current:: Button with 12px padding

Tips (3)

Look for subtle size differences
Focus on the button boundaries
Use pixel threshold of 0% for exact matching

Color Shift Detection

easy

Find a subtle color change from #2563EB to #2462E9. Can you spot 1 shade difference?

baseline:: Element with #2563EB blue
current:: Element with #2462E9 blue (1 shade different)

Tips (3)

Color differences may be invisible to human eye
Use a low threshold (1-5%) for color detection
The diff overlay will highlight changed pixels

Font Change Detection

easy

Detect a font-weight change from 400 (normal) to 500 (medium). Subtle but important!

baseline:: Text with font-weight: 400
current:: Text with font-weight: 500

Tips (3)

Font weight changes affect text thickness
Look at the edges of characters
Use overlay mode for clear comparison

Layout Shift

medium

An element has shifted 5px to the left. Find and measure the shift.

baseline:: Element in original position
current:: Element shifted 5px left

Tips (3)

Layout shifts can cause visual instability
Use the slider mode to see the difference
Check element alignment carefully

Dark Mode Comparison

medium

Compare light theme vs dark theme. Verify color scheme transitions.

baseline:: Light theme version
current:: Dark theme version

Tips (3)

Check text contrast in both modes
Background colors should differ significantly
Icons may need inverted colors

Responsive(1)

Responsive Breakpoint

medium

Compare desktop (1024px) vs tablet (768px) layouts. Verify the responsive design.

baseline:: Desktop layout at 1024px
current:: Tablet layout at 768px

Tips (3)

Elements may reflow at breakpoints
Check column count and element order
Verify spacing adjustments

Dynamic content(3)

Hover State Comparison

medium

Compare default state vs hover state of a button. Verify hover effects are applied.

baseline:: Button in default state
current:: Button in hover state

Tips (3)

Hover states often include color changes
Check for shadow or scale transformations
Border changes are common in hover states

Animation Frame Capture

medium

Compare specific frames of an animation. Verify animation keyframes are correct.

baseline:: Animation at 0% progress
current:: Animation at 50% progress

Tips (3)

Animations have multiple keyframes
Capture at specific time points
Look for easing curve differences

Dynamic Content Masking

hard

Compare layouts while ignoring dynamic text (timestamps, IDs). Learn to use ignore regions.

baseline:: Page with timestamp 10:00:00
current:: Page with timestamp 10:05:32

Tips (3)

Use ignore regions for dynamic content
Timestamps and IDs should be masked
Focus on layout structure, not content

Advanced(6)

Anti-aliasing Tolerance

hard

Handle font anti-aliasing differences across browsers. Set appropriate thresholds.

baseline:: Text rendered in Chrome
current:: Same text rendered in Firefox

Tips (3)

Anti-aliasing varies by browser/OS
Use anti-aliasing tolerance option
Increase threshold for cross-browser tests

Image Compression Artifacts

hard

Detect JPEG compression artifacts. Compare PNG baseline with JPEG version.

baseline:: Image saved as PNG (lossless)
current:: Image saved as JPEG (85% quality)

Tips (3)

JPEG compression causes blocky artifacts
PNG is lossless, JPEG is lossy
Higher threshold may be needed

SVG Rendering Differences

hard

Compare SVG rendering across different browsers. Handle vector rasterization.

baseline:: SVG in reference browser
current:: Same SVG in target browser

Tips (3)

SVG rendering varies by browser
Curves may have slight differences
Check stroke widths and fills

Full Page Screenshot

hard

Compare full-page screenshots with scroll stitching. Verify entire page layout.

baseline:: Full page baseline (2000px height)
current:: Full page after changes

Tips (3)

Long pages require scroll stitching
Check for seamless transitions
Sticky elements may duplicate

iFrame Content Testing

expert

Visual testing inside an iframe. Capture and compare embedded content.

baseline:: iFrame content baseline
current:: iFrame content after update

Tips (3)

iFrames are isolated contexts
May need to switch frames first
Cross-origin iFrames have restrictions

Canvas/WebGL Snapshot

expert

Compare Canvas or WebGL rendered content. Handle GPU rendering differences.

baseline:: Canvas rendering baseline
current:: Canvas after modifications

Tips (3)

Canvas renders on GPU
Results may vary by hardware
Use higher threshold for WebGL

Pixel comparison(5)

Pixel Perfect Button

easy

Detect padding differences between two buttons. The baseline has 16px padding, the current version has 12px.

baseline:: Button with 16px padding
current:: Button with 12px padding

Tips (3)

Look for subtle size differences
Focus on the button boundaries
Use pixel threshold of 0% for exact matching

Color Shift Detection

easy

Find a subtle color change from #2563EB to #2462E9. Can you spot 1 shade difference?

baseline:: Element with #2563EB blue
current:: Element with #2462E9 blue (1 shade different)

Tips (3)

Color differences may be invisible to human eye
Use a low threshold (1-5%) for color detection
The diff overlay will highlight changed pixels

Font Change Detection

easy

Detect a font-weight change from 400 (normal) to 500 (medium). Subtle but important!

baseline:: Text with font-weight: 400
current:: Text with font-weight: 500

Tips (3)

Font weight changes affect text thickness
Look at the edges of characters
Use overlay mode for clear comparison

Layout Shift

medium

An element has shifted 5px to the left. Find and measure the shift.

baseline:: Element in original position
current:: Element shifted 5px left

Tips (3)

Layout shifts can cause visual instability
Use the slider mode to see the difference
Check element alignment carefully

Dark Mode Comparison

medium

Compare light theme vs dark theme. Verify color scheme transitions.

baseline:: Light theme version
current:: Dark theme version

Tips (3)

Check text contrast in both modes
Background colors should differ significantly
Icons may need inverted colors

Dynamic content(3)

Hover State Comparison

medium

Compare default state vs hover state of a button. Verify hover effects are applied.

baseline:: Button in default state
current:: Button in hover state

Tips (3)

Hover states often include color changes
Check for shadow or scale transformations
Border changes are common in hover states

Animation Frame Capture

medium

Compare specific frames of an animation. Verify animation keyframes are correct.

baseline:: Animation at 0% progress
current:: Animation at 50% progress

Tips (3)

Animations have multiple keyframes
Capture at specific time points
Look for easing curve differences

Dynamic Content Masking

hard

Compare layouts while ignoring dynamic text (timestamps, IDs). Learn to use ignore regions.

baseline:: Page with timestamp 10:00:00
current:: Page with timestamp 10:05:32

Tips (3)

Use ignore regions for dynamic content
Timestamps and IDs should be masked
Focus on layout structure, not content

Advanced(6)

Anti-aliasing Tolerance

hard

Handle font anti-aliasing differences across browsers. Set appropriate thresholds.

baseline:: Text rendered in Chrome
current:: Same text rendered in Firefox

Tips (3)

Anti-aliasing varies by browser/OS
Use anti-aliasing tolerance option
Increase threshold for cross-browser tests

Image Compression Artifacts

hard

Detect JPEG compression artifacts. Compare PNG baseline with JPEG version.

baseline:: Image saved as PNG (lossless)
current:: Image saved as JPEG (85% quality)

Tips (3)

JPEG compression causes blocky artifacts
PNG is lossless, JPEG is lossy
Higher threshold may be needed

SVG Rendering Differences

hard

Compare SVG rendering across different browsers. Handle vector rasterization.

baseline:: SVG in reference browser
current:: Same SVG in target browser

Tips (3)

SVG rendering varies by browser
Curves may have slight differences
Check stroke widths and fills

Full Page Screenshot

hard

Compare full-page screenshots with scroll stitching. Verify entire page layout.

baseline:: Full page baseline (2000px height)
current:: Full page after changes

Tips (3)

Long pages require scroll stitching
Check for seamless transitions
Sticky elements may duplicate

iFrame Content Testing

expert

Visual testing inside an iframe. Capture and compare embedded content.

baseline:: iFrame content baseline
current:: iFrame content after update

Tips (3)

iFrames are isolated contexts
May need to switch frames first
Cross-origin iFrames have restrictions

Canvas/WebGL Snapshot

expert

Compare Canvas or WebGL rendered content. Handle GPU rendering differences.

baseline:: Canvas rendering baseline
current:: Canvas after modifications

Tips (3)

Canvas renders on GPU
Results may vary by hardware
Use higher threshold for WebGL