Introduction

La gestion des chargements et des téléchargements de fichiers est un scénario courant dans les tests de bout en bout. Dans cet article, nous explorerons comment gérer à la fois les téléchargements et les téléchargements de fichiers à l'aide de Cypress. Même si Cypress ne prend pas en charge ces opérations, vous pouvez obtenir cette fonctionnalité en tirant parti de quelques bibliothèques et du solide ensemble de commandes de Cypress.

À la fin de ce guide, vous saurez comment :

• Téléchargez des fichiers à l'aide de Cypress.
• Validez les téléchargements de fichiers réussis.
• Téléchargez les fichiers et validez leur contenu dans Cypress.

Conditions préalables

Pour suivre les exemples, assurez-vous que Cypress est installé et configuré. Si vous utilisez Cypress v13.6.2, il est compatible avec les approches présentées dans cet article.

Téléchargements de fichiers dans Cypress

Pour télécharger des fichiers dans Cypress, nous utiliserons le plugin cypress-file-upload, qui fournit un moyen simple de simuler les actions de téléchargement de fichiers pendant vos tests.
Étape 1 : Installer le plug-in cypress-file-upload
Pour gérer les téléchargements de fichiers dans Cypress, vous devez d'abord installer le package cypress-file-upload.

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

Ensuite, importez-le dans votre fichier commands.js dans le dossier de support Cypress :

import 'cypress-file-upload';

Étape 2 : Structure des dossiers
Assurez-vous que votre projet dispose de la structure de dossiers suivante pour stocker les fichiers de test et les télécharger pendant les tests :

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

Étape 3 : Télécharger un fichier
Une fois le plugin installé, vous pouvez utiliser la commande attachFile pour télécharger un fichier depuis le dossier des appareils.

Voici comment télécharger un fichier :

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

Dans ce test :

• Nous visitons la page où se trouve le fichier d'entrée.
• Nous utilisons attachFile() pour simuler le téléchargement de fichiers depuis le dossier des appareils.
• L'assertion vérifie si le nom du fichier téléchargé apparaît correctement sur la page.

Validation des téléchargements de fichiers

La validation d'un téléchargement de fichier peut être aussi simple que de vérifier si le nom ou le chemin du fichier apparaît sur la page Web après le téléchargement. Cependant, pour des scénarios complexes (par exemple, vérification du contenu ou de la taille d'un fichier), vous pourriez avoir besoin de vérifications ou de stubs côté serveur.

Exemple : Valider le téléchargement de fichiers avec des données supplémentaires

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

Téléchargements de fichiers dans Cypress
Cypress ne fournit pas de support natif pour la vérification des téléchargements de fichiers (puisque le navigateur télécharge des fichiers hors du contrôle de Cypress), mais nous pouvons contourner ce problème en vérifiant directement le fichier téléchargé dans le système de fichiers local.

Étape 1 : Installation de cypress-downloadfile
Pour valider les téléchargements de fichiers dans Cypress, nous pouvons utiliser le plugin cypress-downloadfile.

Installez-le via npm :

npm install --save-dev cypress-downloadfile

Ensuite, ajoutez le plugin à votre fichier commands.js :

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

Étape 2 : Téléchargement et validation des fichiers
Vous pouvez désormais écrire un test qui télécharge un fichier et vérifie son contenu.

Exemple : Téléchargement d'un fichier

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

Dans ce test :

• Nous utilisons cy.downloadFile() pour télécharger un fichier à partir d'une URL et le stocker dans le dossier cypress/downloads.
• Après le téléchargement, nous validons que le fichier existe à l'aide de cy.readFile().

Étape 3 : Valider le contenu du fichier
Vous souhaiterez peut-être vérifier le contenu du fichier téléchargé pour vous assurer que le téléchargement a réussi. Pour les fichiers texte (par exemple, .txt, .csv), cy.readFile() de Cypress peut être utilisé pour affirmer le contenu du fichier.

Exemple : Valider le contenu du fichier téléchargé

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

Ce test télécharge un fichier .txt et vérifie qu'il contient le texte attendu.

Meilleures pratiques pour le téléchargement et le téléchargement de fichiers dans Cypress

1. Utiliser les appareils pour le téléchargement : stockez toujours les fichiers à télécharger dans le dossier des appareils pour garder vos données de test organisées et accessibles.
2. Nettoyer le dossier de téléchargements : avant de commencer de nouveaux tests, nettoyez le dossier de téléchargements pour éviter les problèmes liés aux fichiers restants des exécutions de tests précédentes.
3. Vérifier la réponse du serveur : pour les téléchargements de fichiers, vérifiez toujours les réponses côté serveur en plus des assertions de l'interface utilisateur pour vous assurer que le fichier est correctement traité.
4. Utiliser des répertoires temporaires pour les téléchargements : stockez les fichiers téléchargés dans des répertoires temporaires (cypress/downloads) pour éviter d'encombrer la structure de votre projet.
5. Téléchargements de fichiers simulés (facultatif) : dans les scénarios dans lesquels vous souhaitez simuler les téléchargements de fichiers pour des raisons de performances, utilisez des stubs pour contourner les téléchargements de fichiers réels.

Conclusion

Le téléchargement et le téléchargement de fichiers sont des opérations critiques dans les tests d'applications Web, et bien que Cypress ne prenne pas en charge ces opérations de manière native, les plugins cypress-file-upload et cypress-downloadfile fournissent des solutions de contournement faciles à utiliser.

Dans ce guide, nous avons expliqué comment :

• Téléchargez des fichiers à l'aide du plugin cypress-file-upload de Cypress.
• Validez les téléchargements de fichiers en vérifiant les noms de fichiers et les métadonnées.
• Téléchargez les fichiers à l'aide du plugin cypress-downloadfile et validez l'existence et le contenu des fichiers téléchargés.

Avec ces outils et techniques, vous pouvez gérer en toute confiance les téléchargements de fichiers dans vos tests Cypress de bout en bout !