Introducción

El manejo de cargas y descargas de archivos son escenarios comunes en las pruebas de un extremo a otro. En esta publicación, exploraremos cómo manejar tanto la carga como la descarga de archivos usando Cypress. Aunque Cypress carece de soporte integrado para estas operaciones, puede lograr esta funcionalidad aprovechando algunas bibliotecas y el sólido conjunto de comandos de Cypress.

Al final de esta guía, sabrás cómo:

• Subir archivos usando Cypress.
• Validar cargas de archivos exitosas.
• Descargar archivos y validar su contenido en Cypress.

Requisitos previos

Para seguir los ejemplos, asegúrese de tener Cypress instalado y configurado. Si está utilizando Cypress v13.6.2, es compatible con los enfoques que se muestran en esta publicación.

Carga de archivos en Cypress

Para cargar archivos en Cypress, usaremos el complemento cypress-file-upload, que proporciona una manera fácil de simular acciones de carga de archivos durante sus pruebas.
Paso 1: Instalar el complemento cypress-file-upload
Para manejar la carga de archivos en Cypress, primero deberá instalar el paquete cypress-file-upload.

npm install --save-dev cypress-file-upload

A continuación, impórtelo en su archivo commands.js dentro de la carpeta de soporte de Cypress:

import 'cypress-file-upload';

Paso 2: Estructura de carpetas
Asegúrese de que su proyecto tenga la siguiente estructura de carpetas para almacenar archivos de prueba y cargarlos durante las pruebas:

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

Paso 3: cargar un archivo
Una vez que haya instalado el complemento, puede usar el comando adjuntar archivo para cargar un archivo desde la carpeta de accesorios.

Así es como puedes cargar un archivo:

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

En esta prueba:

• Visitamos la página donde existe la entrada del archivo.
• Usamos adjuntarFile() para simular la carga del archivo desde la carpeta de accesorios.
• La afirmación verifica si el nombre del archivo cargado aparece correctamente en la página.

Validar cargas de archivos

Validar la carga de un archivo puede ser tan simple como verificar si el nombre del archivo o la ruta aparecen en la página web después de la carga. Sin embargo, para escenarios complejos (por ejemplo, verificar el contenido o el tamaño del archivo), es posible que necesite comprobaciones o resguardos del lado del servidor.

Ejemplo: validar la carga del archivo con datos adicionales

describe('File Upload and Validation', () => {
  it('should upload a file and validate metadata', () => {
    cy.visit('/upload');

    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Assert that the file metadata like size is displayed correctly
    cy.get('.file-size').should('contain', 'Size: 1MB');
  });
});

Descargas de archivos en Cypress
Cypress no proporciona soporte nativo para verificar descargas de archivos (ya que el navegador descarga archivos fuera del control de Cypress), pero podemos solucionar este problema verificando directamente el archivo descargado en el sistema de archivos local.

Paso 1: Instalar el archivo de descarga de cypress
Para validar las descargas de archivos en Cypress, podemos usar el complemento cypress-downloadfile.

Instálelo a través de npm:

npm install --save-dev cypress-downloadfile

A continuación, agregue el complemento a su archivo commands.js:

require('cypress-downloadfile/lib/downloadFileCommand');

Paso 2: Descargar y validar archivos
Ahora puedes escribir una prueba que descargue un archivo y verifique su contenido.

Ejemplo: descargar un archivo

describe('File Download Test in Cypress', () => {
  it('should download a file and validate its content', () => {
    cy.visit('/download');

    // Download the file and save it to a custom downloads folder
    cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf');

    // Validate that the file exists in the specified location
    cy.readFile('cypress/downloads/sample.pdf').should('exist');
  });
});

En esta prueba:

• Usamos cy.downloadFile() para descargar un archivo desde una URL y almacenarlo en la carpeta cypress/downloads.
• Después de la descarga, validamos que el archivo exista usando cy.readFile().

Paso 3: Validar el contenido del archivo
Es posible que desee verificar el contenido del archivo descargado para asegurarse de que la descarga se haya realizado correctamente. Para archivos basados ​​en texto (por ejemplo, .txt, .csv), se puede utilizar cy.readFile() de Cypress para afirmar el contenido del archivo.

Ejemplo: validar el contenido del archivo descargado

describe('Validate Downloaded File Content', () => {
  it('should download and check the content of a text file', () => {
    cy.visit('/download');

    // Download the text file
    cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt');

    // Read the file and assert its content
    cy.readFile('cypress/downloads/sample.txt').then((fileContent) => {
      expect(fileContent).to.contain('This is a sample text file');
    });
  });
});

Esta prueba descarga un archivo .txt y verifica que contenga el texto esperado.

Mejores prácticas para cargar y descargar archivos en Cypress

1. Usar accesorios para cargar: almacene siempre los archivos para cargar en la carpeta de accesorios para mantener los datos de su prueba organizados y accesibles.
2. Limpiar carpeta de descargas: antes de comenzar nuevas pruebas, limpia la carpeta de descargas para evitar problemas con los archivos sobrantes de ejecuciones de pruebas anteriores.
3. Verificar la respuesta del servidor: para la carga de archivos, verifique siempre las respuestas del lado del servidor además de las afirmaciones de la interfaz de usuario para garantizar que el archivo se procese correctamente.
4. Utilice directorios temporales para descargas: almacene los archivos descargados en directorios temporales (cypress/descargas) para evitar saturar la estructura de su proyecto.
5. Cargas simuladas de archivos (opcional): en escenarios en los que quieras simular cargas de archivos por motivos de rendimiento, utiliza resguardos para evitar cargas de archivos reales.

Conclusión

La carga y descarga de archivos son operaciones críticas en las pruebas de aplicaciones web y, aunque Cypress no admite estas operaciones de forma nativa, los complementos cypress-file-upload y cypress-downloadfile brindan soluciones alternativas fáciles de usar.

En esta guía, exploramos cómo:

• Sube archivos usando el complemento cypress-file-upload de Cypress.
• Valide la carga de archivos comprobando los nombres de los archivos y los metadatos.
• Descargue archivos usando el complemento cypress-downloadfile y valide la existencia y el contenido de los archivos descargados.

¡Con estas herramientas y técnicas, puedes manejar con confianza las cargas y descargas de archivos en tus pruebas de extremo a extremo de Cypress!