En Cypress 10.9.0, para ejecutar una prueba en específico en modo headless con firefox, sería así:
"test:headless:firefox:navegacion": "cypress run --browser firefox --spec cypress/e2e/navegacion.cy.js"
Introducción al curso
Automatización de Pruebas UI con Cypress
Conociendo Cypress
Pruebas Automatizadas con Cypress: Ventajas y Desventajas
Automatización de Pruebas con Cypress: Instalación y Configuración
Crea tu primer prueba
Estructuración y Configuración de Pruebas en Cypress
Navegación y recarga de páginas con Cypress
Elementos y localizadores
Uso de Cypress para Localizar Elementos en Formularios Web
Búsqueda y Selección de Elementos en Cypress con Contains y Find
Uso de Cypress: Guardar e Interactuar con Elementos DOM
Creando una Prueba
Aserciones en Cypress: TDD, BDD y Chai para Pruebas Efectivas
Optimización de pruebas con hooks en desarrollo web
Debugging en Cypress: Herramientas y Técnicas Esenciales
Esperar por elementos
Esperas y Timeouts en Cypress: Uso Eficiente y Práctico
Ejecución de Cypress
Modos de Ejecución de Pruebas con Cypress
Interactuando con elementos
Uso de Cypress: Click y Eventos en Pruebas Automatizadas
Manejo de Inputs de Texto en Cypress: Escribir y Limpiar Eficazmente
Interacción con Radiobotones y Checkboxes en Cypress
Extracción y manejo de datos en pruebas con Cypress
Interacción con Selects y Dropdowns Dinámicos en Formularios
Interacción y validación de tablas HTML con Cypress
Manejo e Interacción con Date Pickers en Formularios
Interacción con Pop-ups, Modales y Tooltips en Cypress
Simulación de Drag and Drop con Eventos del Mouse
Próximos pasos
Automatización de Pruebas Web con Cypress: Proyecto Final
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
¡Explorar las capacidades de Cypress te dará una ventaja en pruebas automatizadas! Este potente framework no solo ofrece una atractiva interfaz visual para realizar tests en navegadores, sino también otros modos diseñados para integrarse perfectamente en un entorno de producción más estructurado, como un CI/CD pipeline. Profundicemos en las diversas modalidades de ejecución que Cypress proporciona para optimizar y adecuar tus pruebas a tus necesidades específicas.
El modo Headless, traducido literalmente como "sin cabeza", ofrece la opción de ejecutar pruebas sin abrir visualmente el navegador. Es ideal cuando las pruebas ya han sido verificadas y emplean este método para una ejecución más rápida y eficiente. Este modo es parecido a las funcionalidades que ofrecen Selenium o Puppeteer y permite ejecutar pruebas en ambientes de producción sin necesidad de interacción manual.
Iniciar pruebas en modo Headless es sencillo. Aquí un ejemplo de cómo puedes configurar el package.json
para crear un script que ejecute tus tests en Headless:
{
"scripts": {
"test:ui": "cypress open",
"test:headless": "cypress run"
}
}
Para ejecutar las pruebas, simplemente usa:
npm run test:headless
Durante la ejecución, se observan mensajes en la terminal mostrando qué pruebas se están ejecutando, cuántas han pasado o fallado y, algo estupendo, vídeos de la ejecución de cada test, capturados automáticamente por Cypress.
Cypress es compatible con diversos navegadores. Puedes especificar el navegador en el que deseas ejecutar tus pruebas para optimizar el contexto de tus pruebas automatizadas. Cambiar entre navegadores como Chrome o Firefox te permite validar tus aplicaciones en distintos entornos, asegurando que todo funcione correctamente para tus usuarios.
Aquí te mostramos cómo cambiar la ejecución a otro navegador:
cypress run --browser chrome
Esto permite correr las pruebas en Chrome en vez del navegador predeterminado, que es Electron. Además, si alguna vez necesitas realizar pruebas en Firefox, solo necesitas especificar el navegador en el comando de ejecución:
cypress run --browser firefox
Es importante recordar que, al menos en la fecha de este documento, existe un problema conocido con la generación de vídeos en Firefox. Pero no te preocupes, Cypress ya trabaja en ello y seguramente lo solucionará, ¡así que mantente informado de las futuras actualizaciones!
A veces no necesitas ejecutar todas las pruebas. Cypress te permite configurar la ejecución de tests específicos, o incluso restringirlas a determinados navegadores, maximizando la eficiencia y concentrando tus esfuerzos donde más los necesites.
Para ejecutar apenas una sola prueba, puedes emplear la opción "spec":
cypress run --spec "cypress/integration/navigation_spec.js"
Se puede incluir configuraciones dentro del archivo de prueba para especificar en qué navegador debe ejecutarse. Por ejemplo, es posible limitarlas a solo Chrome:
describe('Pruebas solo en Chrome', { browser: 'chrome' }, () => {
it('should execute only in Chrome', () => {
// test logic here
});
});
Y si necesitas evitarlas en un navegador específico, podrías usar:
describe('Pruebas en todos los navegadores menos Chrome', { browser: '!chrome' }, () => {
it('should not execute in Chrome', () => {
// test logic here
});
});
Este enfoque aporta flexibilidad, permitiendo que tus pruebas se ejecuten en múltiples contextos y configuraciones de navegador, optimizando el proceso de testeo y garantizando que tu software estén en su mejor forma para los usuarios finales.
¡Continúa explorando y aprendiendo! Avanzar en automatización te permitirá crear experiencias excepcionales para tus usuarios y mantenerte a la vanguardia en el desarrollo web.
Aportes 6
Preguntas 9
En Cypress 10.9.0, para ejecutar una prueba en específico en modo headless con firefox, sería así:
"test:headless:firefox:navegacion": "cypress run --browser firefox --spec cypress/e2e/navegacion.cy.js"
En la documentacion se puede ampliar mas la informacion y otras formas de correr nuestros test
https://docs.cypress.io/guides/guides/command-line
Si utilizan git para gestionar las pruebas, recuerden agregar los videos al git ignore.
Para los que tienen problema con los videos en cypress > 10
Solamente deben poner la propiedad video: true en el cypress config:
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
// ignore the tests mentioned
excludeSpecPattern: [
"**/1-getting-started/*.js",
"**/2-advanced-examples/*.js",
],
// testIsolation: false,
viewportWidth: 1920,
viewportHeight: 1080,
baseUrl: "https://demoqa.com",
video: false,
},
});
Yo he notado que mis pruebas tardan menos y se ejecutan mejor usando Fire fox
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?