CODEWITHSUNDEEP
cypress
Dhamo
Dhamo

Reputation: 1251

cypress - Identify an element with mouse event for the element with css property "display: none"

I am trying to click an element (ellipsis) that will appear after the mouse-enter event on a particular list element but the test fails with the following error.

Timed out retrying after 4050ms: cy.click() failed because this element is not visible:
<button id="optionsButton">...</button>

This element <button#optionsButton> is not visible because it has CSS property: display: none
Fix this problem, or use {force: true} to disable error checking

My code:

cy.get("voy-vessel-gsis-list-entry")
      .find('.container')
      .eq(0)
      .should('be.visible')
      .trigger("mouseenter")
      .find('#optionsButton')
      .click()

I also checked similar questions in sof and tried invoke('show') but none worked (so far).

Here is the DOM:

enter image description here

when mouse hover/enter event on .container:

enter image description here

when no mouse event:

enter image description here

Upvotes: 0

Views: 1906

Answers (1)

Alapan Das
Alapan Das

Reputation: 18650

You can use the cypress-real-events plugin. This will work with all chromium browsers, which means firefox will not work.

1.Install the plugin with npm install cypress-real-events

2.Then add in cypress/support/index.js

import "cypress-real-events/support";

3.Then you can use realHover('mouse').

cy.get("voy-vessel-gsis-list-entry")
    .find('.container')
    .eq(0)
    .realHover('mouse')
    .find('#optionsButton')
    .should('be.visible')
    .click()

Upvotes: 1

Related Questions