Datei-Uploads und -Downloads in E2E-Tests absichern

1. Warum Datei-Interaktionen eine eigene Testkategorie bilden

Datei-Uploads und -Downloads unterscheiden sich von den meisten anderen Frontend-Interaktionen dadurch, dass sie das Dateisystem der Testumgebung selbst einbeziehen, nicht nur den Browser: Ein Upload liest eine tatsächliche Datei von der Festplatte, ein Download schreibt eine tatsächliche Datei zurück, und beide Vorgänge können je nach Dateigrösse, Netzwerkgeschwindigkeit und Server-Konfiguration deutlich länger dauern als eine gewöhnliche Formular-Interaktion.

Diese zusätzliche Dimension bedeutet, dass ein Test, der Datei-Interaktionen ernsthaft absichern will, nicht nur die UI-Ebene prüfen darf, sondern auch tatsächliche Testdateien in unterschiedlichen Grössen und Formaten vorhalten, das Timeout-Verhalten des Test-Runners auf realistische Uploadzeiten abstimmen und heruntergeladene Dateien direkt im Dateisystem der Testumgebung inhaltlich untersuchen muss.

Ein oft übersehener organisatorischer Aspekt ist die Notwendigkeit, temporäre Test-Downloadverzeichnisse nach jedem Testlauf zuverlässig zu bereinigen, da sich sonst über viele CI-Läufe hinweg heruntergeladene Testdateien unbemerkt ansammeln und im schlimmsten Fall den verfügbaren Speicherplatz des CI-Runners erschöpfen können, weshalb ein sauberes Test-Setup das Downloadverzeichnis entweder vor jedem Testlauf leert oder pro Testlauf ein frisches, temporäres Verzeichnis verwendet, das nach Abschluss automatisch wieder entfernt wird.

2. Datei-Uploads mit Playwright automatisieren

Playwright bietet mit setInputFiles eine direkte Möglichkeit, eine oder mehrere Dateien an ein Datei-Eingabefeld zu übergeben, ohne den systemeigenen Datei-Dialog des Betriebssystems öffnen zu müssen, der aus einem Browsertest heraus ohnehin nicht steürbar wäre, da er außerhalb des vom Browser kontrollierten Bereichs liegt.

import { test, expect } from '@playwright/test';
import path from 'path';

test('Produktbild-Upload im Admin funktioniert', async ({ page }) => {
  await page.goto('/admin/catalog/product/edit/id/123');
  const fileInput = page.locator('input[type="file"]');
  await fileInput.setInputFiles(path.join(__dirname, 'fixtures', 'produktbild.jpg'));

  await expect(page.locator('[data-testid="upload-preview"]')).toBeVisible();
  await expect(page.locator('[data-testid="upload-filename"]')).toHaveText('produktbild.jpg');
});

3. Große Dateien und Timeout-Verhalten gezielt testen

Ein Upload-Test, der nur mit einer winzigen Beispieldatei arbeitet, deckt die wichtigsten realen Fehlerqüllen nicht ab, da Probleme mit dem Upload-Grössenlimit, mit langsamer Fortschrittsanzeige oder mit einem serverseitigen Timeout erst bei tatsächlich großen Dateien sichtbar werden, weshalb eine belastbare Teststrategie gezielt eine Datei knapp unterhalb und eine Datei knapp oberhalb des konfigurierten Grössenlimits einsetzt.

Für die Datei knapp oberhalb des Limits erwartet der Test eine klare, verständliche Fehlermeldung statt eines stillen Fehlschlags oder eines undurchsichtigen Server-Fehlers, während für die große, aber noch zulässige Datei zusätzlich geprüft wird, ob eine Fortschrittsanzeige während des Uploads tatsächlich sichtbar wird und der gesamte Vorgang innerhalb eines realistisch bemessenen, nicht zu knapp gesetzten Timeouts erfolgreich abschliesst.

4. Dateityp-Validierung auf Client- und Serverseite prüfen

