For AI agents and LLMs: a machine-readable index is available at llms.txt. A plain-Markdown version of any documentation page is available by appending .md to its URL.
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.

Baseline Regions New​

A baseline is the reference image that every later build is compared against. Normally you draw regions on a comparison build, so the region belongs to that build's comparison. Baseline Regions let you draw an ignore or select region directly on the #1 Baseline Build, so the region is owned by the baseline itself and is honored for comparisons from the baseline forward.

This is useful when you already know an area is dynamic at the moment you establish the baseline. Instead of waiting for a comparison build and re-applying the region there, you can annotate the baseline once and have it apply to every build that uses that image as its baseline.

When to Use​

  • Marking a known dynamic area (a timestamp, a session banner, a live counter) as ignored right when the baseline is created
  • Keeping the baseline and what is actually compared in sync, without waiting for the next comparison build
  • Establishing a select region on the baseline so every downstream build compares only the area you care about

How to Use​

Step 1: Open the #1 Baseline Build for your screenshot in the SmartUI dashboard.

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

Step 3: Click on the Add Region button and draw a box around the area you want to ignore or select, then choose the annotation type (for example, Ignore Region or Select Region).

Step 4: Mark the region as a baseline region in the apply dialog and click Save.

What Happens: The region is stored against the baseline screenshot and is applied in every consecutive build that is compared against that baseline. Regions that are not marked as baseline regions continue to behave exactly as before and apply only from the build on which you drew them.

Note: Baseline Regions and the per-region Apply to all variants scope are independent. A baseline region controls the builds a region applies to (from the baseline forward), while the variant scope controls the browser and viewport combinations a region is copied to.

Tip: Use a baseline region for content you already know is dynamic before the first comparison ever runs. For areas you discover later while reviewing a comparison, a normal region on that build is the simpler choice.

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 drawing a region, you'll see a modal dialog that controls where that specific region is applied:

Apply annotation modal

Options:

  1. Apply to Current Screenshot Only: The region will only affect the current screenshot variant (for example, Chrome on desktop).

  2. Apply to All Browser Variants: The region will be applied to every browser and viewport combination for this screenshot (for example, Chrome, Firefox, and Safari on desktop).

Each region has its own scope, so Apply to all variants is a per-region action. Every region you draw is tracked with a stable identity of its own, which means the scope you pick applies to that one region and to no others.

Note: Apply to all variants propagates only the region you currently have selected or have just drawn. Any other annotations that already exist on the screenshot are left untouched and are not copied to the other variants unless you select them and apply them too. This keeps regions you never intended to share from spreading across the variant matrix.

To propagate more than one region, select each region and choose Apply to all variants for it in turn.

Best Practice: While you can apply a region to all browser variants, it's recommended to manually verify that the area is configured correctly for each browser. Certain browsers may render elements differently, which can cause inconsistencies in your regions.

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