Testautomatisierung mit Cypress: Setup, Best Practices & CI/CD [2026]

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:

Empfehlung: Cypress wenn dein Team JavaScript-first ist und nur Chromium testet. Playwright für Multi-Browser und komplexe Szenarien. Selenium für bestehende Java-Projekte.

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.

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.

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% gebracht. 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.

Was kostet Cypress?

Cypress ist Open Source und kostenlos. Cypress Cloud (Parallelisierung, Dashboard, Analytics) ist kostenpflichtig ab $75/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.