javascript - Is there a way to make check on HEX color - Cypress - Stack Overflow

admin管理员组

文章数量:1345054

I am currently busy with testing on Cypress . I am actually new so i am not so familiar with everything around , but i am trying to test a CSS property of background-color on certain element , but the problem is that behind the scenes everything is RGB , but i need to test on HEX . So i ask myself is there a way to do that or a translation should be necessary ?

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

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

I am currently busy with testing on Cypress . I am actually new so i am not so familiar with everything around , but i am trying to test a CSS property of background-color on certain element , but the problem is that behind the scenes everything is RGB , but i need to test on HEX . So i ask myself is there a way to do that or a translation should be necessary ?

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

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

• javascript
• testing
• cypress

Share Improve this question Follow asked Mar 2, 2021 at 11:26 PandaMastrPandaMastr 69533 gold badges1515 silver badges4242 bronze badges 7

• Is the question how to turn hex codes to rgb? – Josh Hales Commented Mar 2, 2021 at 11:28
• Did you read e.g. github./cypress-io/cypress/issues/2186? – jonrsharpe Commented Mar 2, 2021 at 11:29
• 1 Another possibility is to install the chai-colors assertion library, then you can do something like cy.get('#button-login').should('have.css', 'background-color').and('be.colored', '#6a7ba3') – John M Commented Mar 2, 2021 at 11:34
• @JohnM how does this library is used inside of the Cypress . I cannot understand clear enough . Thanks – PandaMastr Commented Mar 2, 2021 at 12:00
• 1 See https://www.chaijs./plugins/chai-colors/ – John M Commented Mar 2, 2021 at 12:46

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 9

You can achieve what you want using the chai-colors assertion plugin.

Install as follows:

npm install chai-colors

Then add this to your code:

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

Or this, as applicable:

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

Now you can write your assertion like this:

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

I was facing error with chai-colors so I used the tinycolor2 library to assert the color as follows

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 ponent 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]);
      });
    });
  });
});

I did this first step my function (convert hex to rgb) is in place file mands.ts

 export const hexToRgb = (hex: string) => {
  let r = 0;
  let g = 0;
  let b = 0;

  // 3 digits
  if (hex.length === 4) {
    r = parseInt(`${hex[1]}${hex[1]}`, 16);
    g = parseInt(`${hex[2]}${hex[2]}`, 16);
    b = parseInt(`${hex[3]}${hex[3]}`, 16);

  // 6 digits

  } else if (hex.length === 7) {
    r = parseInt(hex.slice(1, 3), 16);
    g = parseInt(hex.slice(3, 5), 16);
    b = parseInt(hex.slice(5, 7), 16);
  }
  // return rgb value , alert on space
  return `rgb(${r}, ${g}, ${b})`;
};

in second step

import {
hexToRgb,
} from '../../support/mands';

it('correct colors for elements', () => {
cy.get(byTestId('admin-roll-up-menu')).click();
cy.get(byTestId('link-to-panies')).click();

testLoadPage('select-pany-btn-3', '/accountant/overview');
cy.wait('@authSwitchCompany').should(({ request }) => {
  expect(request.body.panyId, 'panyId').to.eq(3);
});
defualControllerColorsLight();
cy.get(byTestId('overview-graph')).should(
  'have.css',
  'background-color',
  hexToRgb('#ffffff'),
);
cy.get(byTestId('graph-title')).should(
  'have.css',
  'color',
  hexToRgb('#292929'),
); 
});

and result enter image description here

本文标签： javascriptIs there a way to make check on HEX colorCypressStack Overflow