Add cy.hover()

[jennifer-shehane]

Need to be able to hover in/out of DOM elements.

Example for hover

cy.get("@firstRow").hover()

I'm not sure what a stop hover command would look like.

Currently I would achieve this with mouseOver and mouseOut events. The hover command could follow a similar convention.

Other considerations:

• In what direction does the mouse come from for hover
• How long should the hover occur.
• How do you "pause" a hover to allow for possible css animations.
• Which actions cause you no longer to hover.

[jennifer-shehane]

When I issue a .click() command, this should issue a .hover() over the element I've specified to click onto (in order to fully simulate mouse behavior).

[seltar]

I don't think it's possible to implement a hover function with support for the css pseudo selectors considering it's a trusted event. http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events
The only way to simulate a hover to play css animations is by adding / removing a class.

A solution could be to modify and reinject the css to ensure that all :hover pseudo selectors are made available as a class.

[brian-mann]

Correct, it is not possible to trigger the CSS pseudo selectors via JavaScript directly, but it is possible to re-create what CSS does on a hover using just JavaScript (without the user changing anything).

When browsers run in cross browser mode we simply use the OS to actually hover over an element by its coordinates, so this isn't an issue in that mode.

However when testing in your local environment, Cypress has to simulate all events, and thats where the problem comes in.

I experimented with a few different solutions nearly a year ago, and found one to work really well. It works like this - on hover find the element at the center of the coordinates, walk up the parent tree for every element we are currently hovering based on the CSS box model (not the DOM object model).

For each of those elements iterate through the css and figure out if a hover pseudo state applies. If it does, then inline that style directly on each element. This will achieve all CSS results in JavaScript.

However that's only half the battle.

The reason this command hasn't been finished is 2 reasons:

1. Figuring out the parents by the CSS box model and not the DOM took awhile to get right - but now it is correct and it's already been implemented by cy.click - so this is no longer a barrier (but it used to be)
2. There are other things that go with a "hover" besides just CSS styles. For instance: mouseover, mouseout need to be simulated as well (which is easy at this point). But the biggest issue here is semantics. For instance, at what point does the user stop hovering over an element? Deciding when to fire the mouseout is the real challenge.

I originally imagined cy.hover to actually be a callback function like this:

cy.get("button").hover(function(){
  cy.get("span").click()
  ...
  ...
})

However that puts a lot of work on the user, and its possible you can create impossibilities. But the idea was that by using a callback function the user could specify the semantics of "continue hovering until X".

That is probably overkill though. Instead I will just dumb down the method and if edge cases occur handle them when they arise.

Hover additionally needs to be automatically invoked under the hood to properly simulate user action. For instance any click should automatically first hover over the element, and I guess mouseout when the action is done?

Anyway, that's why hover hasn't been done yet. It was dependent on a lot of other commands to be figured out, although it is ready now to be solved.

[jennifer-shehane]

I hope to be able to write assertions about pseudo-classes since this isn't readily accessible without the work outlined above by @brian-mann.

Example assertion

cy.get(“.content”).hover().should("have.attr", "style”, “cursor:alias”)

.hover() should return element chained to hover with the element having applied the styles specified within :hover pseudo-class.

[mlunoe]

This helped me out to at least show my element to be able to click it:
https://docs.cypress.io/v1.0/docs/invoke#section-properties-that-are-functions-are-invoked

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

[brian-mann]

Good point. We're going to add a pivotal story to write the documentation for cy.hover which redirects you and provides examples how to easily solve this.

[jennifer-shehane]

Using cy.hover() will now provide a detailed error message with a link for working around hover constraints in 0.15.0.

[nazar]

The following workaround works for me:

Cypress.addChildCommand('triggerHover', function(elements) {

  elements.each((index, element) => {
    fireEvent(element, 'mouseover');
  });

  function fireEvent(element, event) {
    if (element.fireEvent) {
      element.fireEvent('on' + event);
    } else {
      var evObj = document.createEvent('Events');

      evObj.initEvent(event, true, false);

      element.dispatchEvent(evObj);
    }
  }

});

Which now allows me to:

          cy
            .get('.resultsHeading .icon-info-circle:first')
            .triggerHover()
            .get('.header-tooltips')
            .should('exist') 

HTH someone.