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

9
votes

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')
  })
})
3
javascriptcypress

3 Answers

9
votes

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

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)')
  })
})
1
votes

it seems you are using the wrong syntax with chai-colors. Make sure you have installed it:

npm install chai-colors --save-dev

Then in your test use .should('have.css', 'background-color') instead, like:

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

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('be.colored', '#f2e47d')
  });
});

If you get an error like #000000 is not equal to #f2e47d that means your selector in the get doesn't have a background-color, so make sure you get the right element. 😉

Source: Cypress recipes example cypress-io#102