E2E-Testing TypeScript: Vollständiger Leitfaden für Entwickler

Funktioniert Ihre Anwendung? Beweisen Sie es mit E2E-Tests in TypeScript

Haben Sie jemals den Satz gehört: „Bei uns läuft alles, wir haben manuell getestet“? Und am nächsten Tag stürzt die Produktion ab? Kommt Ihnen bekannt vor, oder? Manuelles Testen ist wie Kaffeesatzlesen. Sie wissen nie, ob Sie genau den Knopf drücken, der den gesamten Benutzerfluss zerstört.

E2E (End-to-End)-Testing mit TypeScript ist Ihr digitaler QA-Ingenieur, der nicht schläft, keinen Kaffee trinkt und 24/7 jeden Knopf überprüft. In diesem Artikel erklären wir nicht nur, was E2E-Tests sind. Wir schreiben sie gemeinsam: von der Installation bis zur produktiven CI/CD-Pipeline. Schnallen Sie sich an, es wird heiß und nützlich!

Warum gerade TypeScript für E2E-Tests?

Man könnte meinen, E2E-Tests könnten in jeder Sprache geschrieben werden: JavaScript, Python, sogar Java (aber lassen wir das Traurige). TypeScript gibt Ihnen jedoch eine Superkraft – statische Typisierung. Sie werden keine Bugs wie Cannot read property 'click' of undefined mehr zur Laufzeit abfangen. Ihre IDE zeigt den Fehler bereits vor dem Teststart an.

Außerdem: Wenn Ihre Anwendung in TypeScript geschrieben ist (und das tun heute 90% der Teams), ist es logisch, Tests in derselben Sprache zu schreiben. Sie verwenden dieselben Typen, dieselben Interfaces, dieselben Hilfsfunktionen. Das reduziert die kognitive Belastung und beschleunigt die Entwicklung.

Tool-Auswahl: Playwright vs Cypress

Der Markt für E2E-Tools für TypeScript ist klein, aber es gibt zwei klare Spitzenreiter: Cypress und Playwright. Wir werden Playwright verwenden. Warum?

• Multi-Browser-Unterstützung von Haus aus: Chromium, Firefox, WebKit (Safari). Cypress kann derzeit nicht richtig mit Safari arbeiten.
• Geschwindigkeit: Playwright arbeitet über das DevTools-Protokoll, nicht über einen Proxy-Server, was die Tests schneller macht.
• Arbeit mit iframes und Tabs: Playwright schränkt die Arbeit mit mehreren Tabs oder Cross-Domain-iframes nicht ein.
• TypeScript first: Playwright ist in TypeScript geschrieben und unterstützt es vollständig.

Aber wenn Sie Anfänger sind, könnte Cypress für den Einstieg einfacher sein. Die Wahl liegt bei Ihnen. Wir ziehen mit Playwright in den Kampf.

Installation und Projekteinrichtung

Erstellen wir ein neues Projekt und installieren Playwright. Öffnen Sie das Terminal und führen Sie Folgendes aus:

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

Der letzte Befehl lädt die Browser herunter (Chromium, Firefox, WebKit). Das dauert ein paar Minuten – holen Sie sich in der Zeit einen Kaffee.

Erstellen Sie eine Datei playwright.config.ts im Projektstammverzeichnis:

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

Wir haben die Basis-URL konfiguriert (ersetzen Sie sie durch die Adresse Ihrer Anwendung), das Tracing zum Debuggen aktiviert und angegeben, dass die Tests im Ordner tests liegen.

Unseren ersten E2E-Test in TypeScript schreiben

Erstellen Sie den Ordner tests und die Datei login.spec.ts. Nehmen wir an, wir haben ein einfaches Anmeldeformular.

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

test.describe('Benutzeranmeldung', () => {  test('Erfolgreicher Login mit korrekten Daten', async ({ page }) => {    // Schritt 1: Login-Seite öffnen    await page.goto('/login');

    // Schritt 2: Felder ausfüllen    await page.getByLabel('E-Mail').fill('user@example.com');    await page.getByLabel('Passwort').fill('securepassword123');

    // Schritt 3: "Anmelden"-Button klicken    await page.getByRole('button', { name: 'Anmelden' }).click();

    // Schritt 4: Auf Weiterleitung zum Dashboard warten    awai