Avocoado Logo

Integration von Fuzz-Testing in Angular: Testen mit zufälligen Eingaben

author image

Salina Körner, 27. November 2025

Lesezeit: 15 Minuten

Jeder, der schon eine Webanwendung programmiert hat, kennt das Problem: Man denkt, man hat seine Anwendung gut getestet und sie funktioniert einwandfrei. Doch dann wird die Anwendung von echten Nutzern genutzt, die Eingaben tätigen, mit denen keiner gerechnet hat. Ob Sonderzeichen in Formularen, Datumsangaben, die keine sind oder Zugriffe auf Elemente, die es gar nicht gibt. Je mehr Nutzer es gibt und je länger eine Anwendung existiert, desto größer die Anzahl an unerwarteten Eingaben und ungewünschtem Verhalten.

Motivation

Es ist also zwingend notwendig, mit Tests zu arbeiten, um die Qualität einer Webanwendung sicherstellen zu können. Eine sehr bekannte Art an Tests sind Unit-Tests. Diese haben aber einen großen Haken: Nur bekannte Fälle werden getestet. Wenn ein Entwickler nicht an einen bestimmten Testfall bei der Implementierung des Tests denkt, wird dieser Fall nie getestet, obwohl er möglicherweise durch einen Nutzer verursacht werden kann. Dies führt dazu, dass Fehler erst spät entdeckt werden können. Folglich leidet darunter die Qualität der Software.

Es wäre also praktisch, wenn man eine Anwendung mithilfe von zufälligen Eingaben testen könnte, um vor allem auch Randfälle betrachten zu können. Hier kommt Fuzz-Testing ins Spiel.

Was ist Fuzz-Testing?

Als erstes muss natürlich geklärt werden, was dieses Fuzz-Testing überhaupt ist. Die Grundidee von Fuzz-Testing besteht darin, "zufällig" generierte Werte in ein Programm zu übergeben und das Programm dann auf Fehlverhalten zu überwachen. Diese Idee kam 1988 Barton Miller, einem Professor an der University of Wisconsin-Madison.

Der sehr simple Ablauf ist wie folgt: Es wird eine Eingabe generiert (auch Seed genannt). Dieser generierte Seed wird dann an das Programm Under Test (PUT) übergeben und danach wird das PUT auf Fehler überwacht.

/uploads/fuzz_test_ablauf_b701749b40.png

Was einst eine relativ simple Test-Technik war, hat sich in den letzten 35 Jahren weiterentwickelt und einige Konzepte haben sich in der Welt des Fuzz-Testings durchgesetzt . Moderne Fuzzer unterscheiden etwa zwischen zufällig generierten und gezielt mutierten Eingaben oder arbeiten sogar coverage-guided, um möglichst viel Programm-Logik abzudecken.

Fuzz-Testing in Angular mit fast-check

Aber wie kann das in eine moderne Angular-Anwendung eingebunden werden? Hier wurde das Framework fast-check benutzt, das bereits pseudo-zufällige Werte generieren kann und bei Fehlern automatisch das sogenannte Input-Shrinking unterstützt. Mit diesem Vorgang wird versucht das fehlerverursachende Minimalbeispiel direkt zu finden. Dies ist besonders praktisch, wenn es sich um Randfälle handelt. Dabei können verschiedene Vorgaben gemacht werden, anhand derer die Eingabe strukturiert wird. Dies eignet sich vor allem dann, wenn der Seed eine bestimmte Form haben muss, um ins Innere des PUT zu gelangen.

Wie ein Fuzz-Test mit fast-check in Angular aussehen kann ist im nächsten Code-Beispiel zu sehen.

it('[fuzz] should get array item', () => {
    fc.assert(
        fc.property(
            fc.integer(),
            (index) => {
                const result = component.getArrayItem(index);
                fixture.detectChanges();
                return result != undefined;
            }
        ),
        { numRuns: 100, verbose: 2 }
    );
});

Was passiert in diesem Fuzz-Test?

  • Es wird ein Integer-Wert generiert auf dessen Index dann zugegriffen werden kann
  • Wird undefined zurückgegeben, so gilt der Test als fehlgeschlagen
  • Maximal 1000 Mal wird der Test ausgeführt, sofern kein Fehler auftritt
  • Durch verbose: 2 wird in der Konsole genau ausgegeben, wie das Minimalbeispiel gefunden wurde

Gerade so werden Edge Cases gefunden, ohne dass Entwickler explizite Tests für alle Fälle schreiben müssen. Bei diesem Beispiel war besonders spannend, dass durch den Fuzz-Test viel zu große Indizes oder auch negative Indizes getestet wurden.

Ergebnisse

Die Fuzz-Tests können automatisiert ablaufen und wurden bei uns direkt in den vorhandenen Auslieferungsprozess eingebunden. Damit läuft jetzt beim Rollout einer neuen Applikationsversion immer automatisch auch eine Fuzz-Test-Kampagne, ganz ohne Mehraufwand im Tagesgeschäft. Fehler wie plötzliche Exceptions durch ungültigen Array-Zugriff oder fehlerhafte Formular-Validierung können so jetzt schon vor der Auslieferung erkannt und eliminiert werden.

Nicht selten wurden dabei schon in den ersten Durchläufen problematische Werte aufgedeckt, an die vorher im Review oder beim Schreiben klassischer Unit-Tests niemand gedacht hatte.

Vergleich mit Unit-Tests

Klassische Unit-Tests sind hervorragend geeignet, definierte und vorhersehbare Anwendungsfälle zu prüfen. Sie liefern reproduzierbare Ergebnisse und gehören zum Standardrepertoire jeder modernen Webentwicklung. Doch gerade weil Unit-Tests gezielt ausgewählte Werte prüfen, entsteht fast immer eine Lücke: die Summe aller nicht explizit getesteten Randfälle.

Fuzz-Testing ist hier die perfekte Ergänzung. Es finden sich so:

  • Unerwartete Wertebereiche (z.B. Extremwerte, negative Indizes)
  • Fehlerhafte Nutzerinteraktionen, die keinem Standardfall entsprechen
  • Automatisiert neue Edge Cases, ohne dass explizit neue Tests angelegt werden müssen

Gerade für Funktionen, die Eingaben aus der Außenwelt (wie Nutzer-Input oder API-Daten) verarbeiten, empfiehlt sich die Kombination von Fuzz- und Unit-Testing als Best Practice.

Fazit und Ausblick

Fuzz Testing mit fast-check hat sich als sinnvolle Ergänzung zu Unit-Tests gezeigt, gerade wenn es um Input-Validierung und Edge-Cases geht. Insbesondere Eingaben, die Entwickler nicht vorausgesehen haben, lassen sich so frühzeitig erkennen. Die Integration in bestehende Angular-Projekte gelingt einfach, und auch die Einbindung in CI/CD-Prozesse ist problemlos. Dies sorgt für eine zuverlässigere, robustere Webanwendung.

Das ist aber erst der Anfang. Zukünftig könnten coverage-guided Fuzzer und weiterführende Reporting-Mechanismen den Mehrwert noch weiter steigern, insbesondere für besonders sicherheitskritische Applikationen oder komplexe Eingabestrukturen.

author image

Salina Körner

Absolventin der Hochschule Karlsruhe und neues Teammitglied

Im Rahmen meiner viermonatigen Bachelorarbeit hatte ich die Gelegenheit, meine Kenntnisse in der modernen Webentwicklung gezielt zu vertiefen und gleichzeitig umfassende Praxiserfahrungen mit dem Einsatz von Fuzz Testing in Angular-Anwendungen zu sammeln.

Teile den Beitrag mit deinen Freunden!