Skip to main content

Ignore or Select Annotated Regions

Web applications often have dynamic elements that can cause unnecessary noise in your visual testing. Take a social media platform, for instance. The number of unread notifications displayed might change with each test run. While these variations are expected, you don't necessarily want them to trigger alerts as potential regressions.

The SmartUI Annotation tool allows you to interact directly with your screenshots through detailed annotations. You can draw over screenshots, define regions with boxes, and choose to ignore or select these regions for current and future comparisons. With advanced features like Ignore Colors, Floating Regions, and Select Ignore, you can handle even the most complex dynamic content scenarios.

By utilizing ignored/selected regions, you can keep your test results focused on the truly important changes, streamlining your workflow and saving you time from chasing irrelevant discrepancies.

Quick Start​

Accessing the Annotation Tool​

  1. Navigate to your SmartUI project dashboard
  2. Open a screenshot comparison that shows differences
  3. Click on the Actions button (annotation icon) in the comparison view
Annotations icon

Basic Workflow​

  1. Click the annotation icon to open the annotation tool
  2. Click "Add Region" and draw a box around the area you want to annotate
  3. Select the annotation type (Ignore Region, Select Region, Floating Region, or Ignore Colors)
  4. Click "Save" to apply the annotation
  5. Choose application scope: Apply to current screenshot only or all browser variants

Tip: Start with Ignore Region for simple dynamic content like timestamps or notification counters. It's the most straightforward annotation type.

Annotation Methods​

All four annotation methods are accessible from the same Actions button (annotation icon). Click on the annotation icon to open the annotation tool, then select your desired annotation type from the available options.

What is Ignore Region?

Ignore Region excludes specific areas from visual comparison. Ideal for dynamic content that changes frequently but isn't critical to your visual tests, such as timestamps, notification badges, or advertisements.

When to Use

  • Ignoring notification counters that change frequently
  • Excluding advertisement banners
  • Ignoring timestamps or date displays
  • Hiding dynamic user-generated content
  • Excluding non-critical UI elements that vary between builds

How to Use

Step 1: Click on the Actions button (annotation icon) to open the annotation tool.

Annotations icon

Step 2: Click on the Add Region button and draw a box around the area you want to ignore.

Ignore region annotation

Step 3: Select Ignore Region from the annotation type dropdown and click Save.

Apply annotation modal

Step 4: Choose whether to apply to the current screenshot only or all browser variants.

What Happens: The configured area will be ignored in every consecutive build for the same screenshot test case.

Result of ignore region

Example

Ignoring a "Last updated" timestamp in a dashboard that changes with each page load.

Advanced: Select Ignore​

Select Ignore is an advanced feature that combines selection and ignoring. You first select a region to focus on, then within that selected region, you can ignore specific sub-regions. This is perfect for scenarios where you want to test most of a component but ignore certain dynamic elements within it.

When to Use​

  • Testing a product card but ignoring the price (which may change)
  • Comparing a user profile section but ignoring the avatar (which may be different)
  • Testing a dashboard widget but ignoring specific metrics that change frequently
  • Focusing on a form while ignoring dynamic validation messages
  • Testing a navigation menu but ignoring the active state indicator

How to Use​

Step 1: Click on the Actions button (annotation icon) to open the annotation tool.

Step 2: First, draw a Select Region box around the main area you want to test.

Step 3: Then, within that selected region, draw an Ignore Region box around the sub-area you want to ignore.

Step 4: Select Select Ignore from the annotation type dropdown and click Save.

Step 5: Choose whether to apply to the current screenshot only or all browser variants.

What Happens: The outer selected region will be compared, but the inner ignored sub-region will be excluded from comparison, giving you precise control over what gets tested.

Tip: Use Select Ignore when you need granular control over comparison areas within a larger component. Ensure the ignore region is completely within the select region.

Example​

Testing a product card but ignoring the price and rating that may change, while still comparing the product image, title, and description.

Managing Annotations​

Once you've created annotations, you can view, edit, and delete them as needed.

