Wer kennt das nicht: Das Feature ist fertig, der Code ist deployed — und dann bricht drei Tage später ein anderer Teil der App. Manuelle Regressionstests sind zeitaufwändig, fehleranfällig und langweilig. Cypress E2E Testing löst dieses Problem, und Claude Code macht das Schreiben von Cypress-Tests zur Fleißarbeit, nicht zur Kreativarbeit.
In diesem Guide zeigen wir dir, wie Claude Code vollständige Cypress-Testsuiten generiert — von der Projektstruktur bis zum Cypress Cloud Dashboard mit Parallelisierung.
🌲
Setup & Struktur
TypeScript-Konfiguration, Ordnerstruktur, cypress.config.ts
📐
Page Object Model
Wiederverwendbare Page-Klassen mit TypeScript-Typsicherheit
🔌
API Stubbing
cy.intercept() für deterministische Tests ohne Backend
⚙️
Component Testing
React & Vue Komponenten isoliert testen
1. Cypress Setup und Projektstruktur
Claude Code analysiert dein bestehendes Projekt und generiert eine vollständige Cypress-Konfiguration — inklusive TypeScript-Support, Custom Commands und sinnvoller Ordnerstruktur.
Setup Grundstruktur
- cypress.config.ts mit baseUrl, viewportWidth und retries
- cypress/support/commands.ts für Custom Commands
- cypress/fixtures/ für Testdaten-JSON-Dateien
- cypress/e2e/ für alle Testspezifikationen
- cypress/pages/ für Page Object Model Klassen
Der Prompt an Claude Code ist einfach: "Erstelle eine vollständige Cypress TypeScript Konfiguration für eine React-App mit Login, Dashboard und Checkout-Flow."
cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
viewportWidth: 1280,
viewportHeight: 720,
retries: { runMode: 2, openMode: 0 },
video: true,
screenshotOnRunFailure: true,
specPattern: 'cypress/e2e/**/*.cy.ts',
supportFile: 'cypress/support/e2e.ts',
setupNodeEvents(on, config) {
// Plugin-Setup: Code Coverage, Accessibility etc.
return config;
},
},
component: {
devServer: {
framework: 'react',
bundler: 'vite',
},
specPattern: 'src/**/*.cy.tsx',
},
});
Claude Code Tipp
Füge deinen bestehenden Code als Kontext ein: claude "Analysiere src/App.tsx und generiere cypress.config.ts mit passenden Timeouts für meine API-Ladezeiten."
2. Page Object Model mit TypeScript
Das Page Object Model (POM) ist der Goldstandard für wartbare E2E-Tests. Claude Code generiert vollständige POM-Klassen aus deinen UI-Komponenten — mit TypeScript-Typen, Chainable Methods und sinnvollen Assertions.
cypress/pages/LoginPage.ts
export class LoginPage {
private readonly selectors = {
emailInput: '[data-cy="email-input"]',
passwordInput: '[data-cy="password-input"]',
submitBtn: '[data-cy="login-submit"]',
errorMsg: '[data-cy="error-message"]',
} as const;
visit(): this {
cy.visit('/login');
return this;
}
fillEmail(email: string): this {
cy.get(this.selectors.emailInput).clear().type(email);
return this;
}
fillPassword(password: string): this {
cy.get(this.selectors.passwordInput).clear().type(password);
return this;
}
submit(): this {
cy.get(this.selectors.submitBtn).click();
return this;
}
loginAs(email: string, password: string): this {
return this.visit().fillEmail(email).fillPassword(password).submit();
}
assertError(message: string): this {
cy.get(this.selectors.errorMsg)
.should('be.visible')
.and('contain.text', message);
return this;
}
}
cypress/e2e/auth/login.cy.ts
import { LoginPage } from '../../pages/LoginPage';
describe('Authentication', () => {
const loginPage = new LoginPage();
it('sollte erfolgreichen Login durchführen', () => {
loginPage.loginAs('user@example.com', 'SecurePass123!');
cy.url().should('include', '/dashboard');
});
it('sollte Fehlermeldung bei falschen Credentials zeigen', () => {
loginPage
.loginAs('wrong@example.com', 'wrongpassword')
.assertError('Ungültige Anmeldedaten');
});
});
3. API Stubbing mit cy.intercept()
Flaky Tests durch langsame oder instabile APIs gehören der Vergangenheit an. Claude Code generiert deterministische Tests mit cy.intercept() — die Tests laufen in Millisekunden und sind 100% reproduzierbar.
Intercept Wann API Stubbing verwenden?
- Externe APIs mit Rate Limits (Stripe, Twilio, SendGrid)
- Authentifizierungs-Flows ohne echte Nutzer im Backend
- Fehlerzustände simulieren (500er, Timeouts, leere Antworten)
- Loading-States und Skeleton-UI testen
- CI/CD-Pipelines ohne Backend-Abhängigkeit
cypress/e2e/dashboard/products.cy.ts
describe('Produkt-Dashboard', () => {
beforeEach(() => {
// API-Antwort aus Fixture laden
cy.intercept('GET', '/api/products', {
fixture: 'products.json',
}).as('getProducts');
cy.visit('/dashboard/products');
cy.wait('@getProducts');
});
it('zeigt alle Produkte an', () => {
cy.get('[data-cy="product-card"]').should('have.length', 5);
});
it('zeigt leeren State bei keinen Produkten', () => {
cy.intercept('GET', '/api/products', { body: [] }).as('emptyProducts');
cy.visit('/dashboard/products');
cy.wait('@emptyProducts');
cy.get('[data-cy="empty-state"]').should('be.visible');
});
it('behandelt API-Fehler gracefully', () => {
cy.intercept('GET', '/api/products', {
statusCode: 500,
body: { error: 'Internal Server Error' },
}).as('failedProducts');
cy.visit('/dashboard/products');
cy.wait('@failedProducts');
cy.get('[data-cy="error-banner"]').should('contain', 'Fehler beim Laden');
});
});
Profi-Tipp
Claude Code generiert automatisch Fixture-Dateien passend zu deinen TypeScript-Interfaces. Prompt: "Generiere cypress/fixtures/products.json aus meinem Product-Interface und füge realistische Testdaten ein."
4. Cypress Component Testing (React/Vue)
Component Warum Component Testing?
- Komponenten isoliert testen — ohne Router, Store oder Backend
- Schneller als E2E: Kein Browser-Navigation overhead
- Visuelles Debugging direkt im Cypress-Runner
- Stories ersetzbar: Cypress CT ist Storybook + Tests in einem
src/components/ProductCard.cy.tsx
import React from 'react';
import { ProductCard } from './ProductCard';
const mockProduct = {
id: 'prod-1',
name: 'KI-Workflow Paket',
price: 299,
currency: 'EUR',
inStock: true,
};
describe('ProductCard Komponente', () => {
it('rendert Produktname und Preis korrekt', () => {
cy.mount(<ProductCard product={mockProduct} />);
cy.get('[data-cy="product-name"]').should('have.text', 'KI-Workflow Paket');
cy.get('[data-cy="product-price"]').should('contain', '299');
});
it('zeigt "Ausverkauft" Badge wenn nicht auf Lager', () => {
cy.mount(<ProductCard product={{ ...mockProduct, inStock: false }} />);
cy.get('[data-cy="out-of-stock-badge"]').should('be.visible');
cy.get('[data-cy="add-to-cart-btn"]').should('be.disabled');
});
it('feuert onAddToCart-Event beim Klick', () => {
const onAddToCart = cy.stub().as('addToCart');
cy.mount(<ProductCard product={mockProduct} onAddToCart={onAddToCart} />);
cy.get('[data-cy="add-to-cart-btn"]').click();
cy.get('@addToCart').should('have.been.calledWith', 'prod-1');
});
});
5. CI/CD Integration: Cypress in GitHub Actions
CI/CD GitHub Actions Setup
- Parallele Jobs: E2E und Component Tests gleichzeitig
- Artefakt-Upload: Videos und Screenshots bei Fehlern
- Branch-Protection: Kein Merge ohne grüne Tests
- Matrix-Testing: Chrome + Firefox + Edge parallel
.github/workflows/cypress.yml
name: Cypress Tests
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
cypress-e2e:
runs-on: ubuntu-latest
strategy:
matrix:
browser: [chrome, firefox]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install Dependencies
run: npm ci
- name: Start Dev Server
run: npm run dev &
env:
VITE_API_URL: http://localhost:4000
- name: Run Cypress E2E
uses: cypress-io/github-action@v6
with:
browser: ${{ matrix.browser }}
wait-on: 'http://localhost:3000'
record: true
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
- name: Upload Artefakte bei Fehler
uses: actions/upload-artifact@v4
if: failure()
with:
name: cypress-artifacts-${{ matrix.browser }}
path: |
cypress/videos
cypress/screenshots
Claude Code Workflow
Prompt: "Erstelle .github/workflows/cypress.yml für Chrome und Firefox parallel, mit Artifact-Upload bei Failure und Cypress Cloud Recording." — Claude Code generiert die komplette YAML-Datei in unter 30 Sekunden.
6. Cypress Cloud: Dashboard und Parallelisierung
Cloud Cypress Cloud Features
- Test-Parallelisierung über mehrere CI-Maschinen
- Flaky-Test-Erkennung und automatisches Retry-Tracking
- Video-Recordings und Screenshots für jeden fehlgeschlagenen Test
- Analytics: Trendanalyse über alle Runs und Branches
- PR-Kommentare mit direkten Test-Links
.github/workflows/cypress-parallel.yml (Parallelisierung)
jobs:
cypress-parallel:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
containers: [1, 2, 3, 4]
steps:
- uses: actions/checkout@v4
- name: Run Cypress parallel
uses: cypress-io/github-action@v6
with:
record: true
parallel: true
group: 'E2E Tests'
ci-build-id: ${{ github.run_id }}
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
Mit 4 parallelen Containern reduziert sich eine 40-minütige Testsuite auf unter 12 Minuten. Cypress Cloud verteilt die Specs automatisch auf die verfügbaren Container — ohne manuelle Aufteilung.
Kostenoptimierung
Cypress Cloud Free Plan: 500 Testresultate/Monat. Claude Code hilft dir, Tests so zu strukturieren, dass du das Limit nicht überschreitest — z.B. Component Tests lokal, nur E2E in der Cloud aufzeichnen.
Fazit: Claude Code als Cypress-Copilot
Cypress E2E Testing war noch nie so zugänglich. Claude Code generiert in Minuten komplette Testsuiten, die früher Stunden Handarbeit bedeuteten — inklusive Page Objects, API Fixtures, GitHub Actions und Cloud-Konfiguration.
Der Workflow ist einfach: Du beschreibst das User Journey auf Deutsch, Claude Code schreibt die Tests auf TypeScript. Die Tests laufen im CI, Cypress Cloud zeigt dir die Ergebnisse. Regressions werden gefunden, bevor sie in Production gelangen.
⚡
10x schneller
Tests in Minuten statt Stunden — Claude Code kennt Cypress-Patterns
🎯
Wartbar
POM + TypeScript = Tests die Refactorings überleben
🔒
Deterministisch
API Stubbing eliminiert flaky Tests durch externe Abhängigkeiten
📊
Skalierbar
Cypress Cloud + Parallelisierung: 4x schnellere Pipelines
Claude Code für dein Testing-Setup nutzen
Generiere vollständige Cypress-Testsuiten für dein Projekt — Page Objects, Fixtures, CI-Config und alles drumherum. Kostenloser Trial, keine Kreditkarte.
Jetzt kostenlos testen →