So validieren Sie Uploads und Downloads in Cypress

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 dieser Anleitung 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 durchführen zu können, müssen Sie zunächst das Paket „cypress-file-upload“ installieren.

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

Als nächstes importieren Sie es 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-file-upload

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

import 'cypress-file-upload';

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

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

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: Heruntergeladene Dateiinhalte validieren

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

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

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

1. Verwenden Sie Fixtures zum Hochladen: Speichern Sie Dateien zum Hochladen immer im Fixtures-Ordner, 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 beim Hochladen von Dateien zusätzlich zu den UI-Behauptungen immer auch die serverseitigen Antworten, um sicherzustellen, dass die Datei ordnungsgemäß verarbeitet wird.
4. Verwenden Sie temporäre Verzeichnisse für Downloads: 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 Sie:

• 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 Cypress-Downloadfile-Plugin 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!

Das obige ist der detaillierte Inhalt vonSo validieren Sie Uploads und Downloads in Cypress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!