Tutorials//9 Min. Lesezeit

Locale-Emulatoren und Test-Tools für mehrsprachige Apps

Eray Gündoğmuş
Teilen

Locale-Emulatoren und Test-Tools für mehrsprachige Apps

Eine mehrsprachige Anwendung ohne gründliche Lokalisierungstests zu veröffentlichen ist wie eine Website zu launchen, ohne sie auf mobilen Geräten zu prüfen. Irgendetwas wird zwangsläufig kaputtgehen — Text läuft aus Containern heraus, Datumsangaben werden im falschen Format angezeigt, und Right-to-Left-Layouts fallen auseinander. Dieser Leitfaden stellt die wichtigsten Locale-Emulatoren und Test-Tools vor, mit denen Sie diese Probleme erkennen, bevor Ihre Nutzer es tun.

Die wichtigsten Erkenntnisse

  • Locale-Emulatoren ermöglichen die Simulation verschiedener Regionen und Sprachen, ohne die Systemeinstellungen zu ändern — so lassen sich Dutzende von Locales schnell und praktisch testen.
  • Pseudo-Localization erkennt Layout-Probleme und hardcoded Strings früh in der Entwicklung, noch bevor echte Übersetzungen vorliegen.
  • RTL-Testing erfordert besondere Aufmerksamkeit — das bloße Übersetzen von Text reicht nicht aus, da für Arabisch, Hebräisch und andere RTL-Sprachen das gesamte Layout gespiegelt werden muss.
  • Automatisiertes Lokalisierungs-Testing in Ihrer CI/CD-Pipeline verhindert Regressionen und erkennt fehlende Übersetzungen, bevor sie in die Produktion gelangen.
  • Die Kombination mehrerer Test-Ansätze — Emulatoren, Pseudo-Localization, RTL-Checks und automatisierte Tests — bietet die umfassendste Testabdeckung.

Warum Lokalisierungs-Testing wichtig ist

Wie testet man lokalisierte Anwendungen? Behandeln Sie Lokalisierungs-Testing als erstklassige Aufgabe in Ihrem QA-Prozess. Verwenden Sie Locale-Emulatoren zur Simulation verschiedener Regionen, setzen Sie Pseudo-Localization ein, um Layout-Probleme früh zu erkennen, testen Sie RTL-Layouts mit speziellen Tools, und automatisieren Sie die String-Validierung in Ihrer CI/CD-Pipeline, um fehlende oder defekte Übersetzungen vor dem Deployment zu erkennen.

Lokalisierungsfehler sind oft subtil und schwer zu entdecken. Sie treten häufig nur unter bestimmten Locale-Bedingungen auf und können von Entwicklern, die in einer einzigen Sprache arbeiten, leicht übersehen werden. Im Folgenden werden die häufigsten Fehlerkategorien vorgestellt:

Text-Overflow und Abschneiden

Deutsche Übersetzungen sind häufig 30–40 % länger als ihre englischen Entsprechungen. Finnische Komposita können außerordentlich lang sein. Haben Ihre UI-Komponenten feste Breiten, läuft der übersetzte Text über oder wird abgeschnitten. Ein Button mit der Aufschrift „Submit" auf Englisch wird im Deutschen zu „Absenden" oder im Finnischen zu „Laheta" — jedes davon benötigt mehr horizontalen Platz.

Probleme mit der Zeichenkodierung

Zeichen außerhalb des ASCII-Bereichs — wie Umlaute, CJK-Zeichen oder Emojis — können Fehler verursachen, wenn Ihre Anwendung UTF-8 nicht konsistent im gesamten Stack verarbeitet. Betroffen sind Datenbankspalten, API-Antworten, Dateikodierung und HTML-Meta-Tags.

Fehler bei Datums-, Zahlen- und Währungsformatierung

Das Datum „3/4/2026" bedeutet in den USA den 4. März, in den meisten europäischen Ländern jedoch den 3. April. Auch die Zahlenformatierung unterscheidet sich: „1,234.56" in den USA wird in Deutschland zu „1.234,56". Währungssymbole können vor oder nach dem Betrag stehen. Hardcoded Format-Strings sind eine häufige Ursache für diese Fehler.

Verkettete Strings

