M

MLOG

Español

Una guía completa de Cypress, el potente framework de pruebas de extremo a extremo, que cubre la instalación, escritura de pruebas, depuración, integración CI/CD y mejores prácticas.

Cypress: La Guía Definitiva de Pruebas de Extremo a Extremo para Aplicaciones Web

En el panorama del desarrollo web que evoluciona rápidamente hoy en día, asegurar la calidad y fiabilidad de las aplicaciones web es primordial. Las pruebas de Extremo a Extremo (E2E) juegan un papel crucial en la verificación de que todos los componentes de una aplicación funcionan juntos sin problemas desde la perspectiva del usuario. Cypress ha surgido como un framework de pruebas E2E líder, que ofrece una experiencia amigable para el desarrollador, características potentes y un rendimiento excelente. Esta guía completa lo guiará a través de todo lo que necesita saber para comenzar con Cypress y probar eficazmente sus aplicaciones web.

¿Qué es Cypress?

Cypress es una herramienta de pruebas front-end de próxima generación construida para la web moderna. A diferencia de los frameworks de pruebas tradicionales que ejecutan pruebas en un navegador, Cypress opera directamente en el navegador, brindándole un control y visibilidad sin precedentes sobre el comportamiento de su aplicación. Está diseñado para ser rápido, fiable y fácil de usar, lo que lo convierte en una opción popular entre los desarrolladores e ingenieros de control de calidad de todo el mundo. Cypress está escrito en JavaScript y se ejecuta dentro del navegador, lo que lo hace muy eficiente y ofrece un acceso sin precedentes a los elementos internos de la aplicación.

Beneficios clave de usar Cypress

Instalación y configuración

Comenzar con Cypress es sencillo. Aquí le mostramos cómo instalarlo:

  1. Requisitos previos: Asegúrese de tener Node.js y npm (Administrador de paquetes de nodos) instalados en su sistema. Puede descargarlos del sitio web oficial de Node.js.
  2. Instalar Cypress: Abra su terminal o símbolo del sistema, navegue hasta el directorio de su proyecto y ejecute el siguiente comando:
    3. npm install cypress --save-dev
  3. Abrir Cypress: Una vez que se complete la instalación, puede abrir el Ejecutor de pruebas de Cypress ejecutando:
    4. npx cypress open

    Este comando iniciará el Ejecutor de pruebas de Cypress, que proporciona una interfaz gráfica para ejecutar y depurar sus pruebas.

Escribiendo su primera prueba Cypress

Creemos una prueba simple para verificar que la página de inicio de un sitio web se cargue correctamente. Cree un nuevo archivo llamado `example.cy.js` en el directorio `cypress/e2e` de su proyecto.


// cypress/e2e/example.cy.js

