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

Question

<span class="mat-button-wrapper">
  <mat-icon role="img" fragment="list" 
    class="mat-icon notranslate logo-icon s-24 mr-8 material-icons mat-icon-no-color" 
    aria-hidden="true">arrow_back</mat-icon>
</span>

我已经尝试过以下测试，但它们不起作用。

对于chrome来说，它说有超时。

对于Edge，它不关注后退按钮，而是关注文本框。

铬合金：

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

边缘：

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

---

如果我将鼠标悬停在后退按钮上，将显示“返回资产类别”。

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