Sätze durch Verkettung übersetzter Fragmente zu bilden — etwa "Es gibt " + count + " Artikel in Ihrem Warenkorb" — bricht in Sprachen mit anderer Wortstellung. Im Japanischen kommt die Zahl typischerweise vor dem Verb am Satzende. Verwenden Sie immer parametrisierte Übersetzungs-Strings mit korrekter Pluralisierungsunterstützung.

Locale-Emulatoren: Verschiedene Regionen simulieren

Ein Locale-Emulator ermöglicht es Ihnen, die Sprach-, Regions- und Formatierungseinstellungen zu ändern, die Ihre Anwendung sieht — ohne Ihre tatsächlichen Systemeinstellungen zu verändern. Dies ist für das Testing unerlässlich, da das Installieren und Wechseln zwischen mehreren Betriebssystemsprachen unpraktisch ist, besonders wenn Sie das Verhalten über Dutzende von Locales hinweg verifizieren müssen.

Browser-basierte Tools

Chrome DevTools Locale Override

Chromes integriertes Sensors-Panel ermöglicht das Überschreiben des Browser-Locale, ohne die OS-Einstellungen zu ändern:

  1. DevTools öffnen (F12 oder Cmd+Option+I)
  2. Cmd+Shift+P (oder Ctrl+Shift+P) drücken, um das Command Menu zu öffnen
  3. „Sensors" eingeben und „Show Sensors" auswählen
  4. Im Sensors-Panel den Abschnitt „Location" suchen und den Override-Wert setzen
  5. Um den Accept-Language-Header zu ändern, zu chrome://settings/languages navigieren

Für eine granularere Steuerung erlaubt die Chrome i18n Extension API Extensions, locale-abhängiges Verhalten zu testen.

Firefox-Spracheinstellungen

Firefox bietet unkomplizierte Locale-Testing-Funktionen:

  1. Zu about:preferences navigieren
  2. Unter „Allgemein" zu „Sprache" scrollen
  3. Auf „Alternativen festlegen" klicken, um bevorzugte Sprachen hinzuzufügen und neu anzuordnen
  4. Firefox sendet diese als Accept-Language-Header, die Ihre serverseitige Locale-Erkennung nutzen kann

Browser Language Switcher Extensions

Extensions wie „Locale Switcher" für Chrome oder „Quick Accept-Language Switcher" für Firefox ermöglichen ein schnelles Wechseln zwischen Locales, ohne jedes Mal durch die Einstellungen navigieren zu müssen. Dies ist besonders während der Entwicklung nützlich, wenn mehrere Locales in schneller Abfolge überprüft werden müssen.

Locale-Wechsel auf OS-Ebene

macOS

Unter macOS können Sie das Locale pro Anwendung testen, ohne die Systemsprache zu ändern:

# App mit einem bestimmten Locale starten
defaults write com.your.app AppleLanguages '("de")'

# Oder die Kommandozeile für die Web-Entwicklung verwenden
LANG=de_DE.UTF-8 open -a "Google Chrome"

Unter Systemeinstellungen > Allgemein > Sprache & Region können Sie Sprachen hinzufügen und per Drag-and-Drop die Priorität festlegen. Dies betrifft alle Anwendungen und erfordert einen Neustart.

Windows

Windows bietet sowohl systemweite als auch benutzerbezogene Locale-Einstellungen:

  1. Einstellungen > Zeit & Sprache > Sprache & Region
  2. Sprachen hinzufügen und die Anzeigesprache festlegen
  3. Unter „Regionales Format" Datums-, Uhrzeit- und Zahlenformatierung unabhängig voneinander ändern

Für Entwickler ermöglicht das PowerShell-Cmdlet Set-WinUILanguageOverride Tests ohne vollständige Sprachpaket-Installation.

Linux

Linux bietet die flexibelste Locale-Steuerung:

# Verfügbare Locales auflisten
locale -a

# Ein neues Locale generieren
sudo locale-gen fr_FR.UTF-8

# Einen Befehl mit einem bestimmten Locale ausführen
LC_ALL=fr_FR.UTF-8 ./your-app

# Einzelne Locale-Kategorien setzen
LC_TIME=ja_JP.UTF-8 LC_NUMERIC=de_DE.UTF-8 ./your-app

