CODEWITHSUNDEEP
cypress
Deyaa
Deyaa

Reputation: 143

cypress check color of css background

I have this assertion :

cy.get('.myelement').should('have.css', 'background-color','rgb(75, 221, 51)')

I want to replace it with hexadecimal representation as following:

cy.get('.myelement').should('have.css', 'background-color','#4BDD33')

but I get this error from cypress :

expected <.myelement> to have CSS property background-color with the value #4BDD33, but the value was rgb(75, 221, 51) any help

Upvotes: 7

Views: 14606

Answers (2)

Alapan Das
Alapan Das

Reputation: 18650

You can do something like this:

  1. Install the rgb-hex package
npm install rgb-hex
  1. In your test suite file import the package
import rgbHex from 'rgb-hex';
  1. In your test write:
cy.get('.myelement')
  .invoke('css', 'background-color')
  .then((bgcolor) => {
    expect(rgbHex(bgcolor)).to.eq('4bdd33')
  })

Upvotes: 6

agoff
agoff

Reputation: 7125

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.

Upvotes: 5

Related Questions