Tengo problemas para encontrar una manera de guardar un valor de color CSS en una variable usando Cypress en mi aplicación React.
Entiendo bien las afirmaciones:
cy.get('myElement').should('have.css', 'color').and('eq', 'rgb(255, 255, 255)')
El problema es que el elemento que estoy tratando de probar puede ser potencialmente dos colores diferentes en la carga de la página, por lo que no puedo afirmar un color ya que el otro puede ser verdadero, y ambos se consideran válidos.
Lo que me gustaría es poder almacenar el color actual en una variable para saber qué color debo afirmar.
Me gusta:
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 }o:
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 }Casi lo tiene, pero necesita usar .then() o .should() después de los comandos de Cypress, que no le brindan nada útil cuando asigna una variable (el primer bloque de código)
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]) }o
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]) El segundo bloque de código está asignando el valor del color correctamente, pero el tiempo es incorrecto: if()...else se ejecuta antes de que se asigne el valor. También use un .then() para corregir el tiempo
let color cy.get('myElement').then(($element) => { color = $element.css('color') }) // other commands... cy.then(() => { expect(color).to.be.oneOf([white, black]) }) O asigne el valor del color a un alias (pero también accede al valor del alias desde un .then() ).