Einführung

Der Umgang mit Datei-Uploads und -Downloads ist ein häufiges Szenario bei End-to-End-Tests. In diesem Beitrag erfahren Sie, wie Sie mit Cypress sowohl Datei-Uploads als auch -Downloads handhaben. Auch wenn Cypress keine integrierte Unterstützung für diese Vorgänge bietet, können Sie diese Funktionalität durch die Nutzung einiger Bibliotheken und des robusten Befehlssatzes von Cypress erreichen.

Am Ende dieses Leitfadens wissen Sie, wie Sie:

• Dateien mit Cypress hochladen.
• Erfolgreiche Datei-Uploads validieren.
• Laden Sie Dateien herunter und validieren Sie deren Inhalt in Cypress.

Voraussetzungen

Um den Beispielen folgen zu können, stellen Sie sicher, dass Sie Cypress installiert und eingerichtet haben. Wenn Sie Cypress v13.6.2 verwenden, ist es mit den in diesem Beitrag gezeigten Ansätzen kompatibel.

Datei-Uploads in Cypress

Um Dateien in Cypress hochzuladen, verwenden wir das Cypress-File-Upload-Plugin, das eine einfache Möglichkeit bietet, Datei-Upload-Aktionen während Ihrer Tests zu simulieren.
Schritt 1: Cypress-File-Upload-Plugin installieren
Um Datei-Uploads in Cypress zu verarbeiten, müssen Sie zunächst das Paket cypress-file-upload installieren.

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

Importieren Sie es als Nächstes in Ihre Datei „commands.js“ im Cypress-Supportordner:

import 'cypress-file-upload';

Schritt 2: Ordnerstruktur
Stellen Sie sicher, dass Ihr Projekt über die folgende Ordnerstruktur verfügt, um Testdateien zu speichern und während der Tests hochzuladen:

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

Schritt 3: Hochladen einer Datei
Sobald Sie das Plugin installiert haben, können Sie mit dem Befehl attachmentFile eine Datei aus dem Fixtures-Ordner hochladen.

So können Sie eine Datei hochladen:

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

In diesem Test:

• Wir besuchen die Seite, auf der die Dateieingabe vorhanden ist.
• Wir verwenden attachmentFile(), um den Datei-Upload aus dem Fixtures-Ordner zu simulieren.
• Die Behauptung prüft, ob der Name der hochgeladenen Datei korrekt auf der Seite angezeigt wird.

Validieren von Datei-Uploads

Die Validierung eines Datei-Uploads kann so einfach sein wie die Überprüfung, ob der Dateiname oder der Pfad nach dem Upload auf der Webseite angezeigt wird. Für komplexe Szenarien (z. B. Überprüfung des Dateiinhalts oder der Dateigröße) benötigen Sie jedoch möglicherweise serverseitige Prüfungen oder Stubs.

Beispiel: Datei-Upload mit zusätzlichen Daten validieren

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

Dateidownloads in Cypress
Cypress bietet keine native Unterstützung für die Überprüfung von Dateidownloads (da der Browser Dateien außerhalb der Kontrolle von Cypress herunterlädt), aber wir können dies umgehen, indem wir die heruntergeladene Datei direkt im lokalen Dateisystem überprüfen.

Schritt 1: Cypress-Downloadfile installieren
Um Dateidownloads in Cypress zu validieren, können wir das Plugin cypress-downloadfile verwenden.

Installieren Sie es über npm:

npm install --save-dev cypress-downloadfile

Fügen Sie als Nächstes das Plugin zu Ihrer commands.js-Datei hinzu:

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

Schritt 2: Dateien herunterladen und validieren
Sie können jetzt einen Test schreiben, der eine Datei herunterlädt und ihren Inhalt überprüft.

Beispiel: Herunterladen einer Datei

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

In diesem Test:

• Wir verwenden cy.downloadFile(), um eine Datei von einer URL herunterzuladen und sie im Ordner cypress/downloads zu speichern.
• Nach dem Download überprüfen wir mit cy.readFile(), ob die Datei vorhanden ist.

Schritt 3: Dateiinhalt validieren
Möglicherweise möchten Sie den Inhalt der heruntergeladenen Datei überprüfen, um sicherzustellen, dass der Download erfolgreich war. Für textbasierte Dateien (z. B. .txt, .csv) kann cy.readFile() von Cypress verwendet werden, um den Inhalt der Datei zu bestätigen.

Beispiel: Heruntergeladenen Dateiinhalt validieren

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

Dieser Test lädt eine TXT-Datei herunter und prüft, ob sie den erwarteten Text enthält.

Best Practices für das Hoch- und Herunterladen von Dateien in Cypress

1. Vorrichtungen zum Hochladen verwenden: Speichern Sie Dateien zum Hochladen immer im Vorrichtungsordner, um Ihre Testdaten organisiert und zugänglich zu halten.
2. Download-Ordner bereinigen: Bevor Sie mit neuen Tests beginnen, bereinigen Sie den Download-Ordner, um Probleme mit übrig gebliebenen Dateien aus früheren Testläufen zu vermeiden.
3. Serverantwort überprüfen: Überprüfen Sie bei Datei-Uploads zusätzlich zu UI-Behauptungen immer auch serverseitige Antworten, um sicherzustellen, dass die Datei ordnungsgemäß verarbeitet wird.
4. Temporäre Verzeichnisse für Downloads verwenden: Speichern Sie heruntergeladene Dateien in temporären Verzeichnissen (cypress/downloads), um eine Überladung Ihrer Projektstruktur zu vermeiden.
5. Schein-Datei-Uploads (optional): In Szenarien, in denen Sie Datei-Uploads aus Leistungsgründen vortäuschen möchten, verwenden Sie Stubs, um echte Datei-Uploads zu umgehen.

Abschluss

Das Hochladen und Herunterladen von Dateien sind wichtige Vorgänge beim Testen von Webanwendungen, und obwohl Cypress diese Vorgänge nicht nativ unterstützt, bieten die Plugins „cypress-file-upload“ und „cypress-downloadfile“ benutzerfreundliche Problemumgehungen.

In diesem Leitfaden haben wir untersucht, wie man:

• Laden Sie Dateien mit dem Cypress-File-Upload-Plugin von Cypress hoch.
• Validieren Sie Datei-Uploads, indem Sie Dateinamen und Metadaten überprüfen.
• Laden Sie Dateien mit dem Plugin „cypress-downloadfile“ herunter und überprüfen Sie die Existenz und den Inhalt der heruntergeladenen Dateien.

Mit diesen Tools und Techniken können Sie Datei-Uploads und -Downloads in Ihren Cypress-End-to-End-Tests sicher bewältigen!