Introducción al curso

1

Automatización de Pruebas UI con Cypress

Conociendo Cypress

2

Pruebas Automatizadas con Cypress: Ventajas y Desventajas

3

Automatización de Pruebas con Cypress: Instalación y Configuración

Crea tu primer prueba

4

Estructuración y Configuración de Pruebas en Cypress

5

Navegación y recarga de páginas con Cypress

Elementos y localizadores

6

Uso de Cypress para Localizar Elementos en Formularios Web

7

Búsqueda y Selección de Elementos en Cypress con Contains y Find

8

Uso de Cypress: Guardar e Interactuar con Elementos DOM

Creando una Prueba

9

Aserciones en Cypress: TDD, BDD y Chai para Pruebas Efectivas

10

Optimización de pruebas con hooks en desarrollo web

11

Debugging en Cypress: Herramientas y Técnicas Esenciales

Esperar por elementos

12

Esperas y Timeouts en Cypress: Uso Eficiente y Práctico

Ejecución de Cypress

13

Modos de Ejecución de Pruebas con Cypress

Interactuando con elementos

14

Uso de Cypress: Click y Eventos en Pruebas Automatizadas

15

Manejo de Inputs de Texto en Cypress: Escribir y Limpiar Eficazmente

16

Interacción con Radiobotones y Checkboxes en Cypress

17

Extracción y manejo de datos en pruebas con Cypress

18

Interacción con Selects y Dropdowns Dinámicos en Formularios

19

Interacción y validación de tablas HTML con Cypress

20

Manejo e Interacción con Date Pickers en Formularios

21

Interacción con Pop-ups, Modales y Tooltips en Cypress

22

Simulación de Drag and Drop con Eventos del Mouse

Próximos pasos

23

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

Modos de Ejecución de Pruebas con Cypress

13/23
Recursos

¿Cuáles son los modos de ejecución que ofrece Cypress?

¡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.

¿Qué es el modo Headless en Cypress?

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.

Implementación del modo Headless

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.

¿Cómo configurar Cypress para diferentes navegadores en modo Headless?

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.

Cambiar de navegador

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!

¿Cómo ejecutar una sola prueba o especificar pruebas para determinados navegadores?

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.

Ejecutar solo un test

Para ejecutar apenas una sola prueba, puedes emplear la opción "spec":

cypress run --spec "cypress/integration/navigation_spec.js"

Restricción a un navegador

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Me funcionó en la última verisón de cypress solo agregando este a la ruta del spec ```js "scripts": { "test:ui": "cypress open", "test:headless": "cypress run", "test:headless:chrome": "cypress run --browser chrome", "test:headless:chrome:spec": "cypress run --browser chrome --spec ./cypress/e2e/primerPrueba.cy.js" }, ```  "scripts": {    "test:ui": "cypress open",    "test:headless": "cypress run",    "test:headless:chrome": "cypress run --browser chrome",    "test:headless:chrome:spec": "cypress run --browser chrome --spec ./cypress/e2e/primerPrueba.cy.js"  },