Cypress hoverover GUI effect test

Question

I started using cypress nowadays to learn better and deeper. I am faced with a problem that I can't handle. The problem is some kind of GUI effect working with mouse hover. While hovering my mouse on the element I can't see any information change into DOM. There are just::before and::after words appearing. I think I have to solve that problem with some javascript tricks. unfortunately, I am new to javascript and I don't have any idea if you help me I would be very happy. Thank you! (I want to assert in some way that grey background and plus icon is shown or not)

generically look like that

after the mouse hovers this grey background and plus icon comes

you can see elements DOM here

you can see the changes after the mouse hovers element

Answer 1

You can use the cypress-real-events plugin. To install use the command:

npm i cypress-real-events

Then inside your cypress/support/e2e.{js,ts} , write:

import "cypress-real-events/support";

And in your code you can directly write:

cy.get("selector").realHover('mouse')
//Add assertions

Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.

Answer 2

Into cypress' test try to use the method cy.wait("time here") following hover command. This is very simple but for visual test this is so useful.

Answer 3

In order to access the :before or :after of an element, we have to do a little Cypress and JavaScript magic. This is answer is mostly from this link.

cy.get('.myClass')
.then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const before = win.getComputedStyle($els[0], ':before')
  // read the value of the `content` CSS property
  const contentValue = before.getPropertyValue('content')
  
  // The above lines are just how we tell Cypress to get the `:before` value. 
  // There isn't a ton to understand outside of really diving into how elements and windows work together

  expect(content).to.equal('foo');
})

So, using that same example, if we instead wanted to check for say the CSS style of font-size , it would look something like this:

cy.get('.myClass')
.then($els => {
  const win = $els[0].ownerDocument.defaultView
  const before = win.getComputedStyle($els[0], ':before')
  const fontSize = before.getPropertyValue('font-size')
  expect(fontSize).to.equal('20');
})

This can also be applied to :after , changing out ($els[0], ':before') with ($els[0], ':after') .

Answer 4

Looking at your screenshots, I think you have a gray overlay element covering the original incident element.

The only code I can suggest is from the limited information is

cy.get('#IN-578')
  .trigger('mouseover')
  .should('not.be.visible')

The overlay has opacity 50%, so you can still see the incident details but from Cypress point of view the incident is covered so it will not be "visible".

If you don't have any luck with 'mouseover', try .realHover() from cypress-real-events .

---

After the above code, you should look for the overlay element in DOM and the + icon in the middle, select that icon and click it to take the action.