Linux' LC_*-Umgebungsvariablen ermöglichen das freie Kombinieren von Locale-Kategorien (Uhrzeit, Zahlen, Währung, Sortierung) — praktisch zum Testen von Edge Cases.

Mobile Locale-Emulation

Android

Der Emulator von Android Studio unterstützt den Locale-Wechsel:

  1. Im Emulator zu Einstellungen > System > Sprachen & Eingabe navigieren
  2. Sprachen hinzufügen und per Drag-and-Drop die Priorität setzen
  3. adb für skriptbasiertes Testing verwenden:
# Gerät-Locale per adb ändern
adb shell setprop persist.sys.locale fr-FR
adb shell stop
adb shell start

Android unterstützt außerdem sprachbezogene App-Einstellungen ab Android 13 (API 33), konfigurierbar unter Einstellungen > Apps > [App] > Sprache.

iOS

Der iOS Simulator ermöglicht Locale-Wechsel ohne physisches Gerät:

  1. Im Simulator zu Einstellungen > Allgemein > Sprache & Region navigieren
  2. Gerätesprache oder Region ändern
  3. Für Xcode-Schema-basiertes Testing das Schema bearbeiten > Ausführen > Optionen > Anwendungssprache

Sie können den Simulator auch mit einem bestimmten Locale von der Kommandozeile aus starten:

xcrun simctl boot "iPhone 15"
# Dann das Locale in den Einstellungen ändern

Pseudo-Localization: Probleme früh erkennen

Pseudo-Localization ist eine Testtechnik, die Ihre Quell-Strings in modifizierte Versionen umwandelt, die Eigenschaften übersetzter Texte simulieren — ohne echte Übersetzungen zu benötigen. So können Sie Lokalisierungsfehler während der Entwicklung entdecken, lange bevor die Übersetzer ihre Arbeit abliefern.

Warum Pseudo-Localization wertvoll ist

Echte Übersetzungen brauchen Zeit und kosten Geld. Wenn Sie warten, bis die Übersetzungen eintreffen, um dann festzustellen, dass Ihr Layout mit längerem Text bricht oder einige Strings hardcoded sind, wird die Behebung dieser Probleme wesentlich teurer. Pseudo-Localization liefert während der Entwicklung sofortiges Feedback.

Arten der Pseudo-Localization

Akzentuierte Zeichen (Accented English)

Ersetzt ASCII-Zeichen durch akzentuierte Unicode-Entsprechungen, während der Text lesbar bleibt:

Original:     "Save changes"
Akzentuiert:  "[Save changes]"

Dies erkennt hardcoded Strings (die nicht transformiert werden) und Kodierungsprobleme (Systeme, die nicht-ASCII-Zeichen nicht verarbeiten können, werden fehlschlagen).

Erweiterter Text (String Elongation)

Polstert Strings auf, um die Texterweiterung zu simulieren, die bei Übersetzungen auftritt:

Original:   "Submit"
Erweitert:  "[Suuuubmiiiiit xxxxxxxxx]"

Ein gängiger Ansatz ist die Erweiterung des Textes um 30–40 %, um Sprachen wie Deutsch, Französisch oder Finnisch zu simulieren. Dies erkennt Layout-Overflow-Probleme, Abschneide-Fehler und Container mit fester Breite.

Gespiegelter Text (RTL-Simulation)

Dreht den String um und fügt optional RTL-Unicode-Marker hinzu, um Rechts-nach-Links-Schriften zu simulieren:

Original:    "Hello World"
Gespiegelt:  "dlroW olleH"

Dies bietet eine schnelle visuelle Überprüfung, ob Ihr Layout Textrichtungsänderungen verarbeitet — ist aber kein Ersatz für vollständige RTL-Tests mit echtem arabischem oder hebräischem Inhalt.

Tools für Pseudo-Localization

pseudolocale (npm)

Eine leichtgewichtige Node.js-Bibliothek zur Generierung pseudo-lokalisierter Strings:

import { str } from 'pseudolocale';

str('Hello World');
// Output: "[Heello Woorld xxxxxxxxx]"

str('Hello World', { strategy: 'bidi' });
// Output: RTL-markierte Version

