javascript - 如何验证 Cypress 中的悬停文本(工具提示)?

arrow_back


我已尝试使用以下代码但不起作用。对于 chrome,它表示超时。 对于边缘,它不关注后退按钮,而是关注文本框。

请帮我解决这个问题。

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.

最佳答案

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

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

https://stackoverflow.com/questions/68161473/

相关文章:

swift - Table 行为中的 TextField

Angular - 访问 MatMenu 的 elementRef

php - 修改 Sonata Media Bundle 时预览列消失

python - 使用持续联系 API

android - 在 Android 11 中录制音频的前台服务有什么意义?

java - 在没有调试器的情况下在 VS Code 中导航 Java 堆栈跟踪

java - Spring boot 从附加位置文件覆盖 prod 属性

javascript - 如何在 vscode 中查看全 Angular 代码

node.js - 我安装了 npm live server (js.node) 但它不起作用?

amazon-web-services - Terraform 在配置 S3 后端时出错