如何在Cypress中正确校验元素背景色不为指定值

报错原因 #

should("have.css", "background-color")执行后会返回背景色的字符串值，不再是DOM元素对象，而.not()是Cypress用于过滤DOM元素集合的方法，无法处理字符串类型的输入，因此触发报错。

正确实现方式 #

方法1：直接使用not.have.css断言（最简洁）

Cypress的have.css断言原生支持第三个参数作为属性匹配值，加上not前缀即可直接实现不等于的校验：

cy.get(".communications-icon")
  .should("not.have.css", "background-color", "rgb(232, 238, 242)");

方法2：回调内做断言（适合需要二次处理属性值的场景）

如果需要先拿到背景色值做格式转换等额外处理，可以把断言写在should/and的回调内：

cy.get(".communications-icon")
  .should("have.css", "background-color")
  .and(bgColor => {
    // 此处可先对bgColor做格式统一，比如转为rgb/rgba/十六进制统一格式
    expect(bgColor).not.to.eq("rgb(232, 238, 242)")
  })

注意事项 #

不同浏览器返回的CSS颜色值格式可能存在差异，比如部分场景下会返回rgba格式、十六进制格式而非你预期的rgb格式，建议先确认测试运行环境的返回格式，或提前对拿到的颜色值做格式统一后再对比，避免误判。

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