时间戳

首页 > 解决方案 > 如何使用柏树测试悬停时的样式更改

html - 如何使用柏树测试悬停时的样式更改

问题描述

我想在将鼠标悬停在表格行上时测试样式，但我无法实现：

这是我的测试代码：

  it("Table rows hover styles should be correct", () => {
    cy.get("table>tbody>tr").each(($el, index, $list) => {
      $el.trigger("mouseover");
      expect($el).to.have.css("background-color", "rgb(242, 242, 242)");
    });
  });

但background-color值是悬停之前的值。

这是柏树错误：

expected '<tr>' to have CSS property 'background-color' with the value 'rgb(242, 242, 242)', but the value was 'rgba(0, 0, 0, 0)'

标签： htmlcsscypresse2e-testing

解决方案

您为什么不尝试使用 cypress 验证，有可能在悬停完成之前执行测试，并且使用 cypress 它会等待它：

it("Table rows hover styles should be correct", () => {
    cy.get("table>tbody>tr").each(($el, index, $list) => {
      $el.trigger("mouseover");
      $el.should('have.css', 'background-color', 'rgb(242, 242, 242)');
    });
  });

推荐阅读