Hey Entwickler-Community! Kennt ihr das? Eure Cypress-Tests laufen manchmal grün, manchmal rot – und das völlig zufällig. Der Grund? Meist sind es Timing-Probleme und falsch eingesetzte Waits. Heute zeigen wir euch, wie ihr eure E2E-Tests stabil und zuverlässig macht.

Warum die meisten Cypress Waits falsch sind

Viele von euch nutzen vermutlich noch cy.wait(5000) – das ist wie mit dem Vorschlaghammer einen Nagel einschlagen. Funktioniert zwar, aber elegant ist anders. Solche Hard-Waits machen eure Tests langsam und unzuverlässig.

// ❌ Schlecht: Hard Wait
cy.wait(5000);
cy.get('[data-testid="submit-button"]').click();

// ✅ Besser: Smart Wait
cy.get('[data-testid="submit-button"]').should('be.enabled').click();

Die Cypress Wait-Strategien, die wirklich funktionieren

1. Implicit Waits nutzen (Default-Verhalten)

Cypress wartet automatisch bis zu 4 Sekunden auf Elemente. Das reicht oft schon aus:

// Wartet automatisch, bis das Element existiert
cy.get('[data-testid="login-form"]').should('be.visible');

2. Explizite Waits mit Assertions

Kombiniert Waits mit aussagekräftigen Assertions:

// Warten auf Zustandsänderungen
cy.get('[data-testid="loading-spinner"]').should('not.exist');
cy.get('[data-testid="user-profile"]').should('contain', 'Welcome back');

// API-Calls abwarten
cy.intercept('GET', '/api/users').as('getUsers');
cy.get('[data-testid="load-users"]').click();
cy.wait('@getUsers');
cy.get('[data-testid="user-list"]').should('have.length.greaterThan', 0);

3. Custom Wait Commands für wiederkehrende Patterns

// In cypress/support/commands.js
Cypress.Commands.add('waitForApiAndElement', (alias, selector) => {
  cy.wait(alias);
  cy.get(selector).should('be.visible');
});

// Verwendung im Test
cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('[data-testid="login-button"]').click();
cy.waitForApiAndElement('@loginRequest', '[data-testid="dashboard"]');

Advanced Wait Patterns für komplexe Szenarien

Polling-Mechanismus für dynamische Inhalte

// Warten auf sich ändernde Werte
cy.get('[data-testid="progress-bar"]')
  .should(($el) => {
    const progress = parseInt($el.attr('aria-valuenow'));
    expect(progress).to.be.at.least(100);
  });

Multiple Conditions abwarten

cy.get('[data-testid="form"]').within(() => {
  cy.get('input[name="email"]').should('not.have.class', 'error');
  cy.get('input[name="password"]').should('not.have.class', 'error');
  cy.get('button[type="submit"]').should('be.enabled');
});

Performance-Optimierung: Timeouts richtig setzen

// Global in cypress.config.js
export default defineConfig({
  e2e: {
    defaultCommandTimeout: 8000,
    requestTimeout: 10000,
    responseTimeout: 30000
  }
});

// Test-spezifisch
cy.get('[data-testid="slow-element"]', { timeout: 15000 })
  .should('be.visible');

Debugging von Wait-Problemen

// Debug-Helper für komplexe Waits
cy.get('[data-testid="dynamic-content"]')
  .should(($el) => {
    console.log('Element state:', $el[0]);
    expect($el).to.be.visible;
  });

// Screenshot bei Wait-Fehlern
cy.get('[data-testid="expected-element"]')
  .should('exist')
  .then(() => cy.screenshot('wait-success'));

Häufige Antipattern vermeiden

// ❌ Nicht machen: Verschachtelte Waits
cy.wait(2000);
cy.get('[data-testid="button"]').then(() => {
  cy.wait(1000);
  cy.click();
});

// ✅ Richtig: Zustandsbasierte Waits
cy.get('[data-testid="button"]')
  .should('be.enabled')
  .and('be.visible')
  .click();

Unser Fazit: Wait Smart, Not Hard

Intelligente Wait-Strategien sind der Schlüssel zu stabilen E2E-Tests. Statt auf feste Zeiten zu warten, reagiert ihr auf tatsächliche Zustandsänderungen. Das macht eure Tests nicht nur schneller, sondern auch zuverlässiger.

Braucht ihr Unterstützung bei eurer Test-Automatisierung? Unser Team hat bereits hunderte von Cypress-Testsuites optimiert. Schreibt uns einfach eine Mail an team@nevercodealone.de oder bucht direkt ein kostenloses Beratungsgespräch. Wir helfen euch dabei, eure Tests auf das nächste Level zu bringen.

---

Folgt uns für mehr Testing-Insights und bleibt Teil unserer Developer-Community! 🚀