Tengo que probar este svg, ahora no me preguntes por qué, ¡lo necesito y estoy haciendo algunas pruebas!
<svg class="custom-background" width="1864" height="441" style="background: linear-gradient(to right, rgb(255, 255, 255) 3.21888%, rgba(255, 0, 0, 0.1) 3.21888%) 0% 0% / auto 381px no-repeat;"> </svg>En mi texto escribí esto:
cy.get('svg') .should(`have.attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91.4872%, rgba(255, 0, 0, 0.1) 91.4872%) 0% 0% / auto 403px no-repeat`);Solo estoy intentando, porque en el futuro tendré que insertar porcentajes que provengan de variables calculadas dinámicamente. Pero esto es otra cosa. La cuestión es que ya haciendo esto me da error:
No se encontró el chainer attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91. No se pudo construir la aserción.
No puedo entender por qué, es la primera vez que hago este tipo de prueba, y no pude encontrar mucho al respecto en la documentación...
En lugar de agregar el valor completo del atributo de style , puede simplemente agregar el valor que desea afirmar mediante include .
cy.get('svg') .should('have.attr', 'style') .and('include', '91.4872%')El error "The chainer attr', 'style', 'background: linear-gradient..." aparece porque tiene la marca de retroceso en el lugar equivocado.
Tú tienes
`have.attr'pero eso debería ser
'have.attr'así que reemplace la primera marca invertida con otra marca única coincidente.
Luego, el valor de estilo que desea hacer coincidir debe comenzar con una marca de retroceso, por lo que
`background: linear-gradient...`en vez de
'background: linear-gradient...` Finalmente, para insertar valores dinámicos use ${value}
por ejemplo
const value1 = '91.4872%' const value2 = '381px' cy.get('svg') .should('have.attr', 'style', `background: linear-gradient(to right, rgb(255, 255, 255) ${value1}, rgba(255, 0, 0, 0.1) ${value1}) 0% 0% / auto ${value2} no-repeat;`)He usado algo como esto en las pruebas que ejecuto para verificar los paquetes de temas. Estoy seguro de que podrá ajustarlo para que funcione para usted.
cy.get(elementSelector).should('have.css', 'background-color', (rgb(255, 255, 255)))No estoy seguro de si esto funcionará, pero intente
cy.get(elementSelector).should('have.svg', 'background-color', (rgb(255, 255, 255)))