cypress check color of css background

You can do something like this:

1. Install the rgb-hex package

npm install rgb-hex

2. In your test suite file import the package

import rgbHex from 'rgb-hex';

3. In your test write:

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

I'd take the reverse approach of Alapan -- I prefer to modify my expected and leave my actual values alone. To do this, you'd need a way to turn your expected Hex value into the rgb() format.

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

If you wanted to include the # in the hex string, you would just need to ignore it in setting the values, most likely by increasing every number in the substring() functions by one.

Overall, I think that Alapan's solution is easier, but this is just something to consider.