如何验证赛普拉斯中的悬停文本（工具提示）？

Posted 2023-03-06

【中文标题】如何验证赛普拉斯中的悬停文本（工具提示）？

【英文标题】：How to verify the hover text (tooltip) in Cypress?

【发布时间】：2021-09-10 15:32:00

【问题描述】：

arrow_back

---

我已尝试使用以下代码，但不起作用。对于 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')

边缘：

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 更危险的事情？

【参考方案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)');
  );
);