Eine vollständige Dateityp-Validierung besteht aus zwei getrennten Ebenen, die beide einzeln getestet werden müssen: eine clientseitige Vorabprüfung, die dem Benutzer sofortiges Feedback ohne Serverkontakt gibt, und eine serverseitige Prüfung, die als eigentliche Sicherheitsgrenze fungiert, da die clientseitige Prüfung durch direkte API-Aufrufe ohne Browser vollständig umgangen werden kann.

Ein besonders wichtiger Testfall ist eine Datei, deren Dateiendung eine erlaubte Kategorie vortäuscht, deren tatsächlicher Binärinhalt aber einem anderen, nicht erlaubten Dateityp entspricht, etwa eine als .jpg umbenannte PHP-Datei, denn eine Validierung, die sich ausschliesslich auf die Dateiendung statt auf den tatsächlichen Datei-Inhalt verlässt, stellt ein ernstzunehmendes Sicherheitsrisiko dar, das sich in Magento-Admin-Uploadbereichen mit einem gezielten, automatisierten Testfall zuverlässig überwachen lässt.

test('als JPG getarnte PHP-Datei wird serverseitig abgelehnt', async ({ page, request }) => {
  await page.goto('/admin/catalog/product/edit/id/123');
  const fileInput = page.locator('input[type="file"]');
  await fileInput.setInputFiles(path.join(__dirname, 'fixtures', 'schadhaft.php.jpg'));

  await expect(page.locator('[data-testid="upload-error"]')).toContainText('Dateityp nicht erlaubt');
});

5. Downloads im Test-Runner abfangen

Playwright stellt für Downloads ein eigenes Event bereit, das ausgelöst wird, sobald der Browser eine Datei herunterlädt, wodurch der Test auf den Abschluss des Downloads warten und anschliessend den lokalen Pfad der heruntergeladenen Datei im Dateisystem der Testumgebung ermitteln kann, ohne selbst einen Download-Ordner manüll überwachen zu müssen.

Bei serverseitig dynamisch generierten Dateien, etwa einem erst bei Klick erzeugten PDF-Export, lohnt sich zusätzlich die Prüfung, dass der Download-Button während der Generierung sichtbar deaktiviert oder mit einem Ladezustand versehen wird, statt einen zweiten, versehentlichen Klick zuzulassen, der andernfalls zu zwei parallelen, sich gegenseitig verzögernden Generierungsvorgängen führen könnte, was insbesondere bei rechenintensiven Exporten mit vielen Bestellpositionen spürbar ins Gewicht fallen kann.

test('Rechnungs-PDF lässt sich im Kundenkonto herunterladen', async ({ page }) => {
  await page.goto('/sales/order/history');

  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.locator('[data-testid="invoice-download"]').first().click(),
  ]);

  const filePath = await download.path();
  expect(download.suggestedFilename()).toMatch(/^rechnung-\d+\.pdf$/);
  expect(filePath).toBeTruthy();
});

6. Heruntergeladene Dateien inhaltlich validieren

Das blosse Vorhandensein einer heruntergeladenen Datei sagt nichts über deren tatsächlichen Inhalt aus, weshalb ein wirklich belastbarer Test die heruntergeladene Datei anschliessend mit einer geeigneten Parsing-Bibliothek öffnet und konkrete, inhaltliche Erwartungen prüft, etwa ob eine heruntergeladene CSV-Datei die erwartete Anzahl an Zeilen und Spalten enthält oder ob ein heruntergeladenes PDF-Dokument die korrekte Bestellnummer und den korrekten Rechnungsbetrag enthält.

Für PDF-Dateien bietet sich eine Textextraktions-Bibliothek an, die den enthaltenen Text durchsuchbar macht, während für CSV- und Excel-Exporte eine strukturierte Parsing-Bibliothek die einzelnen Zellen direkt als Werte statt als rohen Text zugänglich macht, wodurch Assertions präzise auf einzelne, konkrete Datenpunkte formuliert werden können, statt sich mit einer unpräzisen Volltextsuche im gesamten Dateiinhalt begnügen zu müssen.