ICU MessageFormat Pseudo-Localization

Wenn Sie ICU MessageFormat verwenden (das viele i18n-Bibliotheken unterstützen), können Sie Pseudo-Localization auf Nachrichtenebene anwenden und dabei Parameter-Platzhalter erhalten:

Original: "Welcome, {name}! You have {count} messages."
Pseudo:   "[Weelcoomee, {name}! Yoouu haavee {count} meessaagees. xxxxxxxxx]"

Die Platzhalter {name} und {count} bleiben unverändert, sodass die Anwendung mit pseudo-lokalisierten Strings normal weiterläuft.

Integrierte Framework-Unterstützung

Einige i18n-Frameworks enthalten Pseudo-Localization-Funktionen. Android Studio besitzt beispielsweise ein integriertes Pseudo-Locale (en-XA für akzentuierte Zeichen, ar-XB für RTL), das ohne zusätzliche Tools aktiviert werden kann. Für Web-Frameworks können Sie Pseudo-Localization als zusätzliches Locale in Ihren Übersetzungs-Workflow integrieren.

RTL (Right-to-Left) Testing

Rechts-nach-Links-Sprachen — darunter Arabisch, Hebräisch, Persisch (Farsi) und Urdu — erfordern mehr als nur das Übersetzen von Text. Das gesamte UI-Layout muss gespiegelt werden: Die Navigation wechselt auf die rechte Seite, Text wird rechtsbündig ausgerichtet, Fortschrittsbalken füllen sich von rechts nach links, und die Ausrichtung von Icons muss möglicherweise umgekehrt werden.

Häufige RTL-Probleme in Web-Apps

Fehler beim Layout-Spiegeln

CSS-Eigenschaften wie margin-left, padding-right, text-align: left und float: left benötigen RTL-Entsprechungen. Moderne logische CSS-Eigenschaften lösen dies eleganter:

/* Physikalische Eigenschaften (problematisch für RTL) */
.sidebar {
  margin-left: 20px;
  padding-right: 16px;
  text-align: left;
}

/* Logische Eigenschaften (RTL-sicher) */
.sidebar {
  margin-inline-start: 20px;
  padding-inline-end: 16px;
  text-align: start;
}

Bidirektionaler Text (Bidi) Probleme

Wenn RTL-Text eingebetteten LTR-Inhalt enthält (wie englische Markennamen, URLs oder Zahlen), bestimmt der Unicode Bidirectional Algorithm die Anzeigereihenfolge. Dies kann zu unerwarteten Ergebnissen führen, insbesondere bei Satzzeichen und gemischt-direktionalen Sätzen.

Icon-Ausrichtung

Richtungsabhängige Icons — Pfeile, „Zurück"-Buttons, Fortschrittsanzeigen, Listenpunkte — sollten in RTL-Layouts gespiegelt werden. Universelle Icons (Play/Pause, Lautstärke, Telefon) sollten jedoch nicht gespiegelt werden. Medieninhalte wie Bilder und Videos sollten im Allgemeinen ebenfalls nicht gespiegelt werden.

RTL-Test-Strategien und Tools

Das dir="rtl"-Attribut

Der einfachste Einstieg für RTL-Tests in Web-Apps:

<html dir="rtl" lang="ar">

Sie können die Richtung auch auf Komponentenebene setzen, um bestimmte Bereiche zu testen:

<div dir="rtl">
  <!-- Dieser Bereich wird als RTL gerendert -->
</div>

Stylelint RTL Plugin

Das Plugin stylelint-no-physical-properties markiert physikalische CSS-Eigenschaften, die durch logische Entsprechungen ersetzt werden sollten:

{
  "plugins": ["stylelint-no-physical-properties"],
  "rules": {
    "plugin/no-physical-properties": true
  }
}

RTLCSS

RTLCSS konvertiert LTR-CSS automatisch in RTL. Es kann in Ihre Build-Pipeline integriert werden:

import rtlcss from 'rtlcss';

const rtlCSS = rtlcss.process(originalCSS);

Browser-Testing

Alle gängigen Browser unterstützen das dir-Attribut und die CSS-Eigenschaft direction. Verwenden Sie die Browser-DevTools, um die Richtung am <html>-Element umzuschalten — für schnelle visuelle Tests ohne Code-Änderungen.

