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
}