How to verify the hover text (tooltip) in Cypress?

user_16164043 0
Viewed 4924

arrow_back

I have tried with the below codes but does't work. For chrome, it is saying timeout. For edge, it is not focusing on the back button instead focusing on the textbox.

Pls help me to resolve this issue.

Chrome:

cy.get('#asset-categories>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>button')
  .trigger('mouseover').invoke('show')
cy.contains('Back to asset categories')

Edge:

cy.get('#asset-categories>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>button')
   .focused().realHover()
cy.contains('Back to asset categories')

If I hover the back button, "Back to asset categories" will be displayed.

cypress hover tooltip css javascript
1 Answers

In my case I have to show tooltip while hovering over a button. It is working for me. I am verifying colors, you can edit it according to your requirements. My code is as follow:

describe('color', () => {
  it('should have correct background color', () => {
    cy.get('[data-cy="button"]').realHover();
    cy.get('.mat-tooltip')
     .should('have.css', 'background-color', 'rgb(111, 111, 111)');

  });

  it('should have correct text color', () => {
    cy.get('[data-cy="button"]').realHover();
    cy.get('.mat-tooltip')
    .should('have.css', 'color', 'rgb(255, 255, 255)');
  });
});
user_85849040
Related