Autotest en Cypress
Primeras impresiones y problemas encontrados
Dmitry Kochergin, desarrollador principal de software de Luxoft En
primer lugar, me gustaría señalar que no soy un autotest profesional, sino un programador de Java. Pero un día llegó la tarea de realizar pruebas de humo para la verificación básica de las funciones principales de una aplicación que recientemente se rompió por un cambio en la API del servicio dependiente sin previo aviso.
El artículo será de interés para todos los que estaban interesados en realizar pruebas automáticas desde cero en JS, pero tenían miedo de preguntar.
Para empezar, nunca he leído nada sobre pruebas automáticas. La idea preconcebida principal era que las pruebas automáticas son difíciles, porque según las revisiones, puede configurar este Selenium ... Además, necesita aprender XPath y PageObject, lo que no quería hacer en absoluto.
Una búsqueda rápida en Internet arrojó herramientas más jóvenes y prometedoras: WebDriver.IO , Pupeteer (y ahora Playwright es mejor) y Cypress. Elegí este último, compré hermosas promesas y algunos comentarios de holivars sobre las mejores herramientas para autotests.
Así es como se ve la ventana del navegador de una prueba en ejecución. A la izquierda están los comandos de prueba ejecutados y el estado, a la derecha está la vista de la aplicación durante la ejecución de la prueba:
así es como se ve el código de prueba (en Cypress, todo el código está en JS y los selectores son selectores CSS ordinarios):
En tiempo de ejecución se ve así:
Mientras buscaba una herramienta para las pruebas automáticas, tenía una imagen en mi cabeza de que las pruebas se pueden crear directamente en el navegador, de modo que simplemente puedo "hacer clic en la entrada del script", el sistema registró mis acciones (selectores CSS de los elementos en los que hice clic). Luego miro la prueba generada, modifico los selectores si es necesario y la guardo en Test Suite. Eh ...
La historia resultó ser inalcanzable entonces y no encontré tales herramientas (quizás alguien te diga la forma correcta en los comentarios). Pero Cypress fue sobornado por el hecho de que las pruebas se ejecutan en un navegador real, e incluso puede explorar el DOM en paralelo con la ejecución de la prueba con sus herramientas de desarrollador de Chrome favoritas (si, por ejemplo, el selector no funcionó, puede abrir la consola y ver inmediatamente por qué cuando se ejecuta la prueba).
De los otros parámetros que eran importantes para mí, críticamente no quería dedicar mucho tiempo a escribir (nuevamente, a escribir una prueba en un navegador) ni a mantener pruebas. Esto fue suficiente para mis propósitos. Solo para obtener información sobre Cypress: desde el momento en que abrí el sitio web de Cypress por primera vez hasta la primera prueba que inicia sesión en la aplicación, tomó 1 hora.
Entonces, Cypress, la primera página del marco nos dice que este es el marco de pruebas de extremo a extremo de JavaScript ( cypress.io ). A continuación, leemos rápidamente la documentación, está realmente completa y puede encontrar respuestas a casi todas las preguntas (encontré rápidamente todo lo demás en StackOverflow):
Más adelante en la lista de características del sitio:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- Capturas de pantalla y videos: Cypress graba un video de la pantalla del navegador (MP4) durante la prueba, junto con instrucciones en la ventana.
Todo esto, por supuesto, se puede ejecutar sin un navegador abierto en CI, se usa Chrome o Electron sin cabeza.
Pero también hubo algunos problemas.
Al principio, no sabía que podía esperar a que finalizaran las solicitudes XHR al servidor, y en su lugar inserté tiempos de espera y las pruebas caerían al azar. Corregido.
Luego, Hot Reload funcionó cada dos veces, tuve que reiniciar constantemente todo Cypress, porque no estaba seguro de que se aplicaran mis cambios. Resultó que en mi IDE (IntelliJ IDEA) hay tales casillas de verificación incorrectas, que también están habilitadas por defecto, por lo que resulta que guardar un archivo no es guardar, sino eventualmente guardar.
El siguiente problema fue que mi aplicación estaba usando la recuperación de ventanas para solicitudes al servidor, y Cypress solo ve solicitudes XHR. El truco sucio de StackOverflow ayudó (entiendo que el método de recuperación se elimina de la ventana para que el navegador haga una reserva en XHR en lugar de recuperar):
Luego, surgió el problema de emular un navegador móvil, simplemente no funcionó en el código de prueba del agente de usuario, sino en un archivo especial separado - todo salió bien.
Además, la solución al problema de CORS:
luego la carga de archivos, no funcionó de la nada, las soluciones estándar no funcionaron, pero la biblioteca cypress-file-upload ayudó:
El único problema que no pude resolver fue la reproducibilidad de la prueba. Es decir, datos iniciales estables e idénticos para ejecutar la prueba (accesorios), esto es más un problema de configuración, no Cypress, pero aún no está resuelto.
Como resultado, Cypress parece una gran herramienta para introducir pruebas automáticas en un proyecto si:
- Tener conocimiento de JS
- No es necesario realizar pruebas en todo tipo de navegadores desde IE6 (Cypress actualmente es compatible con Chrome, Chromium, Edge, Electron, Firefox). Aquí hay una discusión del tema . Pero puedo decir que hace un año, cuando comencé a trabajar con Cypress, solo admitía la última versión de Chrome y Electron para lanzamientos sin interfaz de usuario.
- Quiere hacer pruebas rápidamente y olvidarse de ellas hasta que alguien rompa la aplicación :)
Cypress: ¡tómalo y úsalo!