Unable to test the background color of a footer using Cypress.io, it throws error

Question

Unable to test the background color using Cypress.io, it throws following error while running the cypress test; CypressError: Timed out retrying: actual.equals is not a function. Installed chai-colors via npm install chai-colors and added following under /support/ index.js

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

cypress test given below:

describe("Background Color test", () => {
  //before(() => {
  //  cy.visit('https://sometesturl.com')
//  })
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
      cy.get('#footer')
        .should('colored', '#f2e47d')
        .and('be.colored', '#f2e47d')
  })
})

Answer 1

I have tried with 'eq' and 'rgb' values corresponding to colour #f2e47d. In the following link 'brian-mann' from cypress.io affirms that says 'match' is always for regex. https://github.com/cypress-io/cypress/issues/58 Now the test got successfully asserting the background-color value in the footer area.

describe("Background Color test", () => {
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
     cy.get('#footer')
       .should('have.css', 'background-color')
       .and('eq', 'rgb(242, 228, 125)')
  })
})

Answer 2

chai-colors only tests equality of different color representations.

To test that your #footer element has a certain background color, you will need to use the Cypress css() assertion.

describe("Background Color test", () => {
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
     cy.get('#footer')
       .should('have.css', 'background-color')
       .and('eq', 'rgb(242, 228, 125)')
  })
})