Testing with Generic Classes

Sitepager uses CSS selectors to interact with elements on your pages. You enter a selector, and Sitepager finds every matching element to hover, click, or remove before taking a screenshot.

The problem is that many websites do not have stable, unique selectors on interactive elements. Webflow and Framer generate their own class names. Tailwind sites use utility classes like .flex and .mt-4 that match hundreds of elements. Without a clear target, writing selectors becomes guesswork.

The solution is to add your own classes to the elements you want Sitepager to target. One class per purpose. Simple, predictable, and under your control.

The idea

Add a custom class to every element you want Sitepager to interact with or exclude. Use that class as your selector in Sitepager.

For example:

.sp-hover on elements you want Sitepager to hover (dropdowns, tooltips)
.sp-click on elements you want Sitepager to click (modals, accordions)
.sp-dynamic on elements you want removed before the screenshot (carousels, tickers, ads)

These names are examples. Use whatever naming convention works for your team.

Adding classes to your site

In Webflow: Select the element, open the Style panel, and add a new class. Webflow lets you add multiple classes to any element.

In Framer: Select the element, open the properties panel, and add a custom class under the HTML attributes section.

In code (HTML, React, Next.js, etc.): Add the class directly to the element:

<button class="sp-click">Open Modal</button>
<nav class="sp-hover">Main Navigation</nav>
<div class="sp-dynamic">Ad Slot</div>

After adding classes, publish your site and verify them using your browser’s inspect tool. Right-click the element, select Inspect, and confirm the class appears in the HTML.

Using your classes in Sitepager

Once the classes are on your site, use them as selectors in your scan settings:

For hover interactions: Add .sp-hover to your hover selectors. Sitepager hovers each matching element and takes a screenshot of the result. See Hover and Click Selectors.

For click interactions: Add .sp-click to your click selectors. Sitepager clicks each matching element and takes a screenshot of the revealed content. See Hover and Click Selectors.

For dynamic content removal: Add .sp-dynamic to your dynamic content selectors. Sitepager removes every matching element from the page before taking the screenshot. See Dynamic Content Selectors.

Why this works better than utility classes

Tailwind classes like .flex or .text-lg match dozens or hundreds of elements on a page. Using them as selectors gives you unpredictable results.

A dedicated class like .sp-hover matches only the elements you added it to. You control exactly what Sitepager targets without worrying about collateral matches.

The same applies to auto-generated classes from Webflow or Framer. These can change when you update your site, breaking your selectors. A custom class you control stays stable.

Tips

Use a consistent prefix. Something like sp- or test- makes it clear these classes exist for testing, not styling. Your team will know not to remove them.

Start with a few elements and expand. Add classes to your most important interactive elements first. Run a scan, check the results, and add more as needed.

One class per action type. Keep hover, click, and dynamic content classes separate. Do not reuse the same class across different selector types.

Combine with specific selectors when needed. Generic classes work well for broad coverage. For one-off elements, a specific selector like #newsletter-modal or [data-testid="pricing-toggle"] is fine.