describe('Mi primera prueba', () => {
  it('Visita el Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Desglosemos esta prueba:

Ejecute esta prueba en el Ejecutor de pruebas de Cypress para verla en acción. Debería ver el navegador navegar al sitio web Cypress Kitchen Sink, hacer clic en el enlace "type" y verificar la URL.

Comandos de Cypress

Cypress proporciona una amplia gama de comandos para interactuar con su aplicación. Aquí hay algunos de los comandos más utilizados:

Estos son solo algunos de los muchos comandos disponibles en Cypress. Consulte la documentación de Cypress para obtener una lista completa de comandos y sus opciones.

Afirmaciones en Cypress

Las afirmaciones se utilizan para verificar el comportamiento esperado de su aplicación. Cypress proporciona un rico conjunto de afirmaciones integradas que puede usar para verificar el estado de los elementos, la URL, el título y más. Las afirmaciones se encadenan después de los comandos de Cypress usando el método `.should()`.

Aquí hay algunos ejemplos comunes de afirmaciones:

También puede crear afirmaciones personalizadas para satisfacer sus necesidades específicas.

Mejores prácticas para escribir pruebas Cypress

Seguir las mejores prácticas puede ayudarle a escribir pruebas Cypress más fáciles de mantener, fiables y eficientes. Aquí hay algunas recomendaciones:

Técnicas avanzadas de Cypress

Stubbing y Mocking

Cypress le permite simular peticiones y respuestas de red, lo que le permite simular diferentes escenarios y probar el manejo de errores de su aplicación. Esto es particularmente útil para probar funciones que se basan en API o servicios externos.

Para simular una petición de red, puede utilizar el comando `cy.intercept()`. Por ejemplo, el código siguiente simula una petición GET a `/api/users` y devuelve una respuesta simulada:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

A continuación, puede esperar la petición interceptada usando `cy.wait('@getUsers')` y verificar que su aplicación maneje la respuesta simulada correctamente.

Trabajar con almacenamiento local y cookies

Cypress proporciona comandos para interactuar con el almacenamiento local y las cookies. Puede usar estos comandos para establecer, obtener y borrar el almacenamiento local y las cookies en sus pruebas.

Para establecer un elemento de almacenamiento local, puede utilizar el comando `cy.window()` para acceder al objeto window y luego usar el método `localStorage.setItem()`. Por ejemplo:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Para obtener un elemento de almacenamiento local, puede utilizar el comando `cy.window()` y luego usar el método `localStorage.getItem()`. Por ejemplo:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Para establecer una cookie, puede utilizar el comando `cy.setCookie()`. Por ejemplo:


cy.setCookie('myCookie', 'myCookieValue')

Para obtener una cookie, puede utilizar el comando `cy.getCookie()`. Por ejemplo:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Manejo de cargas de archivos

Cypress proporciona un plugin llamado `cypress-file-upload` que simplifica las cargas de archivos en sus pruebas. Para instalar el plugin, ejecute el siguiente comando:

npm install -D cypress-file-upload

A continuación, agregue la siguiente línea a su archivo `cypress/support/commands.js`:


import 'cypress-file-upload';

A continuación, puede utilizar el comando `cy.uploadFile()` para cargar un archivo. Por ejemplo:


cy.get('input[type="file"]').attachFile('example.txt')

Trabajar con IFrames

Probar IFrames puede ser complicado, pero Cypress proporciona una forma de interactuar con ellos. Puede usar el comando `cy.frameLoaded()` para esperar a que se cargue un IFrame, y luego usar el comando `cy.iframe()` para obtener el objeto document del IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress e Integración Continua/Implementación Continua (CI/CD)

Integrar Cypress en su canalización de CI/CD es esencial para garantizar la calidad de su aplicación. Puede ejecutar pruebas de Cypress en modo sin interfaz en su entorno de CI/CD. Aquí le mostramos cómo:

  1. Instalar Cypress: Asegúrese de que Cypress esté instalado como una dependencia en su proyecto.
  2. Configurar CI/CD: Configure su canalización de CI/CD para ejecutar pruebas de Cypress después de cada compilación.
  3. Ejecutar Cypress sin interfaz: Use el comando `cypress run` para ejecutar pruebas de Cypress en modo sin interfaz.

Ejemplo de configuración de CI/CD (usando GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Esta configuración ejecutará las pruebas de Cypress cada vez que se envíe código a la rama `main` o se cree una solicitud de extracción contra la rama `main`. La acción `cypress-io/github-action` simplifica el proceso de ejecución de pruebas de Cypress en GitHub Actions.

Depuración de pruebas Cypress

Cypress proporciona excelentes herramientas de depuración para ayudarle a identificar y solucionar problemas en sus pruebas. Aquí hay algunos consejos para depurar pruebas Cypress:

Cypress vs. Otros frameworks de pruebas

Si bien Cypress es un potente framework de pruebas de extremo a extremo, es esencial comprender cómo se compara con otras opciones populares. Aquí hay una breve descripción general:

La elección del framework depende de las necesidades y requisitos específicos de su proyecto. Cypress es una excelente opción para las aplicaciones web modernas que requieren pruebas de extremo a extremo rápidas, fiables y amigables para los desarrolladores.

Ejemplos del mundo real de Cypress en acción

Exploremos algunos ejemplos del mundo real de cómo se puede usar Cypress para probar diferentes tipos de aplicaciones web:

Prueba de una aplicación de comercio electrónico

Puede usar Cypress para probar varios flujos de usuarios en una aplicación de comercio electrónico, como:

Aquí hay un ejemplo de una prueba Cypress que verifica que un usuario puede agregar un producto a su carrito con éxito:


it('Añade un producto al carrito', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Prueba de una aplicación de redes sociales

Puede usar Cypress para probar las interacciones del usuario en una aplicación de redes sociales, como:

Aquí hay un ejemplo de una prueba Cypress que verifica que un usuario puede crear una nueva publicación con éxito:


it('Crea una nueva publicación', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('¡Hola, mundo!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', '¡Hola, mundo!')
})

Prueba de una aplicación bancaria

Para las aplicaciones bancarias, Cypress se puede usar para probar funcionalidades críticas como:

Una prueba para verificar una transferencia de fondos podría verse así (con la simulación apropiada para la seguridad):


it('Transfiere fondos con éxito', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Conclusión

Cypress es un potente y versátil framework de pruebas de extremo a extremo que puede ayudarle a garantizar la calidad y fiabilidad de sus aplicaciones web. Su API amigable para el desarrollador, sus potentes funciones y su excelente rendimiento lo convierten en una opción popular entre los desarrolladores e ingenieros de control de calidad de todo el mundo. Al seguir las mejores prácticas descritas en esta guía, puede escribir pruebas Cypress eficaces que le ayudarán a detectar errores al principio del proceso de desarrollo y a ofrecer software de alta calidad a sus usuarios.

A medida que las aplicaciones web continúan evolucionando, la importancia de las pruebas de extremo a extremo solo aumentará. Adoptar Cypress e integrarlo en su flujo de trabajo de desarrollo le permitirá crear experiencias web más sólidas, fiables y fáciles de usar.