cypress 检查 css 背景的颜色

Question

我有这样的断言：

cy.get('.myelement').should('have.css', 'background-color','rgb(75, 221, 51)')

我想将其替换为十六进制表示形式，如下所示：

cy.get('.myelement').should('have.css', 'background-color','#4BDD33')

但我从 cypress 收到此错误：

预期 <.myelement> 具有值为 #4BDD33 的 CSS 属性 background-color，但该值为 rgb(75, 221, 51) 任何帮助

Answer 1

你可以这样做：

1. 安装rgb-hex包

npm install rgb-hex

2. 在您的测试套件文件中导入包

import rgbHex from 'rgb-hex';

3. 在你的测试中写：

cy.get('.myelement')
  .invoke('css', 'background-color')
  .then((bgcolor) => {
    expect(rgbHex(bgcolor)).to.eq('4bdd33')
  })

Answer 2

我会采取与阿拉潘相反的方法——我更喜欢修改我的预期并保留我的实际值。为此，您需要一种方法将预期的十六进制值转换为 rgb() 格式。

const hexToRgb = (hex) => {
  const rValue = ParseInt(hex.substring(0, 2), 16);
  const gValue = ParseInt(hex.substring(2, 4), 16);
  const bValue = ParseInt(hex.substring(4), 16);
  return `rgb(${rValue}, ${gValue}, ${bValue})`;
}

cy.get('.myelement').should('have.css', 'background-color', hexToRgb('4BDD33'));

如果您想#在十六进制字符串中包含 ，则只需在设置值时忽略它，最有可能的方法是将函数中的每个数字加substring()一。

总的来说，我认为 Alapan 的解决方案更简单，但这只是需要考虑的事情。