Cypress: How to save CSS color to a variable?-CodePudding

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
}

CodePudding user response：

You almost have it, but need to use .then() or a .should() after the Cypress commands, which do not give you anything useful when you assigning to a variable (the first code block)

cy.get('myElement').should('have.css', 'color')
  .should(color => {
    const white = 'rgb(255, 255, 255)'
    const black = 'rgb(0,0,0)'
    const chartreuse = 'rgb(127, 255, 0)'
    expect(color).to.be.oneOf([white, black, chartreuse])
  }

const white = 'rgb(255, 255, 255)'
const black = 'rgb(0,0,0)'
const chartreuse = 'rgb(127, 255, 0)'

cy.get('myElement')
  .should('have.css', 'color')
  .and('be.oneOf', [white, black, chartreuse])

The second code block is assigning color value correctly, but the timing is wrong - the if()...else runs before the value is assigned. Also use a .then() to correct the timing

let color
cy.get('myElement').then(($element) => {
  color = $element.css('color')
})

// other commands...

cy.then(() => {
  expect(color).to.be.oneOf([white, black])
})

Or assign the color value to an alias (but you also access the alias value from a .then()).