Skip to main content

Ignoring Displacement Differences using Smart Ignore

SmartUI's Smart Ignore engine is specifically designed to address the challenges that arise when testing dynamic and content-rich web applications. Often, when content is added or removed from a page, it causes other elements to be displaced, leading to numerous false positives in traditional pixel-by-pixel comparisons. Smart Ignore intelligently hides these displacement differences, allowing you to concentrate on actual content changes that impact the user experience.

Key Features of Smart Ignore​

1. Displacement-Aware Comparison:​

Smart Ignore distinguishes between content changes and mere content displacement. It hides differences arising from elements that have shifted position but have not otherwise changed, reducing visual noise and making it easier to spot true content differences.

2. Clutter Reduction:​

In scenarios where large areas of the page are impacted by content displacement, traditional pixel to pixel comparison would highlight these areas in a blurred and cluttered manner making it difficult to identify the actual content changes. Smart Ignore minimizes this clutter, highlighting only those areas where content has genuinely changed. In the image below you can see confusing comparison due to the pixel to pixel approach, which is unable to highlight the actual reasons behind the mismatch.

cmd

3. Targeted Visual Testing:​

By focusing only on the significant changes, Smart Ignore enhances the precision of your visual testing. This feature is particularly useful when testing pages where frequent updates or dynamic content are expected, ensuring that only the most relevant differences are brought to your attention. In the image below you can see the actual changes being highlighted as Smart Ignore understands the images and yields out the best results.

cmd

How to Use Smart Ignore?​

1. Applying Smart Ignore via Project Settings​

In your SmartUI dashboard, navigate to your project settings. Under "Comparison Options," switch on the Smart Ignore toggle across all visual tests in the project.This ensures Smart Ignore will be applied throughout the project with option to see other comparison modes as well on screenshot level according to the usecase.

cmd

2. Using Smart Ignore per Screenshot​

After running your visual test, go to the comparison page. For each screenshot, choose the "Smart Ignore" mode from the "Diff Options" dropdown. This allows you to selectively apply Smart Ignore to specific screenshots, making it easier to identify true differences in content.

cmd

Use Cases of Smart Ignore​

Content Management Systems​

Scenario: A page frequently updated with new articles or images causes other elements to shift position.

Solution: Smart Ignore hides the displacement-related differences, allowing you to focus solely on the content that has been added or modified.

E-commerce Platforms​

Scenario: Adding or removing products from a page often displaces other items, leading to a large number of false positives.

Solution: Use Smart Ignore to ignore these shifts and concentrate on detecting actual changes in product listings, descriptions, or images.

Large-Scale UI Changes​

Scenario: A major UI overhaul causes a significant portion of the page layout to change, making it difficult to identify specific content changes.

Solution: Apply Smart Ignore to filter out layout shifts, making it easier to identify key differences in the content itself.

Limitations​

Current Limitations​

Smart Ignore has the following current limitations:

  1. Element Ignoring Not Supported: Smart Ignore currently does not support ignoring specific DOM elements using ignoreDOM options. If you need to ignore specific elements, use the standard comparison mode with ignoreDOM in your test code.

  2. Project Settings Integration: Smart Ignore does not currently integrate with all comparison options available in Project Settings (such as pixel threshold, custom mismatch options). These settings may not apply when Smart Ignore is enabled.

  3. Layout Comparison Mode: Smart Ignore works differently from Layout Comparison mode. If you need to compare only layout structure, use Layout Comparison mode instead.

When Not to Use Smart Ignore​

Smart Ignore may not be suitable for:

  • Precise Pixel Comparisons: When you need exact pixel-by-pixel accuracy
  • Layout-Only Testing: When you want to test only layout structure (use Layout Comparison instead)
  • Element-Specific Ignoring: When you need to ignore specific elements (use ignoreDOM instead)
  • Very Small Changes: When you need to detect very minor visual changes

Best Practices​

Start with Project-Level Toggle

Enable Smart Ignore at the project level for consistent behavior across all tests. You can still switch to other comparison modes per screenshot if needed.

Troubleshooting​

Issue: Smart Ignore Not Available

Symptoms: Smart Ignore toggle or option is not visible

Solutions:

  1. Verify you're using a supported SmartUI plan
  2. Check if your project type supports Smart Ignore
  3. Contact support if the feature should be available

Comparison with Other Modes​

Smart Ignore vs Pixel-to-Pixel​

FeatureSmart IgnorePixel-to-Pixel
Displacement Handling✅ Automatic❌ Shows all differences
False Positives✅ Reduced❌ Higher rate
PrecisionMediumHigh
Best ForDynamic content pagesPrecise comparisons

Smart Ignore vs Layout Comparison​

FeatureSmart IgnoreLayout Comparison
Content Changes✅ Detected❌ Ignored
Layout Changes✅ Detected✅ Detected
Displacement✅ Ignored✅ Ignored
Best ForContent + layoutLayout only

Additional Resources​

Note: Smart Ignore is continuously being improved. Features like element ignoring and enhanced Project Settings integration are planned for future releases. Check the release notes for updates.

Last updated on

Test across 3000+ combinations of browsers, real devices & OS.

Book Demo

Help and Support

Related Articles