Cypress Testautomatisierung 2026: E2E & Playwright-Vergleich

Was ist Cypress?

Cypress ist ein JavaScript-basiertes E2E-Testing-Framework das direkt im Browser läuft. Kein WebDriver, kein externer Prozess. Der Test-Code und die Anwendung teilen sich denselben Event-Loop. Das macht Cypress schnell, aber auch anders als alles was du von Selenium kennst.

Seit 2014 entwickelt, hat Cypress eine loyale Community aufgebaut. Die Stärke: eine extrem niedrige Einstiegshürde. npm install cypress, npx cypress open, und du siehst deinen ersten Test in unter 3 Minuten laufen. Open Source ist kein Kompromiss. Es ist ein Vorteil.

Qytera setzt Cypress in Frontend-lastigen Projekten ein, wo JavaScript-Teams schnell E2E-Tests brauchen. Für Multi-Browser-Projekte empfehlen wir Playwright. Methoden sind Werkzeuge, keine Religion.

Cypress vs. Playwright vs. Selenium

Die drei großen Frameworks im direkten Vergleich, Stand 2026:

Playwright oder Cypress? Kurz: Playwright ist 2026 für die meisten neuen Projekte die bessere Wahl, weil es Cross-Browser inklusive WebKit/Safari abdeckt, mehrere Programmiersprachen unterstützt und ohne kostenpflichtige Cloud parallelisiert. Cypress lohnt sich, wenn ein JavaScript-first-Team in Minuten startklar sein soll, Chromium genügt und Time-Travel-Debugging plus Component Testing den Ausschlag geben. Die Entscheidungskriterien im Detail stehen in der folgenden Tabelle.

Empfehlung 2026: Cypress wenn dein Team JavaScript-first arbeitet, Chromium reicht und du auf eine kleine, gepflegte Test-Suite (unter 200 Specs) setzt. Playwright wenn du Cross-Browser, parallele Pipelines ohne Cloud-Subscription oder Multi-Language-Teams hast. Selenium für bestehende Java-Projekte mit Legacy-Driver-Pflicht.

Setup und erster Test

Installation

# Neues Cypress-Projekt
mkdir cypress-demo && cd cypress-demo
npm init -y
npm install -D cypress typescript

# Cypress öffnen (erstellt Ordnerstruktur automatisch)
npx cypress open

Beim ersten Start erstellt Cypress die Ordnerstruktur: cypress/e2e/ für Tests, cypress/fixtures/ für Testdaten, cypress/support/ für Custom Commands.

Erster E2E-Test

// cypress/e2e/startseite.cy.ts
describe("Startseite", () => {
  beforeEach(() => {
    cy.visit("https://www.qytera.de");
  });

  it("hat den korrekten Title", () => {
    cy.title().should("contain", "Qytera");
  });

  it("Navigation zur Kontaktseite", () => {
    cy.contains("Kontakt").click();
    cy.url().should("include", "/kontakt");
    cy.get("#edit-name").should("be.visible");
    cy.get("#edit-mail").should("be.visible");
  });
});

Tests ausführen:

# Interaktiver Modus (mit Browser-Fenster)
npx cypress open

# Headless (für CI/CD)
npx cypress run

# Einzelnen Test ausführen
npx cypress run --spec "cypress/e2e/startseite.cy.ts"

# Browser wählen
npx cypress run --browser chrome

Selektoren und Assertions

Cypress nutzt jQuery-ähnliche Selektoren mit automatischem Retry. Wenn ein Element nicht sofort da ist, wartet Cypress bis zu 4 Sekunden (konfigurierbar):

// Best Practice: data-testid für stabile Selektoren
cy.get('[data-testid="submit-button"]').click();

// Text-basiert (lesbarer, aber fragiler)
cy.contains("Jetzt anfragen").click();

// Assertions mit should()
cy.get(".error-message")
  .should("be.visible")
  .and("contain", "Pflichtfeld");

// API-Request abfangen und prüfen
cy.intercept("POST", "/api/contact").as("submitForm");
cy.get('[data-testid="submit"]').click();
cy.wait("@submitForm").its("response.statusCode").should("eq", 200);

Der cy.intercept()-Befehl ist einer der stärksten Features von Cypress. Du kannst API-Requests abfangen, mocken und die Responses validieren, ohne den Backend-Server zu ändern.

Component Testing

Seit Version 10 kann Cypress einzelne React-, Vue- oder Angular-Komponenten isoliert testen. Kein Browser-Start nötig, kein Server:

// cypress/component/Button.cy.tsx
import { Button } from "../../src/components/Button";

describe("Button Component", () => {
  it("ruft onClick beim Klick auf", () => {
    const onClick = cy.stub().as("clickHandler");
    cy.mount();

    cy.get("button").click();
    cy.get("@clickHandler").should("have.been.calledOnce");
  });

  it("ist deaktiviert wenn disabled=true", () => {
    cy.mount();
    cy.get("button").should("be.disabled");
  });
});

Component Testing schließt die Lücke zwischen Unit-Tests und E2E-Tests. Du testest die Komponente mit echtem DOM-Rendering, aber ohne die gesamte Anwendung hochzufahren.

Wenn du tiefer in die Test-Hierarchie willst: Unsere Unit-Test-Praxisbasis erklärt, warum das Sicherheitsnetz unter Component Tests genauso wichtig bleibt, besonders bei KI-generiertem Code.

