Блог

У меня возникли проблемы с поиском способа сохранения значения цвета CSS в переменной с помощью Cypress в моем приложении React.

Я прекрасно понимаю утверждения:

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

Проблема в том, что элемент, который я пытаюсь протестировать, потенциально может быть двух разных цветов при загрузке страницы, поэтому я не могу утверждать, что один цвет, так как другой может быть истинным, и оба считаются vald.

Что я хотел бы, так это иметь возможность хранить текущий цвет в переменной, чтобы я знал, какой цвет я должен утверждать.

Нравится:

 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
}
 

или:

 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
}
 

У вас почти есть это, но вам нужно использовать .then() или .should() после команд Cypress, которые не дают вам ничего полезного при назначении переменной (первый блок кода)

 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])
 

Второй блок кода правильно присваивает значение цвета, но время выбрано неправильно — if()...else запуски выполняются до присвоения значения. Также используйте a .then() для корректировки времени

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

// other commands...

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

Или назначьте значение цвета псевдониму (но вы также получаете доступ к значению псевдонима из a .then() ).