Test color with chai-colors plugin

July 19, 2022

I’m trying to add chai-colors plugin to Cypress, from How to install the plugin "Chai Sorted" #2441

Chris Breiding gives

import chaiSorted from "chai-sorted"
chai.use(chaiSorted)

so for chai-colors

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

cy.visit(...)
cy.get(selector)
  .should('be.colored', '#000000')

but this gives the error "Timed out retrying after 4000ms: actual.equals is not a function"

>Solution :

To use chai-colors inside a .should() you need to pass in the color code itself (not the element)

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

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('color'))       // get color value
  .should('be.colored', '#000000')

But note, this fails

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

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('backgroundcolor'))       // get color value
  .should('be.colored', '#000000')

expected #000000 to be the same color as #000000

because $el.css('backgroundcolor') returns rgba() instead of rgb().

You would be better off importing onecolor which chai-colors uses internally.

Then use the converter any way you want (plus documentation is way better).

import color from 'onecolor'

cy.visit(...)
cy.get(selector)
  .then($el => $el.css('backgroundcolor'))       // get color value
  .should(colorValue => {
    expect(color(colorValue).hex()).to.eq('#000000') 
  })