Cypress Hover Over Element vs. BugBug Hover Mode

Cypress does not have a built-in cy.hover() command. If you attempt to use cy.hover(), an error will be displayed, redirecting you to the relevant issue page. BugBug ensures that hover events are captured accurately and can be reliably reproduced during test playback by following specific steps.

TL;DR

Cypress: Limited by its inability to trigger true hover events, Cypress relies on the less reliable .trigger('mouseover') command. This often results in challenges with hidden elements that require a hover to become visible, leading to errors or incomplete testing.

BugBug: BugBug's manual hover recording accurately captures the exact CSS and state changes, ensuring that hidden elements become visible as expected.

Check also:

Best Visual Regression Testing Tools

Ultimate Guide to Magento QA Testing

Testing Tools for Web Application

Cypress cannot naturally simulate the mouseover state of an element in a way that would exactly replicate a user's interaction. Although Cypress provides the .trigger('mouseover') command to mimic the hover event, it often falls short in accurately reproducing the behavior and visual changes that occur during a real hover action. This can be particularly problematic when testing features like dropdown menus, tooltips, or any UI element that relies on hover states.

How to Hover Over Elements in Cypress?

Sometimes an element has specific logic that activates on hover, making it necessary to simulate a hover in Cypress. Often, the element isn't even displayed or clickable until you hover over another element. Here are some workarounds:

• Using .trigger(), .invoke(), or **cy.wrap(): These methods can be used to show the element before performing an action.

  • Triggering a Mouseover Event: If the hover behavior depends on a JavaScript event like mouseover, you can use .trigger() to achieve the behavior. However, .trigger() only affects events in JavaScript and will not trigger any effects in CSS.

    cy.get('.menu-item').trigger('mouseover'); cy.get('.popover').should('be.visible');

  • Invoking CSS Changes: You can use .invoke() to show a hidden element before performing an action.

    cy.get('.hidden').invoke('show').click();

  • Forcing Click Actions: You can force the action to be performed on an element regardless of its visibility.

    cy.get('.hidden').click({ force: true }); cy.get('.checkbox').check({ force: true });

• Using **cypress-real-events** Plugin: This plugin provides native events like hover and swipe in Chromium browsers, helping to simulate these interactions more accurately.

• Chrome Remote Debugging: As a workaround, you can leverage Chrome remote debugging to set pseudo-classes like hover. Check out the example recipe for testing hover and working with hidden elements.

BugBug Hover Mode: User-Friendly Approach

In contrast, BugBug, another testing tool, addresses the limitations of Cypress by offering a more robust approach to handling hover events. BugBug ensures that hover events are captured accurately and can be reliably reproduced during test playback by following specific steps.

Steps to Record Hover Events in BugBug

1. Manual Instruction: Since BugBug cannot automatically detect changes caused by cursor movement, you need to manually instruct the tool to record a hover action.
2. Enter Hover Mode: During the recording session, click "Hover" in the recording overlay to activate hover mode.
3. Select the Element: Click on the element you want to hover over. In this mode, the elements are highlighted with a yellow color, making it easier to identify the target.
4. Exit Hover Mode: After selecting the element, click "Exit hover mode" to complete the recording of the hover action.

This manual approach ensures that the specific hover event is recorded and can be precisely executed during test runs. By capturing the exact state changes and CSS modifications that occur during a hover, BugBug provides a more accurate simulation of user interactions compared to Cypress.

BugBug Overlay

When running a test in recording mode with BugBug, you will notice an additional action panel on the right side of the screen. This BugBug overlay provides several functionalities:

• Run or Record Tests: To utilize these features, you need to set up the BugBug Chrome extension.
• Recording All Actions: By default, BugBug records all clicks, form element selections, URL navigations, and text field entries.

Recording Overlay Buttons

The recording overlay in BugBug comes with buttons that allow you to customize what you want to record:

• Record Hover: Activate the hover recording mode to capture hover actions.
• Add Assertions During Recording: Insert assertions to verify specific conditions during the recording process.
• Record Drag & Drop: Capture drag-and-drop actions for elements that require this interaction.

This comprehensive set of tools ensures that BugBug can handle a wide range of interactions, providing a flexible and powerful environment for recording and running tests.

Hovering Over An Element: Comparison Summary

• Cypress: Limited by its inability to trigger true hover events, relying on the less reliable .trigger('mouseover') command. Cypress struggles with hidden elements that require hover to become visible, often leading to errors or incomplete testing.
• BugBug: Requires manual recording of hover events but offers a more accurate and reliable reproduction of hover interactions through its dedicated hover mode and comprehensive recording overlay. BugBug’s manual hover recording captures the exact CSS and state changes, ensuring hidden elements become visible as expected.

While Cypress doesn’t have a built-in cy.hover() command, various workarounds and plugins can help simulate mouse hover events accurately. By using commands like .trigger(), leveraging the Chrome DevTools Protocol, and creating custom commands, you can ensure your tests cover all interactive elements thoroughly. These techniques allow you to generate realistic user scenarios and ensure that elements behave correctly under hover conditions.

By using BugBug, testers can overcome the limitations of Cypress, ensuring that hover-dependent UI elements are tested effectively and accurately.

BugBug overlay and recording capabilities add an extra layer of flexibility, making it a robust choice for end-to-end testing. The need to set up the BugBug Chrome extension and follow along with the recording instructions ensures precise and reliable test execution.

Happy (automated) testing!