Introdução

O tratamento de uploads e downloads de arquivos são cenários comuns em testes ponta a ponta. Nesta postagem, exploraremos como lidar com uploads e downloads de arquivos usando Cypress. Mesmo que o Cypress não tenha suporte integrado para essas operações, você pode obter essa funcionalidade aproveitando algumas bibliotecas e o conjunto robusto de comandos do Cypress.

Ao final deste guia, você saberá como:

• Carregar arquivos usando Cypress.
• Validar uploads de arquivos bem-sucedidos.
• Baixe arquivos e valide seu conteúdo no Cypress.

Pré-requisitos

Para acompanhar os exemplos, certifique-se de ter o Cypress instalado e configurado. Se você estiver usando Cypress v13.6.2, ele é compatível com as abordagens mostradas nesta postagem.

Uploads de arquivos no Cypress

Para fazer upload de arquivos no Cypress, usaremos o plugin cypress-file-upload, que fornece uma maneira fácil de simular ações de upload de arquivos durante seus testes.
Etapa 1: Instale o plug-in cypress-file-upload
Para lidar com uploads de arquivos no Cypress, primeiro você precisa instalar o pacote cypress-file-upload.

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

Em seguida, importe-o em seu arquivo Commands.js dentro da pasta de suporte do Cypress:

import 'cypress-file-upload';

Etapa 2: estrutura de pastas
Certifique-se de que seu projeto tenha a seguinte estrutura de pastas para armazenar arquivos de teste e carregá-los durante os testes:

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

Etapa 3: enviando um arquivo
Depois de instalar o plugin, você pode usar o comando attachmentFile para fazer upload de um arquivo da pasta fixtures.

Veja como você pode fazer upload de um arquivo:

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');
  });
});

Neste teste:

• Visitamos a página onde existe a entrada do arquivo.
• Usamos attachmentFile() para simular o upload do arquivo da pasta de fixtures.
• A asserção verifica se o nome do arquivo enviado aparece corretamente na página.

Validando uploads de arquivos

Validar o upload de um arquivo pode ser tão simples quanto verificar se o nome ou caminho do arquivo aparece na página da web após o upload. No entanto, para cenários complexos (por exemplo, verificação do conteúdo ou tamanho do arquivo), você pode precisar de verificações ou stubs do lado do servidor.

Exemplo: validar upload de arquivo com dados adicionais

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');
  });
});

Downloads de arquivos no Cypress
Cypress não fornece suporte nativo para verificação de downloads de arquivos (já que o navegador baixa arquivos fora do controle do Cypress), mas podemos contornar isso verificando diretamente o arquivo baixado no sistema de arquivos local.

Etapa 1: Instalando o arquivo de download do cypress
Para validar downloads de arquivos no Cypress, podemos usar o plugin cypress-downloadfile.

Instale via npm:

npm install --save-dev cypress-downloadfile

Em seguida, adicione o plugin ao seu arquivo Commands.js:

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

Etapa 2: download e validação de arquivos
Agora você pode escrever um teste que baixe um arquivo e verifique seu conteúdo.

Exemplo: baixando um arquivo

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');
  });
});

Neste teste:

• Usamos cy.downloadFile() para baixar um arquivo de uma URL e armazená-lo na pasta cypress/downloads.
• Após o download, validamos se o arquivo existe usando cy.readFile().

Etapa 3: Validando o conteúdo do arquivo
Você pode verificar o conteúdo do arquivo baixado para garantir que o download foi bem-sucedido. Para arquivos baseados em texto (por exemplo, .txt, .csv), cy.readFile() do Cypress pode ser usado para afirmar o conteúdo do arquivo.

Exemplo: validar o conteúdo do arquivo baixado

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');
    });
  });
});

Este teste baixa um arquivo .txt e verifica se ele contém o texto esperado.

Melhores práticas para upload e download de arquivos no Cypress

1. Use Fixtures para Upload: Sempre armazene arquivos para upload na pasta de fixtures para manter seus dados de teste organizados e acessíveis.
2. Limpar pasta de downloads: Antes de iniciar novos testes, limpe a pasta de downloads para evitar problemas com arquivos restantes de execuções de testes anteriores.
3. Verificar a resposta do servidor: para uploads de arquivos, sempre verifique as respostas do lado do servidor, além das afirmações da interface do usuário, para garantir que o arquivo seja processado corretamente.
4. Use diretórios temporários para downloads: Armazene arquivos baixados em diretórios temporários (cypress/downloads) para evitar sobrecarregar a estrutura do seu projeto.
5. Simulação de uploads de arquivos (opcional): em cenários em que você deseja simular uploads de arquivos por motivos de desempenho, use stubs para ignorar uploads de arquivos reais.

Conclusão

O upload e o download de arquivos são operações críticas nos testes de aplicativos da web e, embora o Cypress não ofereça suporte nativo a essas operações, os plug-ins cypress-file-upload e cypress-downloadfile fornecem soluções alternativas fáceis de usar.

Neste guia, exploramos como:

• Carregue arquivos usando o plugin cypress-file-upload do Cypress.
• Valide uploads de arquivos verificando nomes de arquivos e metadados.
• Baixe arquivos usando o plugin cypress-downloadfile e valide a existência e o conteúdo dos arquivos baixados.

Com essas ferramentas e técnicas, você pode lidar com uploads e downloads de arquivos com segurança em seus testes completos do Cypress!