Automatisiertes Lokalisierungs-Testing

Das manuelle Testen jedes Locale ist nicht skalierbar, wenn Ihre Anwendung wächst. Automatisiertes Lokalisierungs-Testing integriert sich in Ihre CI/CD-Pipeline, um Probleme konsistent zu erkennen.

Screenshot-Vergleichs-Testing

Visuelles Regressions-Testing erstellt Screenshots Ihrer Anwendung in verschiedenen Locales und vergleicht sie mit Baseline-Bildern. Tools wie Playwright, Cypress und Percy unterstützen diesen Workflow:

// Playwright-Beispiel: Screenshots in mehreren Locales aufnehmen
import { test, expect } from '@playwright/test';

const locales = ['en', 'de', 'ja', 'ar'];

for (const locale of locales) {
  test(`Startseite rendert korrekt in ${locale}`, async ({ page }) => {
    await page.goto(`/${locale}`);
    await expect(page).toHaveScreenshot(`homepage-${locale}.png`, {
      fullPage: true,
    });
  });
}

Dieser Ansatz erkennt Text-Overflow, Layout-Verschiebungen und RTL-Spiegelungsprobleme, die mit Unit-Tests allein schwer zu erkennen sind.

String-Validierung

Automatisierte Überprüfungen für Vollständigkeit und Korrektheit von Übersetzungen:

// Beispiel: Sicherstellen, dass alle Locale-Dateien übereinstimmende Keys haben
import { readdirSync, readFileSync } from 'fs';

function validateTranslationKeys(localeDir) {
  const files = readdirSync(localeDir).filter(f => f.endsWith('.json'));
  const baseKeys = Object.keys(
    JSON.parse(readFileSync(`${localeDir}/en.json`, 'utf-8'))
  );

  const results = [];

  for (const file of files) {
    const locale = file.replace('.json', '');
    const translations = JSON.parse(
      readFileSync(`${localeDir}/${file}`, 'utf-8')
    );
    const translatedKeys = Object.keys(translations);

    const missing = baseKeys.filter(k => !translatedKeys.includes(k));
    const extra = translatedKeys.filter(k => !baseKeys.includes(k));

    results.push({ locale, missing, extra });
  }

  return results;
}

Dies erkennt fehlende Übersetzungen, verwaiste Keys und strukturelle Inkonsistenzen zwischen Locale-Dateien.

Layout-Testing mit erweitertem Text

Kombinieren Sie Pseudo-Localization mit automatisiertem Layout-Testing, um Overflow-Probleme zu erkennen:

// Vitest-Beispiel: Sicherstellen, dass kein Element seinen Container überläuft
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { pseudoLocalize } from './test-utils';

describe('Layout mit erweitertem Text', () => {
  it('sollte bei 40 % erweiterten Strings nicht überlaufen', () => {
    const expandedMessages = pseudoLocalize(baseMessages, {
      expansion: 1.4,
    });

    const { container } = render(
      <IntlProvider locale="en" messages={expandedMessages}>
        <MyComponent />
      </IntlProvider>
    );

    const elements = container.querySelectorAll('*');
    for (const el of elements) {
      expect(el.scrollWidth).toBeLessThanOrEqual(el.clientWidth + 1);
    }
  });
});

CI/CD-Integration

Eine umfassende Lokalisierungs-Test-Stage in Ihrer CI/CD-Pipeline könnte Folgendes umfassen:

  1. Statische Analyse: Lint auf hardcoded Strings prüfen, sicherstellen, dass alle nutzersichtigen Texte das i18n-System durchlaufen
  2. Key-Validierung: Verifizieren, dass alle Locales vollständige Übersetzungen ohne fehlende Keys haben
  3. Pseudo-Locale-Build: App mit pseudo-lokalisierten Strings bauen und Layout-Tests ausführen
  4. Visuelles Regression-Testing: Screenshots über Ziel-Locales hinweg aufnehmen und vergleichen
  5. RTL-Snapshot-Tests: RTL-Layout speziell für Arabisch- und Hebräisch-Locales verifizieren
