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

【问题标题】：How to test styles changes on hover with cypress如何使用柏树测试悬停时的样式更改
【发布时间】：2020-07-09 11:08:16
【问题描述】：

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

这是我的测试代码：

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

【问题讨论】：

标签： html css cypress e2e-testing

【解决方案1】：

您为什么不尝试使用 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)');
    });
  });

【讨论】：