执行鼠标悬停和比较元素颜色时出现问题

Question

我正在尝试对演示站点执行鼠标悬停操作，但在执行鼠标悬停时遇到问题。

我想检查悬停时的颜色或文本，但我没有这样做。

网站： https: //demo.nopcommerce.com/

步骤：登录应用程序选择注册，考虑定位器并执行鼠标悬停。

我的代码：

cy.visit('https://demo.nopcommerce.com/')
cy.get('.ico-register')
 .trigger('mouseover')
 .should('have.css', 'cursor', 'pointer')
 .wait(1000) // Adjust the delay time as needed
 .should('have.css', 'color', 'rgb(74, 178, 241)')

错误 ：

断言预期 <a.ico-register> 具有值为 rgb(74, 178, 241) 的 CSS 属性 color，但值为 rgb(119, 119, 119) AssertionError 预期 '<a.ico-register>' 为CSS 属性“color”的值为“rgb(74, 178, 241)”，但值为“rgb(119, 119, 119)”

注意：1：rgb（119,119,119）这是悬停之前的颜色，它显示的颜色与悬停之后相同

2：在此，当我尝试手动将鼠标悬停在注册选项卡上时，测试用例正在通过

Answer 1

使用事件来测试悬停操作的问题trigger是 Cypress 触发命令仅适用于元素上的 javascript 效果。

例如，如果元素有一个像这样的JavaScript 事件处理程序

addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};

然后.trigger('mouseover')将解雇该处理程序。

但是许多链接都有基于悬停的 CSS 更改，并且这些链接不是由.trigger('mouseover').

如果您打开开发工具，导航到样式窗格并打开悬停复选框，您可以看到应用的 CSS 颜色样式。

使用cypress-real-events

.realHover()这个第三方库能够使用它的命令触发 CSS 转换以及 javascript 转换

cy.visit('https://demo.nopcommerce.com/')

cy.get('.ico-register')
  // .trigger('mouseover')
  .realHover()

cy.get('.ico-register').should('have.css', 'cursor', 'pointer')
cy.get('.ico-register').should('have.css', 'color', 'rgb(74, 178, 241)')

Cypress文档也推荐这个库。