如何在Cypress上悬停测试样式更改

Question

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

这是我的测试代码：

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

Answer 1

为什么不尝试使用赛普拉斯验证，则可能在悬停完成之前执行了测试，而使用赛普拉斯将等待它：

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