Viewing Annotations​

Step 1: Toggle the Annotations switch to view/analyze your ignored/selected areas.

Viewing annotations

Step 2: When the toggle is on, you'll see all your annotation boxes with color coding (see Annotation Color Coding below).

Step 3: Hover over any annotation box to see a tooltip with detailed information, including:

  • Box dimensions (width × height)
  • Annotation type (Ignore, Select, Floating, etc.)
  • Coordinates

Editing Annotations​

You can always edit or delete pre-configured areas or add new ones according to your requirements.

To Edit an Annotation:

Step 1: Click on the Actions button (annotation icon).

Step 2: Click on the annotation box you want to edit.

Step 3: Resize or reposition the box as needed.

Step 4: Click Save to apply changes.

Deleting Annotations​

Step 1: Click on the Actions button (annotation icon).

Step 2: Click on the annotation box you want to delete, or click Delete All to remove all annotations.

Step 3: Click on the Save button to confirm deletion.

Note: Deleting annotations will trigger a re-run of the comparison, and the previously ignored/selected areas will be included in future comparisons.

Applying Annotations​

After creating your annotations, you'll see a modal dialog with options:

Apply annotation modal

Options:

  1. Apply to Current Screenshot Only: The annotation will only affect the current screenshot variant (e.g., Chrome on desktop).

  2. Apply to All Browser Variants: The annotation will be applied to all browser/viewport combinations for this screenshot (e.g., Chrome, Firefox, Safari on desktop).

Best Practice: While you can apply annotations to all browser variants, it's recommended to manually verify that these areas are configured correctly for each browser. Certain browsers may render elements differently, potentially causing inconsistencies in your annotations.

Annotation Color Coding​

When viewing annotations, different colors indicate their type:

  • Red boxes: Ignore regions
  • Green boxes: Select regions
  • Blue boxes: Floating area boundaries
  • Yellow boxes: Elements within floating regions
  • Purple boxes: Ignore colors regions

Keyboard Shortcuts​

Speed up your annotation workflow with these keyboard shortcuts:

  • Shift + A: Resize annotation box left
  • Shift + S: Resize annotation box down
  • Shift + D: Resize annotation box right
  • Shift + W: Resize annotation box up
  • Shift + T: Define a region encompassing the entire screenshot
  • Delete or Backspace: Remove the currently selected annotation

Tip: Use keyboard shortcuts for precise control when resizing annotation boxes, especially for small or complex regions.

Best Practices​

Follow these best practices to get the most out of the annotation tool:

Choosing the Right Annotation Type​

  • Start with Ignore Region for simple dynamic content (timestamps, counters, ads)
  • Use Select Region when you only care about specific UI components
  • Use Floating Region for elements that move within a boundary
  • Use Ignore Colors when structure matters more than color variations
  • Use Select Ignore for granular control within larger components

General Guidelines​

  • Verify across browsers: Test annotations on different browsers to ensure consistency
  • Document your decisions: Note why you ignored/selected certain regions for future reference
  • Review periodically: Regularly review annotations to ensure they're still relevant
  • Start simple: Begin with basic Ignore Region before moving to advanced features
  • Test thoroughly: Verify annotations work correctly before applying to all browser variants

Workflow Tips​

  • Create annotations after reviewing initial comparison results
  • Use the annotation toggle to hide/show annotations for a cleaner view
  • Leverage keyboard shortcuts for faster annotation creation
  • Apply to current screenshot first, then verify before applying to all variants
  • Combine multiple annotation types for comprehensive coverage

Troubleshooting​

Annotations Not Applying

Issue: Annotations are not being applied to future builds.

Solutions:

  • Ensure you clicked Save after creating annotations
  • Verify you selected the correct annotation type
  • Check that you applied annotations to the correct screenshot variant
  • Refresh the page and verify annotations are visible

For more comprehensive troubleshooting, refer to the SmartUI Troubleshooting Guide.

Additional Resources​

Last updated on

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

Book Demo

Help and Support

Related Articles