Home > database >  Cypress test fails for hexadecimal color in Angular
Cypress test fails for hexadecimal color in Angular

Time:10-28

I have a hexadecimal background color. But when I test in cypress it gives me an error. And in the error it shows some other color. But I am providing correct color. My code is given below:

it('color', () => {
  cy.get(':nth-child(5) > .example-button-row > :nth-child(1)')
    .should('exist')
    .should('have.css', 'background-color')
    .and('eq', '#0da2ff');
});

CodePudding user response:

eq works with rgb equivalent of hexdecimal color. There are two ways of solving it.

1. Use rgb color with eq.

2. Use be.colored instead of eq

Both examples are given below:

By using rgb with eq :

it('color', () => {
  cy.get(':nth-child(5) > .example-button-row > :nth-child(1)')
    .should('exist')
    .should('have.css', 'background-color')
    .and('eq', 'rgb(13, 162, 255)');
});

By using be.colored :

it('color', () => {
  cy.get(':nth-child(5) > .example-button-row > :nth-child(1)')
    .should('exist')
    .should('have.css', 'background-color')
    .and('be.colored', '#0da2ff');
});
     
  • Related