Neben der inhaltlichen Prüfung einzelner Datenpunkte lohnt sich bei besonders kritischen Downloads, etwa einer Rechnung mit rechtlicher Relevanz, zusätzlich eine einfache Prüfsummenprüfung über die gesamte Datei, um sicherzustellen, dass die heruntergeladene Datei nicht durch eine fehlerhafte Übertragung beschädigt wurde, selbst wenn die einzelnen inhaltlichen Assertions für sich genommen bereits erfolgreich waren.

7. Sicherheitsaspekte: manipulierte Dateien gezielt testen

Neben der reinen Funktionsprüfung lohnt sich ein gezielter Blick auf sicherheitsrelevante Uploadszenarien, etwa eine Datei mit doppelter Dateiendung, eine Datei mit absichtlich manipulierten EXIF-Metadaten, oder eine überlange Datei mit einem absichtlich sehr langen Dateinamen, der interne Pfadlängenbegrenzungen des Servers überschreiten könnte.

Diese sicherheitsorientierten Testfälle sollten nicht als Nebensache betrachtet werden, sondern als fester, wiederkehrender Bestandteil der Test-Suite für jeden öffentlich zugänglichen Upload-Bereich, da Datei-Uploads historisch zu den häufigsten Einfallstoren für erfolgreiche Angriffe auf Webanwendungen gehören.

Ein zusätzlicher, gerne übersehener Testfall betrifft Dateinamen mit ungewöhnlichen, aber technisch gültigen Zeichen, etwa Leerzeichen, Umlauten oder Sonderzeichen, da eine fehlerhafte Behandlung solcher Zeichen bei der internen Speicherung auf dem Server im schlimmsten Fall zu einem Pfad-Traversal-Problem oder zu einer beschädigten, nicht mehr auffindbaren Datei führen kann, obwohl der Upload selbst scheinbar erfolgreich abgeschlossen wurde und keinerlei sichtbare Fehlermeldung ausgelöst hat.

8. Mehrfach-Uploads und Reihenfolge gleichzeitig hochgeladener Dateien testen

Viele Magento-Produktseiten erlauben den gleichzeitigen Upload mehrerer Bilder für die Produktgalerie in einem einzigen Vorgang, weshalb ein realistischer Test nicht nur eine einzelne Datei, sondern ein Array mehrerer Dateien gleichzeitig an setInputFiles übergibt und anschliessend prüft, dass jede einzelne Datei in der erwarteten Reihenfolge in der Galerie erscheint, statt sich auf den einfacheren, aber weniger realistischen Einzel-Datei-Fall zu beschränken.

Ein besonders aufschlussreicher Testfall kombiniert innerhalb desselben Mehrfach-Uploads eine gültige und eine ungültige Datei, um zu prüfen, ob das System die gültige Datei trotzdem erfolgreich verarbeitet und ausschliesslich die ungültige Datei mit einer klaren Fehlermeldung zurückweist, statt im schlechtesten Fall den gesamten Upload-Vorgang stillschweigend und ohne jede Fehlermeldung vollständig zu verwerfen.

9. Praktischer Magento-Bezug: Produktbilder und Rechnungs-PDFs

Im Magento-Admin-Bereich betrifft dies vor allem den Produktbild-Upload sowie den Import von CSV-Dateien für Produktdaten, bei denen sowohl die Dateigrösse als auch der tatsächliche Dateiinhalt korrekt validiert werden müssen, während im Kundenkonto-Frontend der Download von Rechnungs- und Lieferschein-PDFs den wichtigsten Download-Testfall darstellt.

Die folgende Tabelle fasst die vorgestellten Testansätze für Datei-Uploads und -Downloads zusammen.

10. Zusammenfassung

11. FAQ: Datei-Testing: Das Wichtigste auf einen Blick