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

Question

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)'

Answer 1

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')