I'm struggling to figure out how to save a CSS color value to a variable using Cypress in my React application.
I have a good understanding of the assertions, such as:
cy.get('myElement').should('have.css', 'color').and('eq', 'rgb(255, 255, 255)')The issue arises because the element I need to test could be one of two different colors when the page loads. Therefore, I cannot simply assert for one color as both are valid possibilities.
What I'd like to do is store the current color in a variable so that I can determine which color to assert against.
For example:
var color = cy.get('myElement').should('have.css', 'color')
if(color === 'rgb(255, 255, 255)') {
//assert color should be white
}
else {
//assert color should be black
}
or:
var color = null
cy.get('myElement').then(($element) => {
color = $element.color()
})
if (color === 'rgb(255, 255, 255)') {
//assert color should be white
}
else {
//assert color should be black
}