¡Hola a todos!
Me llamo Roman Mostafin. Soy un probador automatizado en Clover y generalmente escribo pruebas automáticas en pytest + selenium. Recientemente, nuestro equipo de desarrollo front-end comenzó a usar Cypress para escribir pruebas en la interfaz de usuario en el proyecto Smart Locomotive para automatizar las pruebas de regresión. Me ofrecí para ayudarlos y me impregné de esta tecnología. En este artículo hablaré sobre Cypress y cómo crear mi primera prueba en él.Cypress es un marco relativamente nuevo para escribir pruebas de Javascript. Implementa su navegador e inyecta pruebas en el código de las páginas.Cypress tiene las siguientes ventajas:- admite la escritura de pruebas modulares, de integración y de extremo a extremo,
- tiene buena documentación
- tiene una interfaz amigable e intuitiva para iniciar, ver y depurar,
- tiene utilidades útiles para simplificar la escritura de prueba.
Como resultado, tenemos un marco universal y conveniente para escribir varios tipos de pruebas.Teoría
Para escribir una prueba, se requieren seis funciones básicas. Considérelos y algunos argumentos para ellos, que son necesarios como ejemplo.1. cy.visit ()
Este método se utiliza para ir a la página de la aplicación. Como argumento, toma una cadena con la dirección de la página de la aplicación:cy.visit(‘http:
2. cy.get ()
Este método se utiliza para obtener un elemento del modelo DOM de una página web. Toma los siguientes argumentos:- localizador de elementos: la dirección en la que se puede encontrar el elemento;
- tiempo de espera: tiempo durante el cual el ciprés buscará un elemento en la página (por defecto son 4 segundos).
cy.get(‘div[class=”topbar”]’, {timeout: 3000})
3. .type ()
El método .type se usa para completar formularios de texto y varios campos. Tiene los siguientes argumentos:- El texto a ingresar es el texto en una representación de cadena. Además, el texto puede indicar comandos de teclado resaltados con llaves;
- tiempo de espera: el retraso antes de ejecutar el comando de tipo.
cy.get(‘input’).type(‘Hello world’, {timeout: 3000})
4. cy.wait ()
Este método se utiliza para detener temporalmente la ejecución de comandos. También se puede usar para esperar a que se completen las solicitudes HTTP. Tiene el tiempo de espera del argumento, directamente el tiempo de espera.cy.wait(3000)
5. cy.fixture ()
Este método se utiliza para obtener datos de prueba. Acepta el nombre del archivo json como entrada.6. cy.should ()
Método para verificar la expresión. Acepta los siguientes argumentos:- un comando para comparación es una condición en la cual se verificará un elemento;
- resultado esperado: el resultado esperado de la verificación.
Práctica
Tome el formulario de autorización de Yandex y, como ejemplo, verificaremos la autorización con un inicio de sesión inexistente y la autorización con una contraseña inexistente. Para hacer esto, haga los preparativos preliminares:1. Cree una carpeta para el nuevo proyecto.2. Vaya a la carpeta del proyecto y ejecute el comando para instalar Cypress:npm install cypress --save-dev
3. Ejecute el comando cypress:npx cypress open
4. Después de comenzar, asegúrese de que aparezca la siguiente jerarquía en el directorio del proyecto:
Ahora necesita crear un dispositivo. Lo necesitamos para separar los datos de la prueba de la prueba misma.1. Cree un archivo 'cypressTest.json' en la carpeta 'fixtures' con el siguiente contenido:
2. A continuación, en la carpeta 'integración' cree un archivo llamado 'habr_cypress_test.spec.js':
3. Haga una descripción de todo el caso de prueba utilizando la función ' describe ':
4. Dentro de la función' describir 'crearemos nuestras pruebas. Escribiremos el título de la primeraprueba:
5. El siguiente paso es escribir la llamada de datos desde el dispositivo:
Finalmente, creamos la prueba en sí, utilizando el conocimiento de las funciones de Cypress.
Por analogía, creamos la segunda prueba.
Accedemos a la aplicación Cypress, encontramos nuestra prueba y hacemos clic en su nombre.
A continuación, se abre la página del navegador que ejecuta Cypress y comienza la prueba: a la izquierda, en una columna separada, puede ver los pasos detallados del proceso. Debe esperar a que se complete la prueba.
¡Felicitaciones, escribiste tus primeras pruebas de Cypress!PD: Quiero agradecer a nuestro equipo de front-end, y en particular a Adele Khamatov, por su ayuda para aprender Cypress en el proyecto.