Vue Academy · Lektion

End-to-End-Tests

Validieren Sie vollständige Nutzerabläufe mit End-to-End-Tests.

End-to-End-Tests ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Wie ein Benutzer testen

Beim End-to-End-Test wird Ihre echte Anwendung in einem echten Browser bedient: Es werden Schaltflächen angeklickt und Formulare genau wie von einem Benutzer ausgefüllt. So wird überprüft, ob alles von der UI bis zum Backend zusammenspielt.

Warum E2E-Tests?

Unit-Tests prüfen einzelne Teile isoliert, aber nur E2E-Tests bestätigen den vollständigen Ablauf: Ein Benutzer kann sich anmelden, navigieren, ein Formular absenden und das Ergebnis sehen. Sie erkennen Integrationslücken, die alle anderen Tests übersehen.

Cypress installieren

Cypress ist ein beliebtes E2E-Framework mit einem interaktiven Test-Runner. Installieren Sie es als Entwicklungsabhängigkeit und öffnen Sie anschließend den Runner.

npm install -D cypress
npx cypress open

Struktur eines Cypress-Tests

Ein Cypress-Test verwendet describe, um Tests zu gruppieren, und it für jedes Szenario. Damit folgt er einer vertrauten Testsyntax.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

Eine Seite aufrufen

Verwenden Sie cy.visit, um eine URL im Browser zu laden. Das ist der Ausgangspunkt der meisten Tests.

cy.visit("http://localhost:5173/login")

Elemente finden

cy.get wählt Elemente mit einem CSS-Selektor aus. Cypress wartet automatisch darauf, dass Elemente erscheinen, wodurch weniger instabile Tests entstehen.

cy.get("input[name=email]")
cy.get("button[type=submit]")

In Eingabefelder tippen

Hängen Sie type an ein ausgewähltes Eingabefeld an, um eine Tastatureingabe zu simulieren.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

Elemente anklicken

Verwenden Sie click, um mit Schaltflächen und Links zu interagieren – genau wie ein Benutzer.

cy.get("button[type=submit]").click()

Das Ergebnis überprüfen

Überprüfen Sie nach der Interaktion mit should, was der Benutzer jetzt sehen sollte. Cypress wiederholt Assertions, bis sie erfolgreich sind oder die Zeit abläuft.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

Ein vollständiger E2E-Test

Zusammengesetzt ergeben die Schritte einen verständlichen Test eines echten Benutzerablaufs.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

Playwright-Alternative

Playwright ist ein weiteres leistungsfähiges E2E-Tool mit ähnlichen Konzepten: Es startet einen Browser, ruft Seiten auf, interagiert mit ihnen und führt Assertions aus. Die API unterscheidet sich, aber die Denkweise beim Testen ist dieselbe.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

Kurzer Check

Testen Sie Ihr Wissen über E2E-Tests.

Zusammenfassung

End-to-End-Tests steuern die echte Anwendung in einem Browser. Mit Cypress strukturieren Sie Tests mit describe/it, laden Seiten mit cy.visit, finden Elemente mit cy.get, interagieren über type und click und überprüfen Ergebnisse mit should. Playwright folgt denselben Grundsätzen. Als Nächstes optimieren Sie Ihren Build und veröffentlichen ihn.

Häufig gestellte Fragen

Ist die Lektion „End-to-End-Tests“ kostenlos?

Ja — der vollständige Text von „End-to-End-Tests“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „End-to-End-Tests“?

Validieren Sie vollständige Nutzerabläufe mit End-to-End-Tests. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „End-to-End-Tests“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy