CODEWITHSUNDEEP
javascriptcypress
soccerway
soccerway

Reputation: 11931

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

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

Upvotes: 18

Views: 25205

Answers (4)

Matar Stiglitz
Matar Stiglitz

Reputation: 31

short solution:

cy.get('#footer').should('have.css', 'background-color', '#f2e47d')

expected #footer to have CSS property background-color with the value #f2e47d.

Upvotes: 2

Sylhare
Sylhare

Reputation: 7059

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

Upvotes: 6

David Z.
David Z.

Reputation: 231

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

Upvotes: 9

soccerway
soccerway

Reputation: 11931

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

Upvotes: 19

Related Questions