How to Use Selectors for Hover and Click Actions

Selectors for hover and click actions enable you to simulate user interactions, such as hovering over menus or clicking buttons, to test interactive elements on your website. This guide explains how to configure and use these selectors in Sitepager.

Why Use Hover and Click Selectors?

Interactive elements, such as buttons, menus, and pop-ups, often require user actions to display additional content or navigate to other pages. By using hover and click selectors, you can:

• Ensure interactive elements perform as expected across different devices and environments.

• Validate hover effects on navigation menus, dropdowns, and interactive visuals.

• Test click-triggered actions, such as opening modals or navigating between pages.

• Catch visual regressions in elements activated through user interactions.

Setting Up Hover and Click Selectors

Follow these steps to set up hover and click 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 for Hover or Click Actions:

   In the Hover Menu Items or Click Menu Items fields, add CSS or ID-based selectors that uniquely identify the interactive elements you want to test. Ensure these selectors align with existing classes or IDs already present on your website.

   Examples:

   • .menu-item, class-based selector for navigation menu hover actions.

   • #popup-button, id-based selector for a button that triggers a pop-up.

   • .card-link, class-based selector for cards with click-to-navigate functionality.

   If your website lacks unique selectors, you may need to add them manually. However, most modern websites already have suitable selectors, making additional changes unnecessary.

   
   

4. Customize Your Check (Optional):

   Adjust advanced options such as page wait time if hover or click actions require loading additional content or navigating to a new page.

   
   

5. Run Your Check:

   Click Start Check to initiate your test. Sitepager will:

   • Hover over elements, capturing screenshots of their activated states.

   • Simulate clicks to trigger navigation or interactions, and continue testing from the resulting page.

Practical Use Cases

Hover and click selectors are particularly useful for:

• Testing Navigation Menus: Validate hover-based dropdown menus or mega menus.

• Verifying Pop-Up Functionality: Ensure buttons correctly trigger and dismiss modals or overlays.

• Validating JavaScript-Driven Navigation: Test buttons relying on JavaScript to ensure users are directed to the correct pages. For anchor-based buttons, Sitepager's automatic crawl already handles this validation.

• Examining Hover States: Ensure hover effects display the correct styling and information.

This ensures dynamic interactions are thoroughly tested, allowing you to detect issues in workflows or styling changes effectively.

Best Practices

• Use Existing Selectors: Work with your website’s current classes or IDs to avoid additional configuration.

• Focus on Key Interactions: Prioritize testing critical workflows, such as navigation, sign-up modals, or call-to-action buttons.

• Validate Changes: After updating selectors on your site, re-run Checks to ensure accuracy.

Next Steps

Enhance Interactive Testing:

• Explore dynamic exclusions with the How to Use Dynamic Content Selectors guide.

• Compare interactive elements across environments using the How to Compare Environments guide.