# Beispiel-GitHub-Actions-Workflow-Schritt
localization-tests:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - name: Abhängigkeiten installieren
      run: npm ci
    - name: Übersetzungs-Keys validieren
      run: npm run test:i18n-keys
    - name: Pseudo-Locale-Layout-Tests ausführen
      run: npm run test:pseudo-locale
    - name: Visuelles Regressions-Testing
      run: npx playwright test --project=i18n-visual

Wie better-i18n beim L10n-Testing hilft

Während die oben genannten Tools sich auf das Testen von Rendering und Layout lokalisierter Inhalte konzentrieren, hilft better-i18n dabei, Übersetzungsprobleme an der Quelle zu erkennen. Die Plattform bietet Tracking der Übersetzungsabdeckung, sodass Sie auf einen Blick sehen können, welche Keys für jedes Locale noch nicht übersetzt sind. Dies ergänzt Ihre automatisierten Key-Validierungstests durch eine Echtzeit-Dashboard-Ansicht.

Die Key-Management-Funktionen von better-i18n markieren ungenutzte Keys und erkennen, wenn neue Quell-Strings ohne entsprechende Übersetzungen hinzugefügt werden. Wenn es in Ihren Entwicklungs-Workflow integriert ist, dient dies als Frühwarnsystem — Sie können Übersetzungslücken erkennen, bevor sie in der Produktion zu Fehlern werden.

Der Publish-Workflow der Plattform hilft außerdem dabei, Konsistenz zu wahren: Übersetzungen durchlaufen einen Review- und Publish-Zyklus, was die Wahrscheinlichkeit reduziert, dass unvollständige oder fehlerhafte Übersetzungen Ihre Live-Anwendung erreichen.

FAQ

Was ist Pseudo-Localization und warum sollte ich es nutzen?

Pseudo-Localization ist eine Software-Testtechnik, die übersetzbare Strings durch modifizierte Versionen ersetzt, die Eigenschaften echter Übersetzungen simulieren — wie erhöhte Textlänge, akzentuierte Zeichen und Rechts-nach-Links-Textrichtung. Sie sollten es nutzen, weil es Lokalisierungsfehler (wie Text-Overflow, hardcoded Strings und Kodierungsfehler) während der Entwicklung erkennt, bevor echte Übersetzungen vorliegen. Dies spart Zeit und Geld, indem Layout- und Internationalisierungsprobleme früh erkannt werden, wenn ihre Behebung am günstigsten ist.

Wie teste ich RTL-Sprachen in meiner Web-App?

Beginnen Sie damit, dir="rtl" zu Ihrem HTML-Root-Element hinzuzufügen und Ihr Layout visuell zu überprüfen. Ersetzen Sie physikalische CSS-Eigenschaften (margin-left, padding-right) durch logische Entsprechungen (margin-inline-start, padding-inline-end). Verwenden Sie Tools wie RTLCSS zur Automatisierung der CSS-Konvertierung und Stylelint-Plugins, um logische Eigenschaften durchzusetzen. Testen Sie mit echtem arabischem oder hebräischem Inhalt — nicht nur gespiegeltem Englisch —, um bidirektionale Text-Probleme (Bidi) zu erkennen. Fügen Sie abschließend visuelle Regressions-Tests für RTL-Locales in Ihrer CI/CD-Pipeline hinzu, um Regressionen zu verhindern.

Was sind die häufigsten Lokalisierungsfehler?

Die häufigsten Lokalisierungsfehler sind: Text-Overflow oder Abschneiden, wenn Übersetzungen länger als die Quellsprache sind (besonders bei Deutsch, Finnisch und Französisch); Zeichenkodierungsfehler mit nicht-ASCII-Zeichen (Umlaute, CJK, Emojis); falsche Datums-, Uhrzeit- und Zahlenformatierung durch hardcoded Format-Muster; fehlerhafte Sätze durch String-Verkettung statt parametrisierter Übersetzungen; Layout-Fehler in RTL-Sprachen, bei denen das UI nicht korrekt gespiegelt wird; sowie fehlende Übersetzungen, bei denen nicht übersetzte Keys den Nutzern als rohe Key-Namen oder Fallback-Text angezeigt werden.

Comments

Loading comments...