CI/CD-Integration

Qualität ist kein Gate am Ende der Pipeline. Qualität ist die Pipeline. GitHub Actions Beispiel:

# .github/workflows/cypress.yml
name: Cypress E2E Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm ci

      - name: Run Cypress tests
        uses: cypress-io/github-action@v6
        with:
          start: npm run dev
          wait-on: "http://localhost:3000"

      - name: Upload screenshots on failure
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: cypress-screenshots
          path: cypress/screenshots/

Der offizielle cypress-io/github-action kümmert sich um Installation, Browser-Setup und Parallelisierung. In Kundenprojekten ist das der schnellste Weg von Null auf CI/CD.

Wer Container-First arbeitet, packt Cypress in einen Docker-Container und ruft ihn aus Jenkins, jeder anderen Pipeline oder direkt aus Kubernetes auf. Cypress liefert vorgefertigte Images auf Docker Hub: cypress/included oder cypress/browsers als Basis.

Best Practices

1. data-testid Attribute nutzen
   CSS-Klassen ändern sich, IDs sind nicht immer eindeutig. data-testid="login-button" ist stabil und macht die Absicht klar.
2. Keine festen Wartezeiten
   cy.wait(5000) ist fast immer falsch. Cypress wartet automatisch. Nutze cy.intercept() + cy.wait("@alias") für API-Calls.
3. Tests isolieren
   Jeder Test muss unabhängig laufen. beforeEach() für Setup, keine Abhängigkeiten zwischen Tests. Testdaten per API anlegen, nicht per UI.
4. Custom Commands für Wiederverwendung
   Login, Navigation, Formular-Ausfüllen als Custom Commands in cypress/support/commands.ts definieren.
5. Screenshots und Videos aktivieren
   Cypress zeichnet bei Fehlern automatisch Screenshots auf. Videos kosten Performance, aber liefern Beweise.

Fazit

Cypress ist 2026 die beste Wahl für JavaScript-Teams die schnell E2E-Tests brauchen. Die Einstiegshürde ist niedriger als bei jedem anderen Framework: 3 Minuten bis zum ersten grünen Test. Time Travel Debugging, Component Testing und cy.intercept() für API-Mocking sind Features die kein anderes Tool so elegant löst.

Die Grenzen sind klar: kein Safari-Support, keine echte Multi-Browser-Strategie, kostenpflichtige Parallelisierung. Für Projekte mit diesen Anforderungen empfehlen wir Playwright. Ergebnisse beweisen, dass es funktioniert: In einem Kundenprojekt haben wir mit Cypress die Testabdeckung in 4 Wochen von 0 auf 80 Prozent gebracht. Aber das Framework ist nicht die Antwort. Es ist nur das Werkzeug. Tools wechseln. Qualitätsdenken bleibt. Qytera unterstützt bei Setup und Implementierung.

FAQ: Häufig gestellte Fragen zu Cypress

Ist Cypress besser als Selenium?

Für JavaScript-Projekte mit Chromium: ja. Cypress ist schneller, einfacher und hat besseres Debugging. Selenium bleibt relevant für Multi-Browser-Testing und Java-Projekte.

Kann Cypress API-Tests durchführen?

Ja. cy.request() für direkte API-Calls, cy.intercept() für Request-Mocking. Für umfassendes API-Testing empfehlen wir Postman oder Playwright.

Unterstützt Cypress TypeScript?

Ja, nativ seit Version 10. Einfach .cy.ts statt .cy.js als Dateiendung verwenden. TypeScript-Support ist out-of-the-box, keine zusätzliche Konfiguration nötig.

Wann sollte ich Cypress NICHT verwenden?

Drei Szenarien sprechen gegen Cypress: (1) Du brauchst Safari-Testing, kein nativer Support. (2) Deine Suite wächst über 200 Specs und du willst ohne Cloud-Subscription parallelisieren. (3) Dein Team arbeitet mit Java, Python oder C#. In allen drei Fällen ist Playwright die bessere Wahl.

Was kostet Cypress?

Cypress ist Open Source und kostenlos. Cypress Cloud (Parallelisierung, Dashboard, Analytics) ist kostenpflichtig ab 75 USD/Monat.

Wie integriere ich Cypress mit Jira/Xray?

Über das Cypress Xray Plugin. Test-Ergebnisse werden automatisch als JUnit-XML exportiert und in Xray importiert.

Was ist der Unterschied zwischen Cypress und Playwright?

Cypress läuft im Browser (gleicher Prozess), Playwright steuert den Browser von außen. Cypress ist einfacher für Einsteiger, Playwright flexibler für komplexe Szenarien. Details in unserem Testautomatisierungs-Guide.

Playwright oder Cypress: welches Tool sollte ich wählen?

Für neue E2E-Projekte mit Cross-Browser-Anforderung, mehreren Programmiersprachen oder paralleler Ausführung ohne Cloud-Kosten ist Playwright die erste Wahl. Cypress ist die bessere Option, wenn ein JavaScript-first-Team in unter 3 Minuten startklar sein soll, Chromium ausreicht und Funktionen wie Time-Travel-Debugging und Component Testing zählen. Für reine Chromium-Projekte mit kleiner Suite sind beide solide, Playwright skaliert aber günstiger.