是否有一种方法来检查HEX颜色-柏树

Question

我目前正忙于测试Cypress。我实际上是新的，所以我不太熟悉周围的一切，但我试图测试background-color对某些元素的CSS属性，但问题是，在幕后一切都是RGB，但我需要对HEX进行测试。所以我问自己有没有办法做到这一点，或者翻译应该是必要的?

cy.get('#button-login')
.should('have.css', 'background-color', "#6a7ba3")

误差:...to have CSS property 'background-color' with the value '#6a7ba3', but the value was 'rgb(106, 123, 163)'

Answer 1

您可以使用chai-colors断言插件实现您想要的功能。

安装如下:

npm install chai-colors

然后添加到你的代码:

import chaiColors from 'chai-colors'
chai.use(chaiColors)

或者这个，如适用:

var chaiColors = require('chai-colors');    
chai.use(chaiColors);

现在你可以这样写断言:

cy.get('#button-login')
.should('have.css', 'background-color')
.and('be.colored', '#6a7ba3')

Answer 2

我面临chai-colors的错误，所以我使用tinycolor2库来断言颜色如下

import Toast from './index';
import { themedMount } from '../../../cypress/index';
import tinycolor from 'tinycolor2';
const toastColorMap: Record<string, string> = {
success: '#cff5c4',
error: '#fbcfc8',
};
const toasts = [
{ _id: '1', message: 'success toast notification', type: 'success' },
{ _id: '2', message: '2 success toast notification', type: 'error' },
{ _id: '3', message: 'error toast notification', type: 'error' },
];
describe('Toast.cy.tsx', () => {
it('Toast component renders toasts properly', () => {
themedMount(<Toast toasts={toasts} />);
toasts.forEach((t) => {
const toastElement = cy.contains(t.message);
toastElement.should('have.css', 'background-color').then((bg) => {
const color = tinycolor(bg);
expect(color.toHexString()).equal(toastColorMap[t.type]);
});
});
});
});