cypress 检查 css 背景的颜色

Question

我有这个断言：

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

我想用十六进制表示替换如下：

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

但我从赛普拉斯那里得到这个错误：

预期 <.myelement> 具有 CSS 属性值为 #4BDD33 的背景颜色，但值为 rgb(75, 221, 51) 任何帮助

Answer 1

你可以这样做：

安装 rgb-hex 包

npm install rgb-hex

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

import rgbHex from 'rgb-hex';

在你的测试中写：

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

Answer 2

我会采用与 Alapan 相反的方法——我更愿意修改我的预期并保留我的实际值。为此，您需要一种方法将预期的十六进制值转换为 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 的解决方案更简单，但这只是需要考虑的问题。

cypress 检查 css 背景的颜色

cypress check color of css background

cypress