Mouse hover cypress

How can I mouse hover and click the user 2?

describe('Mouse Hover', () => {                           
  it('should display the tooltip on hover', () => {
    cy.visit('https://the-internet.herokuapp.com/hovers');
    cy.get("img[alt$='User Avatar']").last().trigger('mouseenter'); // Use realHover to trigger the hover event
    //cy.get("img[alt$='User Avatar']").last().trigger('mouseover');
    cy.get('.figcaption').last().should('be.visible',{focus:true});
    cy.get('.figcaption').last().find('h5').should('contain.text', 'name: user3')
    //cy.get('.tooltip').should('be.visible');
  });
});

According to the docs at hover#Invoke

Example of showing an element in order to perform action

cy.get('.hidden').invoke('show').click()

This is the block of the DOM you are interested in. The <img> is visible but the caption section is not (has display:none CSS).

<div class="figure">
  <img src="/img/avatar-blank.jpg" alt="User Avatar">

  <div class="figcaption">    // this element is display:none without hover effect                
    <h5>name: user2</h5>
    <a href="/users/2">View profile</a>
  </div>
</div>

This is the way I would test it

it('should display the tooltip on hover', () => {
  
  cy.visit('https://the-internet.herokuapp.com/hovers');

  // Make the caption visible
  cy.contains('div.figcaption', 'name: user2')
    .invoke('show')
    .should('be.visible')

  // Now it's possible to click the link 
  cy.contains('div.figcaption', 'name: user2')
    .find('a')                               
    .click()

  cy.url().should('eq', 'https://the-internet.herokuapp.com/users/2');
})

Notes:

• click({force:true})

Clicking the link without making it visible gives an error, which you can overcome with .click({force:true}) to turn off the actionability checks.

But maybe that gives you an imperfect test, if there is a reason different to hover for the element not being visible or actionable. (Maybe the hover style gets removed accidentally).

• cypress-real-events

Probably works, but it's a bit of a backdoor similar to .click({force:true}) because it uses the Chrome devtools to force the hover.

Also it's only suitable for Chrome, not Firefox (although I think there's a pending change for this).