Cypress测试Angular项目时十六进制背景色断言失败如何解决？

问题根因 #

浏览器调用getComputedStyle接口返回的CSS颜色属性默认为RGB/RGBA格式，不会直接返回代码中写入的十六进制色值，直接做全等对比必然不匹配。你使用的#0da2ff对应的标准RGB值为rgb(13, 162, 255)，报错信息中返回的应该就是这个值。

可选解决方案 #

1. 直接使用RGB值校验（最简方案，无额外依赖） #

直接将断言的目标值替换为对应RGB格式即可，还可以将断言合并简化：

it('color', () => {
  cy.get(':nth-child(5) > .example-button-row > :nth-child(1)')
    .should('exist')
    .should('have.css', 'background-color', 'rgb(13, 162, 255)');
});

2. 统一转换为十六进制格式校验 #

如果测试用例中统一维护十六进制色值，不想逐个转换为RGB，可以自定义工具函数做格式转换后再对比：

// RGB转十六进制工具函数
function rgbToHex(rgbStr) {
  const [r, g, b] = rgbStr.match(/\d+/g).map(Number);
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

it('color', () => {
  cy.get(':nth-child(5) > .example-button-row > :nth-child(1)')
    .should('exist')
    .should('have.css', 'background-color')
    .then(bgColor => expect(rgbToHex(bgColor)).to.eq('#0da2ff'));
});

3. 带透明度的RGBA场景适配 #

如果校验的色值带有透明度，只需调整工具函数支持RGBA解析，或直接对比对应RGBA格式值即可，完全不透明的#0da2ff对应RGBA值为rgba(13, 162, 255, 1)。

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