Browser Language Settings in Cypress.IO: Internationale Tests die wirklich funktionieren

„Unsere Kunden kommen aus 27 Ländern, aber unsere Tests laufen nur auf Deutsch“ – mit diesem Satz startete kürzlich ein spannendes Beratungsprojekt bei Never Code Alone. Das Ergebnis: Eine robuste Lösung für mehrsprachige E2E Tests mit Cypress.IO, die wir heute mit euch teilen.

Warum Browser Language Settings in Tests wichtig sind

Internationale Software muss in verschiedenen Sprachen funktionieren. Klingt banal, ist aber in der Praxis oft eine Herausforderung:

• Automatische Spracherkennung: Viele Webseiten leiten basierend auf Browser-Einstellungen weiter
• Content-Varianten: Unterschiedliche Inhalte je nach Sprache erfordern angepasste Selektoren
• Locale-spezifische Features: Datumsformate, Währungen und Zahlenformatierungen variieren
• SEO-Anforderungen: Suchmaschinen crawlen in verschiedenen Sprachen

Das Problem: Cypress startet immer in Englisch

Standardmäßig startet Cypress Browser mit englischen Spracheinstellungen. Das führt zu:

• Fehlgeschlagenen Tests bei Sprach-Redirects
• Falschen Inhalten in dynamischen Übersetzungen
• Nicht reproduzierbaren Bugs aus anderen Ländern

Die Lösung: Browser Launch Options richtig konfigurieren

Nach intensiver Recherche und Testing haben wir eine Best Practice Lösung entwickelt. Hier zeigen wir euch, wie ihr Browser Language Settings in Cypress zuverlässig setzt.

Chrome und Edge konfigurieren

// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // Sprache über Chrome Args setzen
          launchOptions.args.push('--lang=de-DE')

          // Accept-Language Header konfigurieren
          launchOptions.preferences.default.intl = {
            accept_languages: 'de-DE,de'
          }
        }

        return launchOptions
      })
    }
  }
})

Firefox Language Settings

Firefox benötigt einen anderen Ansatz:

if (browser.family === 'firefox') {
  // Firefox Preference für Sprache
  launchOptions.preferences['intl.accept_languages'] = 'de-DE, de'
  launchOptions.preferences['general.useragent.locale'] = 'de-DE'
}

Dynamische Sprachkonfiguration für verschiedene Test-Szenarien

Richtig spannend wird es, wenn ihr verschiedene Sprachen in einer Test-Suite testen wollt. Unsere Lösung: Environment Variables!

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        // Sprache aus ENV oder Default
        const testLanguage = process.env.CYPRESS_LANG || 'de-DE'

        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push(`--lang=${testLanguage}`)
          launchOptions.preferences.default.intl = {
            accept_languages: testLanguage
          }
        }

        if (browser.family === 'firefox') {
          launchOptions.preferences['intl.accept_languages'] = testLanguage
          launchOptions.preferences['general.useragent.locale'] = testLanguage
        }

        return launchOptions
      })
    }
  }
})

Jetzt könnt ihr Tests in verschiedenen Sprachen ausführen:

# Deutsche Tests
CYPRESS_LANG=de-DE npm run cypress:run

# Französische Tests  
CYPRESS_LANG=fr-FR npm run cypress:run

# Spanische Tests
CYPRESS_LANG=es-ES npm run cypress:run

Best Practice: Language Helper Commands

Für maximale Flexibilität empfehlen wir Custom Commands:

// cypress/support/commands.js
Cypress.Commands.add('visitWithLanguage', (url, language) => {
  cy.visit(url, {
    headers: {
      'Accept-Language': language
    }
  })
})

Cypress.Commands.add('assertLanguage', (expectedLang) => {
  cy.window().then(win => {
    const browserLang = win.navigator.language
    expect(browserLang).to.contain(expectedLang)
  })
})

Verwendung in euren Tests:

