En este post vamos a ver cómo iniciarse con Cypress, una de las herramientas más populares para hacer test en JavaScript. Para ello, veremos tres cosas:
- cómo se instala Cypress
- la configuración inicial por defecto de la herramienta
- cómo hacer algunos tests básicos
Con Cypress podemos hacer diferentes tipos de test, pero en este post nos centraremos solo en tests End-to-end.
Instalación de Cypress
Para instalar Cypress, desde el directorio de nuestra aplicación ejecutaremos este comando:
npm install cypress --save-dev
Para otras formas de instalación puedes revisar la documentación oficial.
Una vez instalado, puedes abrir la herramienta con este comando:
npx cypress open
Se nos abrirá la herramienta y si es la primera vez, entonces veremos algo así:
Configuración inicial
Inicialmente no tendremos configurado ni las opciones de testing E2E (End-to-end) ni las de componentes JavaScript.
Haremos clic en E2E Testing y automáticamente se crearán una serie de ficheros de configuración en nuestro proyecto. Por ahora podemos dejar esta configuración tal y como viene por defecto.
Finalmente podremos escoger con qué navegador, de los que tengamos instalados, vamos a realizar los tests. Cuando escojas uno y hagas clic en el botón para iniciar los tests, se abrirá una instancia especial de ese navegador a través de la cual se gestionará la ejecución de los tests.
Debería de haberse abierto una ventana con estas opciones:
Seleccionaremos la opción para crear un nuevo test vacío, lo cual nos permitirá crear el primer fichero de test en la ruta que especifiquemos. Por defecto dejaremos la ruta por defecto i el nombre del archivo igual: cypress\e2e\spec.cy.js.
El contenido básico del test será este:
describe("empty spec", () => { it("passes", () => { cy.visit("https://example.cypress.io") }) })
Si hacemos clic en el botón para ejecutar este test, veremos que se ejecuta y pasa la validación, ya que simplemente está verificando que se puede visitar la web indicada.
A la izquierda veremos los tests que se han ejecutado y su resultado, pudiendo ver a la derecha qué se ve en la aplicación web a medida que se ejecuta cada paso del test.
Ejecutando tests básicos con Cypress
Vamos a modificar el fichero de test que se ha creado y vamos a añadir algunas líneas para testear lo siguiente:
- visitar una web (esto ya lo hemos visto)
- hacer clic en un enlace y revisar la redirección
- comprobar la interacción con un formulario
Lo haríamos de esta forma:
describe("Pruebas básicas web ejemplo", () => { it("Abre web, visita enlace 'type' y prueba formulario", () => { // visitamos la web cy.visit("https://example.cypress.io") // clic en enlace y revisión de URL cy.contains("type").click() cy.url().should("include", "/commands/actions") // usamos un input y verificamos que funciona cy.get(".action-email") .type("mi-email@correo.com") .should("have.value", "mi-email@correo.com") }) })
Vamos a describir un poco estas pruebas. Cada test estará metido en un bloque describe() donde pasamos dos valores, el nombre del test y una función que contendrá el código del test.
Dentro del describe tenemos una llamada a la función it(). Esta función también recibe una descripción y otra función como parámetros. Todo test empezará con un it y en la función indicaremos los test concretos que queremos hacer.
En el test usamos estos métodos de la API de Cypress:
- cy.visit() visita la URL que pasamos por parámetro
- cy.contains() mira si existe el texto que pasamos como parámetro
- cy.click() ya te puedes imaginar lo que hace: ¡clic!
- cy.url() devuelve la URL actual
- cy.should() es un método de aserción que recibe dos parámetros: un encadenador y el valor a comprobar. Puedes ver una lista de encadenadores en la documentación.
- cy.get() devuelve un elemento del DOM pasando como parámetro un selector CSS
- cy.type() rellena un elemento con el texto que pasemos como parámetro
Cypress ya se encarga de comprobar si las aserciones se cumplen o no. Veremos el resultado de cada paso cuando ejecutemos el test (a medida que modifiquemos el archivo y guardemos, ya se ejecuta automáticamente).
La idea básica del testing con Cypress (y con cualquier otra herramienta) es esta. Se definen aserciones o afirmaciones que deben cumplirse para que el test sea válido.
Estos han sido unos tests muy básicos, los mismos que puedes ver en la documentación oficial para iniciarse, pero podemos probar una infinidad de cosas en cualquier aplicación web. Lo mejor es sumergirse un poco en la documentación y ver lo completa que esta herramienta es.