How to click an element that's not visible in Cypress?

In Cypress, you cannot directly click on invisible elements using the standard click() command because Cypress is designed to simulate real user behavior, and real users cannot interact with invisible elements. However, to meet specific testing requirements, Cypress provides several methods to handle this situation:

Using {force: true} Option

You can force-click on invisible elements by using the {force: true} option within the click() function. For example, if an element is hidden due to CSS properties like display: none or visibility: hidden, you can do the following:

javascript
cy.get('.hidden-element').click({ force: true });

This line of code bypasses the visibility state and forcibly triggers the click event.

Modifying Element State

Another approach is to temporarily modify the element's state to make it visible before clicking. This can be achieved by directly modifying the DOM:

javascript
cy.get('.hidden-element').invoke('show').click();

Alternatively, if the element is hidden due to visibility: hidden rather than display: none, you can modify its style properties:

javascript
cy.get('.hidden-element').invoke('attr', 'style', 'visibility: visible').click();

Summary

Using {force: true} is the most straightforward method, but it may lead to behaviors that do not align with real user interactions. Modifying the element's state is more aligned with real user interactions, but it may require more code to handle different hiding scenarios. In practice, the choice of method depends on the specific testing requirements and context.

The above methods cover how to handle and click on invisible elements in Cypress, which can help with your testing work.