How to Use Dynamic Content Selectors

Dynamic content, such as carousels, videos, and animations, can create challenges in visual testing by introducing false positives. Sitepager’s Dynamic Content Selectors allow you to exclude these elements from your Checks, ensuring that your tests focus on consistent and meaningful visual differences.

Why Exclude Dynamic Elements?

Dynamic elements often introduce unnecessary noise in test results. By excluding them, you can:

• Focus on meaningful changes to static content and layout.

• Prevent false positives caused by rotating banners, animated headers, or embedded videos.

• Streamline visual Checks for clearer insights.

Setting Up Dynamic Content Selectors

Follow these steps to configure and use dynamic content selectors in Sitepager:

1. Start a New Check:

   Navigate to the All Checks page and click on Create New Check.

   
   

2. Enter Your Starting URL:

   Provide the URL of the page or section you want to test.

   
   

3. Specify Selectors:

   In the Dynamic Selectors field, input CSS or ID-based selectors that uniquely identify the elements you want to ignore. Sitepager works with your current setup, so no additional changes to your website are required as long as suitable selectors exist.

   Examples based on typical website configurations:

   • .carousel, class-based selector to ignore rotating banners.

   • #video-container, id-based selector to exclude embedded videos.

   • .animation , class-based selector to skip animated elements.

   If your website lacks unique identifiers (e.g., classes or IDs) for dynamic elements, you may need to add them manually. However, most websites already have suitable selectors, so this is usually unnecessary.

   
   

4. Customize Your Check (Optional):

   Configure advanced options like visual thresholds or page wait time if your site uses features like lazy loading or rendering delays.

   
   

5. Run Your Check:

   Click Start Check to initiate your test. Sitepager will exclude the specified elements from the visual comparison.

Practical Use Cases

Dynamic content selectors are especially useful in these scenarios:

• Ignoring Rotating Banners or Sliders: Prevent distractions from continuously changing banners or sliders.

• Excluding Videos or Embedded Media: Focus on static content by skipping videos or dynamic media players.

• Skipping Animations or Loading Effects: Ensure that animations or transitional effects don’t interfere with detecting meaningful changes.

By excluding dynamic elements, you can ensure your visual testing remains accurate, focused, and free of unnecessary distractions.

Best Practices

• Leverage Existing Selectors: Use your website’s current classes or IDs to avoid unnecessary changes.

• Validate Selectors Before Running Checks: Ensure the specified selectors accurately target the elements you want to exclude.

• Focus on Key Areas: Use dynamic content selectors alongside Include/Exclude patterns to refine your tests.

Next Steps

• Optimize Visual Checks:

  • Learn how to fine-tune sensitivity in the How to Configure Visual Comparison Thresholds guide.

  • Explore advanced configurations in the How to Include and Exclude Pages guide.

• Understand Your Results:

  • Dive deeper into test reports in the Understanding Check Results guide.

For additional support, contact us via in-app chat.