如何验证 Cypress 中的悬停文本（工具提示）？

Answer 1

就我而言，我必须将鼠标悬停在按钮上时显示工具提示。它对我有用。我正在验证颜色，您可以根据您的要求进行编辑。我的代码如下：

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)');
  });
});

Answer 2

我使用鼠标悬停事件来检查工具提示。下面代码中的第一行将鼠标指针悬停在按钮上，第二行将检查工具提示是否有可见的文本。

cy.get('#toolTipButton').trigger('鼠标悬停');

cy.contains('您将鼠标悬停在按钮上').should('be.visible');