Este documento está diseñado para proporcionarte una introducción completa al framework de pruebas de extremo a extremo Cypress, una herramienta poderosa y fácil de usar para realizar pruebas automatizadas en aplicaciones web modernas. Cypress ofrece una experiencia de usuario excepcional al permitirte escribir pruebas de forma rápida y eficiente mientras proporciona una amplia gama de funcionalidades para garantizar la calidad de tus aplicaciones.
Comandos Básicos
- `cy.visit()`: Visitar una URL específica.
- `cy.get()`: Seleccionar elementos del DOM.
- `cy.contains()`: Buscar elementos por su contenido.
- `cy.click()`: Hacer clic en un elemento.
- `cy.type()`: Escribir texto en un campo de entrada.
- `cy.url()`: Obtener la URL actual.
- `cy.wait()`: Esperar a que ocurra un evento.
- `cy.reload()`: Recargar la página actual.
Assertions (Afirmaciones)
- `cy.should()`: Realizar afirmaciones sobre elementos.
- `cy.expect()`: Realizar afirmaciones utilizando Chai assertions.
- `cy.assert()`: Realizar afirmaciones personalizadas.
Interacciones Avanzadas
- `cy.intercept()`: Interceptar y controlar las solicitudes de red.
- `cy.route()`: Manipular solicitudes de red específicas.
- `cy.exec()`: Ejecutar comandos del sistema operativo desde Cypress.
- `cy.viewport()`: Configurar la resolución de la ventana del navegador.
Ejecución y Configuración
- `cypress open`: Abrir la interfaz de usuario de Cypress.
- `cypress run`: Ejecutar pruebas en modo de línea de comandos.
- `cypress.json`: Archivo de configuración para Cypress.
- `before()` y `after()`: Hooks para ejecutar código antes o después de las pruebas.
Comandos generales explicados
cy.visit()
Este comando se utiliza para visitar una URL específica. Por ejemplo, si desea visitar cualquier sitio web, puede utilizar el siguiente código:
cy.visit('https://www.amazon.ae/')
En este ejemplo, utilizamos el comando cy.visit() para visitar la URL "https://www.amazon.ae/".
Esto puede resultar útil para probar el comportamiento de la página en esa URL o para probar el comportamiento de la página cuando se redirige a una URL específica.
cy.get()
Este comando se utiliza para seleccionar un elemento en la página. A continuación se muestra un ejemplo de cómo utilizar el comando cy.get():
cy.get('button').click();
En este ejemplo, usamos el comando cy.get() para buscar un elemento de botón en la página y luego usamos el comando click().
comando para simular un clic en ese elemento. Esto nos permite probar el comportamiento de la página cuando un usuario hace clic en el botón.
. contains()
Este comando se utiliza para buscar una cadena de texto específica en la página. Por ejemplo, si desea buscar la palabra "pruebas" en la página, puede utilizar el siguiente código (Línea de referencia 1)
1). cy.contains('testing')
2). cy.get('#footer').contains('Terms and conditions')
.click()
Este comando se utiliza para hacer clic en un elemento de la página. Puede hacer clic en un elemento proporcionando las coordenadas, posiciones y también puede combinar claves con el clic(). Algunos de los comandos de clic más utilizados son los siguientes:
1). cy.get('Sign Up').click()
2). cy.get("[alt='iPhone']").as("iphone"); cy.get("@iphone").click()
3). cy.get('li:first').click({ shiftKey: true,
})
4). cy.get('Sign Up').click({force: true}})
5). cy.get('img').click('topRight')
6). cy.get('.action-labels>.label').click({ multiple: true })
. type()
Este comando se utiliza para escribir texto en un campo de entrada de la página. Por ejemplo, si desea escribir el texto "ciprés" en un campo de búsqueda, puede utilizar el primer código que aparece a continuación. También puedes pasar las teclas como enter. A continuación se muestran algunos de los comandos más utilizados:
1).cy.type('cypress')
2).cy.get('input[name=email]').type('johndoe@example.com')
3).cy.get("[placeholder='Search']").type("{shift}{alt}macbook")
;
4).cy.get('input[type=text]').type('Test', { force: true })
5).cy.get('#input-firstname').type("Iphone {enter}")
6).cy.get('#input-firstname').type("Iphone").type('{enter}')
7).cy.get("#input-lastname").type("AB", { delay: 1000 });
.clear()
Este comando se utiliza para borrar el texto de un campo de entrada. Por ejemplo, si desea borrar el texto de un campo de búsqueda, podría usar .clear(). También puede escribirlo y borrarlo u obtener el elemento específico si un elemento aparece más de una vez en la página web.
1).cy.get('#search-field').clear()
2).cy.get('#search-field').type("hello").clear()
3).cy.get('#button-cart').first().clear()
.check()
Este comando se utiliza para marcar una casilla de verificación o un botón de opción. Por ejemplo, si desea verificar un formulario con múltiples valores al mismo tiempo, puede hacerlo pasando los valores en un formato de matriz (consulte el cuarto código).
1).cy.get('[type="checkbox"]').check()
2).cy.get('[type="radio"]').check()
3).cy.get('[type="checkbox"]').check('Female')
4).cy.get('[type="checkbox"]').check(['US','India'])
5).cy.get('[type="checkbox"]').check({ force: true })
.uncheck()
Este comando se utiliza para desmarcar una casilla de verificación o un botón de opción. Por ejemplo, si desea desmarcar varios valores al mismo tiempo en un formulario, se puede hacer pasando los valores en un formato de matriz. (Consulte el ejemplo 1)
1). cy.get('.action-check [type="checkbox"]')
.check(['checkbox1', 'checkbox3'])
.uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
2). cy.get('[type="checkbox"]')
.not('[disabled]')
.uncheck()
.select()
Este comando se utiliza para seleccionar una opción de un menú desplegable. Por ejemplo, si desea seleccionar la opción "Avatar" de un menú desplegable con el ID "animales", puede usar el primer comando del siguiente código y si desea seleccionar varios valores al mismo tiempo, puede usar Segundo comando. También puede seleccionar los elementos ocultos en la página usando el comando 3 del siguiente código.
1).cy.get("select#animals").select("Avatar");
2).cy.get("select#second").select(["Donut", "Bonda"]);
3).cy.get("select#first").select("Google", { force: true });
cy.wait()
Este comando se utiliza para pausar la ejecución de su prueba durante un período de tiempo específico. Por ejemplo, si quisieras pausar tu prueba durante 2 segundos, podrías usar el siguiente código:
cy.wait(2000)
cy.intercept()
Este comando se utiliza para interceptar y simular solicitudes de red realizadas por la página que se está probando. Este comando acepta un método de solicitud y un patrón de URL como argumentos y devuelve un objeto que se puede utilizar para configurar la respuesta simulada para la solicitud interceptada.
A continuación se muestra un ejemplo de cómo utilizar el comando cy.intercept():
cy.intercept('GET', 'https://example.com/api/users').as('getUsers');
// Perform some actions on the page that make a GET request to the specified URL
cy.get('button').click();
// Configure the mock response for the intercepted request cy.get('@getUsers').then(interception => { interception.reply(200, [{ id: 1, name: 'Tom' }, { id: 2, name: 'Bob'
}]);
});
En este ejemplo, estamos usando el comando cy.intercept() para interceptar y simular una solicitud GET a la URL. https://example.com/api/users. Luego, realizamos algunas acciones en la página que realiza esta solicitud y finalmente usamos los comandos cy.get() y then() para configurar la respuesta simulada para la solicitud interceptada. Esto nos permite probar el comportamiento de la página cuando recibe una respuesta específica del servidor.
cy.request()
Este comando se utiliza para realizar una solicitud a una URL específica. Por ejemplo, si desea realizar una solicitud GET a la URL "https://api.coinbase.com/v2/currencies" y registrar la respuesta, puede utilizar el siguiente código:
cy.request("GET", "https://api.coinbase.com/v2/currencies").then(
(response) => { console.log(response.status)})
cy.task()
Este comando se utiliza para ejecutar código Node.js personalizado dentro de su prueba. Por ejemplo, si quisieras imprimir un mensaje en la consola, podrías usar el siguiente código:
cy.task("log", "hello World");
Necesita actualizar setupNodeEvents en cypress.config.js para usar el comando de tarea.
cy.scrollTo()
Este comando se utiliza para desplazarse a un elemento específico de la página. Puede desplazarse por una página pasando las coordenadas o la posición como abajo, arriba a la izquierda. A continuación se muestra un ejemplo de cómo utilizar el comando cy.scrollTo():
1).cy.scrollTo(0, 500);
2).cy.scrollTo("topRight");
3).cy.scrollTo("bottom");
4).cy.scrollTo(0, 100);
cy.getCookie()
Este comando se utiliza para recuperar una cookie con un nombre específico de la página actual. Este comando acepta el nombre de la cookie como argumento y devuelve un objeto que contiene el nombre, el valor y otra información de la cookie. A continuación, se muestra un ejemplo de cómo utilizar el comando cy.getCookie():
cy.getCookie('myCookie').then(cookie => { console.log(cookie.name); // logs the cookie name console.log(cookie.value); // logs the cookie value
});
Tenga en cuenta que esto sólo funciona si la cookie se ha configurado en la página actual. Si intenta acceder a una cookie desde un dominio diferente, deberá utilizar un método diferente.
cy.clearCookies()
Este comando se utiliza para eliminar todas las cookies de la página actual. Este comando no acepta ningún argumento y no devuelve nada. A continuación se muestra un ejemplo de cómo utilizar el comando cy.clearCookies():
cy.clearCookies();
Este comando eliminará todas las cookies de la página actual, así que tenga cuidado al usarlo. Si solo desea eliminar una cookie específica, puede utilizar el comando cy.clearCookie() => cy.getCookie('token') en su lugar. Este comando acepta el nombre de la cookie como argumento y solo elimina la cookie con ese nombre.
cy.url()
Este comando se utiliza para obtener la URL actual de la página que se está probando. Este comando no acepta ningún argumento y devuelve una cadena que contiene la URL actual. A continuación, se muestra un ejemplo de cómo utilizar el comando cy.url()
cy.url().then(url => {
console.log(url); // logs the current URL
});
Este comando se usa comúnmente para verificar que la página que se está probando tenga la URL esperada. Por ejemplo, podría utilizar este comando para verificar que un usuario haya sido redirigido a la página correcta después de iniciar sesión o enviar un formulario.
cy.location()
Este comando se utiliza para obtener la ubicación actual de la página que se está probando. Este comando no acepta ningún argumento y devuelve un objeto que contiene información sobre la ubicación actual, como la URL, el nombre de host, la ruta y los parámetros de búsqueda. A continuación se muestra un ejemplo de cómo utilizar el comando cy.location():
cy.location().then(location => { console.log(location.href); // logs the current URL
console.log(location.hostname); // logs the current hostname console.log(location.pathname); // logs the current pathname console.log(location.search); // logs the current search parameters
});
Este comando se usa comúnmente para verificar que la página que se está probando tenga la ubicación esperada. Por ejemplo, podría utilizar este comando para verificar que un usuario haya sido redirigido a la página correcta después de iniciar sesión o enviar un formulario.
cy.reload()
Este comando se utiliza para recargar la página actual. Este comando no acepta ningún argumento y no devuelve nada. A continuación se muestra un ejemplo de cómo utilizar el comando cy.reload():
cy.reload();
Este comando hará que se vuelva a cargar la página actual, lo que puede resultar útil en varias situaciones. Por ejemplo, puede usar este comando para asegurarse de que la página que se está probando esté en un estado consistente antes de ejecutar una prueba o para probar el comportamiento de la página cuando se vuelve a cargar.
cy.clock()
Este comando se utiliza para controlar el reloj de una prueba. Este comando se puede utilizar para configurar la hora inicial del reloj o para avanzar manualmente el reloj una cantidad de tiempo específica. Esto puede resultar útil al probar funciones que dependen del tiempo, como tiempos de espera o eventos programados. A continuación se muestra un ejemplo de cómo utilizar el comando cy.clock():
const myFunction = () => {
// do something
};
cy.clock(1000); // set the initial time to 1 second
// Call myFunction in your test
myFunction();
cy.tick(1000); // advance the clock by another second
// Verify that myFunction was called after 1 second cy.get('@myFunction').should('have.been.calledOnce');
En este ejemplo, utilizamos el comando cy.clock() para establecer el tiempo inicial del reloj en 1 segundo. Luego, usamos el comando cy.tick() para avanzar el reloj otro segundo. Esto nos permite verificar que se llamó a myFunction después de 1 segundo, como se esperaba.
cy.viewport()
Este comando se utiliza para cambiar el tamaño de la ventana gráfica para una prueba. Esto puede resultar útil al probar la capacidad de respuesta de una aplicación web o al simular diferentes dispositivos y tamaños de pantalla. A continuación se muestra un ejemplo de cómo utilizar el comando cy.viewport():
cy.viewport(320, 480); // establece el tamaño de la ventana gráfica en 320x480 píxeles
En este ejemplo, utilizamos el comando cy.viewport() para establecer el tamaño de la ventana gráfica en 320x480 píxeles. Para verificar en detalle cómo probar la capacidad de respuesta usando cypress, puede consultar este blog.
cy.window()
Este comando se utiliza para obtener el objeto de ventana global de la página que se está probando. Este comando no acepta ningún argumento y devuelve el objeto de ventana como un asunto de Cypress, que puede usarse para interactuar con la página de la misma manera que lo haría un usuario. A continuación se muestra un ejemplo de cómo utilizar el comando cy.window():
cy.window().then(win => {
// Use the window object to interact with the page win.scrollTo(0, 100);
win.alert('Hello, world!');
});
En este ejemplo, usamos el comando cy.window() para obtener el objeto de ventana y luego lo usamos para desplazarse por la página y mostrar una alerta. Esto nos permite probar el comportamiento de la página de la misma manera que lo haría un usuario.
cy.title()
Este comando se utiliza para obtener el título de la página que se está probando. Este comando no acepta ningún argumento y devuelve una cadena que contiene el título de la página.
A continuación se muestra un ejemplo de cómo utilizar el comando cy.title():
cy.title().then(title => { console.log(title); / // registra el título de la página });
Este comando se usa comúnmente para verificar que la página que se está probando tenga el título esperado. Por ejemplo, podría utilizar este comando para verificar que un usuario haya sido redirigido a la página correcta después de iniciar sesión o enviar un formulario.
cy.dblclick()
Este comando se utiliza para simular un doble clic en un elemento de la página que se está probando. Este comando acepta un selector como argumento y devuelve el elemento en el que se hizo doble clic como asunto de Cypress. Aquí hay un ejemplo de cómo usar el comando cy.dblclick():
cy.get('button').dblclick();
En este ejemplo, usamos el comando cy.get() para buscar un elemento de botón en la página y luego usamos el comando cy.dblclick() para simular un doble clic en ese elemento. Esto puede resultar útil para probar el comportamiento de la página cuando un usuario hace doble clic en un elemento.
cy.rightclick()
Este comando se utiliza para simular un clic derecho en un elemento de la página que se está probando. Este comando acepta un selector como argumento y devuelve el elemento en el que se hizo clic derecho como asunto de Cypress. A continuación se muestra un ejemplo de cómo utilizar el comando cy.rightclick():
cy.get('button').rightclick();
En este ejemplo, usamos el comando cy.get() para buscar un elemento de botón en la página y luego usamos el comando cy.rightclick() para simular un clic derecho en ese elemento. Esto puede resultar útil para probar el comportamiento de la página cuando un usuario hace clic derecho en un elemento.
cy.children(), cy.parent(), cy.closest():
Cypress no tiene un comando de "recorrido" incorporado. Sin embargo, Cypress proporciona una serie de comandos potentes que se pueden utilizar para recorrer la página e interactuar con los elementos de la página. Por ejemplo, el comando cy.get() se puede utilizar para buscar elementos en la página según su selector CSS. Los comandos cy.children() y cy.parent() se pueden utilizar para encontrar los elementos hijo y padre de un elemento determinado, respectivamente. El cy.closest()
El comando se puede utilizar para encontrar el ancestro más cercano de un elemento determinado que coincida con un selector determinado.
Estos comandos se pueden combinar para recorrer la página e interactuar con elementos de diversas formas. Por ejemplo, podría usar el comando cy.get() para buscar un botón en la página y luego usar el comando cy.closest() para encontrar el ancestro más cercano de ese botón que tenga una clase específica. Luego podrías usar el comando cy.parent() para encontrar el elemento padre de ese ancestro, y así sucesivamente.
cy.spy()
este comando se utiliza para crear un "espía" en una función específica. Un espía es un tipo especial de prueba doble que registra información sobre cómo se llama a la función y con qué argumentos se llama. Esta información se puede utilizar para verificar que la función se llama como se esperaba en la prueba.
A continuación se muestra un ejemplo de cómo utilizar el comando cy.spy():
const myFunction = () => {
// do something
};
cy.spy(myFunction);
// Llama a myFunction en tu prueba myFunction();
// Verifica que myFunction se haya llamado
cy.get('@myFunction').should('have.been.CallOnce');
En este ejemplo, estamos creando un espía para la función myFunction. Luego, llamamos a la función en nuestra prueba y, finalmente, usamos los comandos cy.get() y should() para verificar que la función se llamó como se esperaba.