Dynamic Content Selectors
Some elements on your site change every time the page loads. Carousels rotate, ads refresh, timestamps update, tickers scroll. These create false positives in visual comparisons because they look different on every run, even when nothing actually changed.
Dynamic content selectors let you remove these elements before Sitepager captures the screenshot. The element is removed from the page entirely, so it does not appear in the screenshot or affect the visual comparison.
Where to find it
Section titled “Where to find it”Open your scan settings and go to Advanced Settings > Dynamic Content & Interactions. Enable the section toggle in the top right corner.
Under Page preparation, check Enable dynamic content filtering. This reveals the Dynamic selectors field where you add your selectors.
Enter multiple selectors separated by commas or press Enter after each one.
How it works
Section titled “How it works”Sitepager uses standard CSS selectors to find elements on the page. Before taking the screenshot, it removes every element that matches your selectors from the page.
The element is completely removed from the DOM. It does not appear in the screenshot and is not included in the visual comparison.
This happens on every run. The same selectors are applied consistently, so your comparisons stay clean and focused on what actually matters.
What to exclude
Section titled “What to exclude”Cookie banners and popups The most common source of false positives. If a cookie consent banner appears inconsistently across pages or runs, exclude its container. This is the first thing to set up on most sites.
Rotating banners or sliders These show different content on every page load. Add the selector for the banner container to exclude it.
Timestamps or live counters Any element that displays the current time or a changing number will always show as a difference. Exclude it.
Embedded videos Video players often render differently between loads. Exclude the video container.
Ad slots Ads change on every page load. Exclude ad containers to avoid false positives.
How to find your selector
Section titled “How to find your selector”The visual method (recommended) Open your browser’s developer tools, right-click the element you want to exclude, and select Inspect. In the Elements panel, right-click the highlighted element and choose Hide element. The element disappears from the page temporarily, confirming exactly what will be removed. Look at the class or ID on that element and use it as your selector.
The console method
Open your browser’s developer tools console and run document.querySelectorAll('.your-selector') to confirm the selector matches the right elements before adding it to Sitepager.
The class or ID names on your site will be different from the examples below, but the selector format is the same.
CSS selector reference
Section titled “CSS selector reference”Selectors on your site will have different names, but follow these patterns:
| Selector | What it targets |
|---|---|
.carousel | Elements with the class carousel |
#video-container | The element with the ID video-container |
.ad-slot | Elements with the class ad-slot |
.ticker | Elements with the class ticker |
#timestamp | The element with the ID timestamp |
[data-ad] | Elements with the attribute data-ad |
.hero .slideshow | Elements with class slideshow inside an element with class hero |
Use the most specific selector you can. A broad selector like div will remove too much. Target the exact element you want to exclude.
Test on one page first. Before running a full site scan, add your selectors and run a scan on a single page to confirm the exclusions are working correctly. Once you are happy with the results, expand to your full scan.
Your site does not need any changes. Sitepager uses the existing classes and IDs already on your site. Most elements have identifiable selectors. Just inspect and use them directly.
Excluding many elements? Use a generic class. If you have multiple dynamic elements across your site, instead of finding and adding a selector for each one, add a single generic class to all of them in your site’s code and use that one class as your selector in Sitepager. One selector, all elements covered. Testing with Generic Classes
Dynamic content selectors and hover and click selectors work together. Dynamic content selectors handle what to remove. Hover and click selectors handle what to interact with. They are configured in the same section but serve different purposes. Hover & Click Selectors