describe('Mehrsprachige E-Commerce Tests', () => {
  it('zeigt deutschen Content für deutsche Besucher', () => {
    cy.visitWithLanguage('/', 'de-DE')
    cy.assertLanguage('de')
    cy.contains('In den Warenkorb').should('be.visible')
  })

  it('zeigt englischen Content für internationale Besucher', () => {
    cy.visitWithLanguage('/', 'en-US')
    cy.assertLanguage('en')
    cy.contains('Add to cart').should('be.visible')
  })
})

CI/CD Integration: Paralelle Tests in verschiedenen Sprachen

Der wahre Vorteil zeigt sich in der Pipeline. Unsere Empfehlung für GitHub Actions:

name: E2E Tests Multi-Language

on: [push, pull_request]

jobs:
  test:
    strategy:
      matrix:
        language: ['de-DE', 'en-US', 'fr-FR', 'es-ES']

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Run Cypress Tests
        uses: cypress-io/github-action@v5
        env:
          CYPRESS_LANG: ${{ matrix.language }}
        with:
          browser: chrome

Troubleshooting: Häufige Probleme und Lösungen

Problem 1: Accept-Language Header wird ignoriert

Manche Webseiten verwenden JavaScript für Spracherkennung:

// Lösung: Navigator Language mocken
cy.visit('/', {
  onBeforeLoad(win) {
    Object.defineProperty(win.navigator, 'language', {
      value: 'de-DE'
    })
    Object.defineProperty(win.navigator, 'languages', {
      value: ['de-DE', 'de']
    })
  }
})

Problem 2: Cookies überschreiben Spracheinstellungen

// Sprach-Cookie vor jedem Test setzen
beforeEach(() => {
  cy.setCookie('language', 'de')
  cy.setCookie('locale', 'de_DE')
})

Performance-Tipp: Browser-Profile für schnellere Tests

Für große Test-Suites lohnen sich vorkonfigurierte Browser-Profile:

// Einmaliges Setup für deutsche Tests
const germanProfilePath = './cypress/profiles/german'

if (browser.name === 'chrome') {
  launchOptions.args.push(`--user-data-dir=${germanProfilePath}`)
}

Unsere Erfahrung aus der Praxis

Bei einem großen E-Commerce Projekt mit 12 Sprachversionen konnten wir durch diese Implementierung:

✅ Testabdeckung von 1 auf 12 Sprachen erhöhen
✅ Locale-spezifische Bugs vor dem Go-Live finden
✅ Deployment-Zeit durch parallele Tests um 40% reduzieren
✅ False Positives durch falsche Sprachweiterleitung eliminieren

Fazit: Internationale Tests sind kein Hexenwerk

Mit der richtigen Konfiguration werden mehrsprachige Cypress Tests zum Kinderspiel. Die wichtigsten Takeaways:

• Browser Launch Options sind der Schlüssel zur Sprachkonfiguration
• Environment Variables ermöglichen flexible Test-Setups
• Parallele Ausführung spart Zeit in der CI/CD Pipeline
• Custom Commands vereinfachen die Test-Wartung

Braucht ihr Unterstützung bei internationalen E2E Tests?

Never Code Alone bietet maßgeschneiderte Cypress Workshops und Beratung für eure Testing-Herausforderungen. Unser Team aus zertifizierten Testing-Experten hilft euch dabei:

• Robuste Test-Architekturen aufzubauen
• Mehrsprachige Test-Strategien zu entwickeln
• CI/CD Pipelines zu optimieren
• Best Practices direkt in eurem Projekt umzusetzen

Kontaktiert uns für ein unverbindliches Gespräch über eure Testing-Anforderungen. Gemeinsam finden wir die perfekte Lösung für euer Team!

---

Roland Golla ist Cypress Ambassador und Gründer von Never Code Alone. Mit über 10 Jahren Erfahrung in der Test-Automatisierung unterstützt er Teams dabei, Software-Qualität nachhaltig zu verbessern.