如何用Cypress测试表格行Hover样式？测试未获取Hover后样式

我之前也碰到过一模一样的情况——用Cypress测试表格行的hover样式时，总是拿到hover前的背景色，报错内容和你完全一致。先理清楚你的问题场景：

你编写的测试代码是这样的：

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

执行后Cypress抛出错误：

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

这主要是Cypress的异步特性和CSS伪类样式的获取逻辑导致的，给你几个可行的解决思路：

• 用Cypress链式命令处理异步逻辑：直接用jQuery对象触发mouseover后，Cypress不会等待样式更新就执行断言了。改成用cy.wrap()把jQuery对象转换成Cypress对象，让命令进入异步队列，确保事件触发完成后再检查样式：

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

• 获取浏览器计算后的样式（针对:hover伪类场景）：如果你的hover样式是通过CSS的:hover伪类定义的，元素本身的style属性不会直接包含这个样式，得用getComputedStyle获取浏览器计算后的最终样式：

it("Table rows hover styles should be correct", () => { 
  cy.get("table>tbody>tr").each(($el) => { 
    cy.wrap($el).trigger("mouseover").then(() => {
      const computedStyle = window.getComputedStyle($el[0]);
      expect(computedStyle.backgroundColor).to.equal("rgb(242, 242, 242)");
    });
  }); 
});

注意这里要取$el[0]，因为getComputedStyle需要的是原生DOM元素，而非jQuery对象。

• 确保元素处于视图可见范围内：如果表格行不在当前视图窗口里，mouseover事件可能无法正确触发样式变化，加个scrollIntoView确保元素可见：

it("Table rows hover styles should be correct", () => { 
  cy.get("table>tbody>tr").each(($el) => { 
    cy.wrap($el).scrollIntoView().trigger("mouseover").then(() => {
      const computedStyle = window.getComputedStyle($el[0]);
      expect(computedStyle.backgroundColor).to.equal("rgb(242, 242, 242)");
    });
  }); 
});

你可以先试试第一种方法，如果是伪类样式的问题就切换到第二种，一般就能解决啦。

内容的提问来源于stack exchange，提问作者BeHappy