0
votes

I am having trouble finding a way to save a CSS color value to a variable using Cypress in my React app.

I understand the assertions fine:

cy.get('myElement').should('have.css', 'color').and('eq', 'rgb(255, 255, 255)')

The problem is the element I am trying to test can potentially be two different colors on page load, so I cannot assert for one color since the other may be true, and both are considered vald.

What I would like is to be able to store the current color into a variable so I know which color I should assert.

Like:

var color = cy.get('myElement').should('have.css', 'color')

if(color === 'rgb(255, 255, 255)') {
    //assert color to be white
}
else {
    //assert color to be black
}

or:

var color = null
cy.get('myElement').then(($element) => {
    color = $element.color()
})

if (color === 'rgb(255, 255, 255)') {
   //assert color to be white
}
else {
   //assert color to be black
}