Maeris logo
Sign In

UX Testing – Ensure Your Experience Stays the Same

UX Testing in Maeris helps you maintain consistent user experiences by detecting visual changes, layout shifts, and UI regressions. Ensure your application's look and feel remains consistent across updates.

What is UX Testing?

UX (User Experience) Testing goes beyond functional testing to verify that the visual appearance, layout, and user interface elements of your application remain consistent. It helps catch visual regressions, layout shifts, and unintended UI changes that could impact user experience.

Why UX Testing Matters

  • Visual Consistency: Ensure UI elements look the same across updates
  • Layout Stability: Detect unintended layout shifts and positioning changes
  • Brand Consistency: Maintain consistent branding and design elements
  • User Trust: Prevent UI changes that could confuse or frustrate users
  • Cross-Browser Consistency: Verify UI looks consistent across different browsers
  • Responsive Design: Ensure UI works correctly on different screen sizes

UX Testing Features in Maeris

Visual Regression Testing

Compare screenshots from current test runs with baseline images to detect visual changes.

  • Automatic screenshot comparison
  • Highlight differences between baseline and current state
  • Configurable tolerance for minor differences
  • Baseline management and updates

Layout Verification

Verify that elements are positioned correctly and layouts remain stable.

  • Element position verification
  • Layout shift detection
  • Responsive design validation
  • Alignment and spacing checks

Element Visibility Checks

Ensure UI elements are visible, properly displayed, and not hidden or obscured.

  • Element visibility verification
  • Overlay and z-index checks
  • Hidden element detection
  • Display property validation

Cross-Browser Comparison

Compare UI appearance across different browsers to ensure consistency.

  • Run same tests on multiple browsers
  • Compare screenshots across browsers
  • Identify browser-specific UI issues
  • Ensure consistent rendering

Setting Up UX Tests

Step 1: Enable UX Testing

  • Enable UX testing features in test configuration
  • Configure screenshot capture settings
  • Set up baseline images for comparison

Step 2: Create Baseline

  • Run your test when UI is in the desired state
  • Save screenshots as baseline images
  • Baseline represents the "correct" visual state
  • Update baseline when intentional UI changes are made

Step 3: Configure Comparison Settings

  • Set tolerance levels for visual differences
  • Configure which areas to compare (full page, specific elements)
  • Set up ignore regions for dynamic content
  • Configure comparison algorithms and thresholds

Visual Regression Testing Workflow

  1. Initial Baseline: Create baseline screenshots from a known good state

    Run test and save screenshots as baseline

  2. Subsequent Runs: Execute tests and capture new screenshots

    Compare new screenshots with baseline

  3. Comparison: Maeris automatically compares images

    Highlights differences and calculates similarity

  4. Review Results: Review detected differences

    Determine if changes are intentional or regressions

  5. Update Baseline: Update baseline if changes are intentional

    Accept new visual state as the new baseline

Best Practices for UX Testing

  • Focus on Critical UI Elements: Test key user-facing components

    Prioritize important pages and features

  • Use Appropriate Tolerance: Set tolerance levels that account for minor rendering differences

    Too strict = false positives, too loose = missed issues

  • Ignore Dynamic Content: Exclude areas with frequently changing content

    Timestamps, user-specific data, dynamic ads

  • Test Responsive Designs: Verify UI at different screen sizes

    Mobile, tablet, desktop views

  • Regular Baseline Updates: Update baselines when UI changes are intentional

    Keep baselines current with design updates

  • Review Differences Carefully: Not all visual differences are problems

    Distinguish between bugs and intentional changes

Interpreting UX Test Results

Understanding Differences

  • Visual Differences: Highlighted areas show where current state differs from baseline
  • Difference Score: Numerical value indicating how different images are
  • Difference Map: Visual overlay showing exact locations of differences
  • Before/After Comparison: Side-by-side view of baseline and current state

Common Scenarios

  • Intentional Changes: UI updates that are part of design changes
  • Regressions: Unintended changes that break the UI
  • Rendering Differences: Browser-specific rendering variations
  • Timing Issues: Differences caused by elements loading at different times

Next Steps

Enhance your UX testing with additional features: