Instalación
Para instalarlo será necesario usar el comando que nos indica la documentación oficial de la siguiente manera.
npm i cypress -D
PNPM
pnpm add cypress -D
YARN
yarn add cypress -D
Esto descargará e instalará todo lo necesario para que Cypress funcione, por lo que tardará un poco.
Configuración
Al terminar de descargar se deberá crear el script para empezar a ejecutar Cypress en nuestro package.json.
"scripts": {
"cypress:open": "cypress open"
},
Se deberá evitar el uso de
cypress, ya que la misma es una palabra reservada
Esto nos creará un archivo cypress.config.ts en el cual deberemos agregar nuestra URL base de la siguiente manera.
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
baseUrl: "http://localhost:3000", // Agregamos la url base
setupNodeEvents(on, config) {},
},
});
Luego de ejecutar el script se abrirá Cypress, el cual nos guiará para crear la configuración inicial de nuestro test, dejándonos elegir que tipo de test haremos. Nos dará la opción de crear nuestro primer spec, el cual podremos desarrollar en el IDE que usemos normalmente.
Coding
Como vemos se creó el archivo spect.cy.ts, dentro de la carpeta de Cypress, en este podemos ver el primer test creado automáticamente.
describe("spec.cy.js", () => {
it("should visit", () => {
cy.visit("/"); // Indica que tiene que renderizar la página
});
});
A este podemos hacerle unos cambios, por ejemplo, si queremos buscar un componente debemos utilizar .get() de la siguiente manera.
it("should change theme from dark to light and back", () => {
cy.visit("/");
const switchButton = cy.get(".peer"); // Buscamos el botón
switchButton.should("have.attr", "aria-checked", "false"); // Indicamos que tiene que contener ciertos atributos
switchButton.click(); // Y hacemos click
});
Este funcionamiento simple nos creará una “guía” para que Cypress actúe como el usuario. También es posible interactuar escribiendo de la siguiente manera.
it("should render a input and type", () => {
cy.visit("/");
cy.get('input[placeholder="Title"]').type("testing title note with cypress"); // Buscamos por el placeholder y pasamos el texto a escribir
cy.get('input[placeholder="Title"]').contains(/testing title note/i); // Buscamos si existe
});
Podemos pasarle diferentes teclas especiales indicandolo entre {{}}
Por ultimo podemos ver si un elemento no existe utilizando .should("not.exist") de la siguiente manera
it("should delete the div", () => {
cy.visit("/");
cy.get("button")
.contains(/delete div/i) // Buscamos el botón
.click(); // Hacemos click
cy.get("div")
.contains(/div to delete/i) // Buscamos el div
.should("not.exist"); // Y comprobamos que no existe
});
Errores
missing baseurl in compileroptions cypress
Este error se solucionará cambiando el tipo de modulo en el archivo tsconfig.json
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "Node"
}
}
