CODEWITHSUNDEEP
cypress
guest
guest

Reputation: 2224

Cypress: How do you locate element on hover?

I have a "react" app, #controlsBar should be visible when mouseover #video-container, but the following code failed

    cy.get("#controlsBar").should("be.hidden");
    cy.get("#video-container")
      .trigger("mouseover")
      .then((elem) => {

        cy.get(elem).children().eq(3).should("be.visible"); //this is #controlsBar
        //cy.get("#controlsBar").should("be.visible"); //this failed also 
        cy.get("#controlsBar").invoke("show");
      });

Upvotes: 0

Views: 595

Answers (1)

Alapan Das
Alapan Das

Reputation: 18650

I would suggest you to use the cypress-real-events package.

  1. To Install use npm install cypress-real-events.

  2. Then under cypress/support/index.js file write import "cypress-real-events/support";.

  3. Then in your test you can write:

cy.get("#video-container").realHover()

Upvotes: 2

Related Questions