Estoy tratando de tomar una captura de pantalla de un elemento con el efecto de desplazamiento, pero las capturas de pantalla siempre salen sin el efecto de desplazamiento.
tableListMaps.lineWithText('Hello world', 'myLine'); cy.get('@myLine').realHover().within(() => { highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE); }); cy.screenshot('downloadScreenshot');Si luego vuelvo y paso el mouse sobre este elemento, puedo ver que lo que estaba tratando de resaltar se resaltó correctamente, pero no fue capturado por la captura de pantalla.
¿Hay alguna manera de "fijar" el efecto de desplazamiento?
Limitación conocida. Consulte la documentación de dmtrKovalenko/cypress-real-events :
- ¿Por qué el estado flotante
cy.realHoverno se muestra en los servicios de regresión visual?Desafortunadamente, los servicios de regresión visual como Happo y Percy no resuelven este problema. Su arquitectura se basa en guardar la instantánea dom, no la captura de pantalla, y luego renderizar la instantánea en sus máquinas. Significa que el estado de desplazamiento y enfoque se perderá si no se serializa manualmente.
Significa que si usará
cy.screenshotsimple, tomará una captura de pantalla con un estado flotante porque usará el navegador para hacer una captura de pantalla. Es posible probar el estado flotante con, por ejemplo, Visual Regression Tracker y cypress-image-snapshot.
Como lo señaló dmtrKovalenko aquí :
Sí, esto es probablemente imposible :) Cypress está trabajando en la preparación entre capturas de pantalla que romperán el desplazamiento
Pero me las arreglé para hacer una solución. La solución fue configurar manualmente el CSS esperado en estado flotante. Ejemplo:
tableListMaps.lineWithText('Hello world', 'myLine'); cy.get('@myLine').within(() => { cy.get(commonMaps.BUTTON_DOWNLOAD_INLINE).then(($element) => { $element.css('visibility', 'visible'); }); highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE); }); cy.screenshot('downloadScreenshot');Dado que al pasar el mouse sobre myLine, la visibilidad del botón se configuraría como "visible", lo que hice fue configurarlo yo mismo a través de CSS.
De esta manera, puedo tomar la captura de pantalla como si el elemento estuviera realmente sobrevolado. Luego configuré la visibilidad en oculto nuevamente y el color de fondo también en el original.
TL; DR: simplemente simule un efecto de desplazamiento con CSS y tome la captura de pantalla.
cy.get(myElement).then(($element) => { $element.css('visibility', 'visible'); $element.css('background-color', '#F2F2F2'); });