Using Generic Classes to Test Interactions & Dynamic Content

Adding generic classes to elements on your website can simplify and speed up the process of testing hover, click interactions, and dynamic content with Sitepager.

This approach allows you to group similar interactive elements under a common class, making it easier to define and add selectors in Sitepager.

Benefits of Using Generic Classes

Using generic class selectors in Sitepager offer several benefits:

• Simplifies Configuration: Define one class for multiple elements instead of manually specifying unique selectors for each item.

• Scalable for Large Websites: For websites with many buttons, links, or hoverable elements, this method reduces the effort required for setup.

• Flexible: Unique identifiers can still be used for specific cases, but generic classes provide a practical fallback for broader testing.

Setting Up Generic Classes for Testing

Follow these steps to use generic classes for testing hover, click interactions, and dynamic content:

1. Decide on Class Names

   Choose names that are clear and relevant to your testing needs. For example:

   • .sp-click for clickable elements.

   • .sp-hover for hoverable elements.

   • .sp-dynamic for dynamic elements you want to exclude from tests.

   These are just examples. You can name your classes however you like (e.g., .test-click, .hover-items, .dynamic-ignore).

   
   

2. Add Classes to Your Website

   The process of adding classes depends on your platform:

   • Webflow: Follow How to Create and Apply Classes in Webflow for a step-by-step guide.

   • Framer: Refer to How to Add a Custom Class to an Element in Framer for detailed instructions.

   • Custom Websites: Manually add the generic class to your HTML elements. For example:

     <button class="sp-click">Click Me</button>

     <div class="sp-hover">Hover Over Me</div>

     <div class="sp-dynamic">Dynamic Content</div>

   
   

3. Verify Class Application

   After adding the classes:

   • Publish your website.

   • Verify that the classes are applied correctly by using your browser’s inspect tool. Right-click on the element, select Inspect, and confirm that the class appears in the element’s HTML structure.

Using Classes in Sitepager

• Add the selector for testing hover actions in the Hover Items field (e.g., .sp-hover).

• Add the selector for testing clickable elements in the Click Items field (e.g., .sp-click).

• Add the selector to exclude dynamic elements from testing in the Dynamic Content Selectors field (e.g., .sp-dynamic).

Best Practices

To ensure optimal results when using generic class selectors:

• Use Clear Naming Conventions: Choose class names that describe their purpose (e.g., .click-test, .test-hover).

• Start Small and Expand Gradually: Apply generic classes to a few elements first. Verify they work as expected, and once satisfied, gradually extend the implementation across your website.

• Test in a Staging Environment: Use a staging or testing environment before applying changes to the live website.

• Combine with Unique Selectors: Use generic classes for broad tests and unique identifiers for specific scenarios as needed.

By using this approach, you can test interactions effectively, speed up your testing process, and gain more control over testing interactive and dynamic elements in Sitepager.