Pseudo-Lokalisierung für automatisierte i18n-Tests

Pseudo-Lokalisierung ist eine leistungsstarke Testtechnik, die Ihren Quelltext in eine falsche Sprache verwandelt, um Internationalisierungs (i18n)-Probleme zu identifizieren, bevor die eigentliche Übersetzung beginnt. Dieser Leitfaden zeigt Ihnen, wie Sie das Testen der Pseudo-Lokalisierung mit dem pseudo-l10n npm-Paket automatisieren können.

Was ist Pseudo-Lokalisierung?

Pseudo-Lokalisierung ist der Prozess, bei dem der Quelltext Ihrer Anwendung in eine veränderte, falsche Sprache umgewandelt wird, die nachahmt, wie die Benutzeroberfläche nach der Übersetzung funktioniert. Es hilft QA-Ingenieuren und Entwicklern, i18n-Probleme früh im Entwicklungszyklus zu identifizieren.

Beispiel für die Verwendung von Pseudo-Lokalisierung zur Identifizierung potenzieller Internationalisierungsprobleme. Die Schriftart und Größe sind auf beiden Seiten identisch, aber die Unterstützung anderer Schriftzeichen erfordert oft mehr Platz.

Warum Pseudo-Lokalisierung nützlich ist

Pseudo-Lokalisierung hilft Ihnen, i18n-Probleme frühzeitig zu erkennen:

• Entdeckt Layoutprobleme, die durch Textvergrößerung verursacht werden (Deutsch und Finnisch sind typischerweise 30-40% länger als Englisch).
• Erkennt Kodierungsprobleme, indem akzentuierte Zeichen hinzugefügt werden, um die UTF-8-Unterstützung zu testen.
• Stellt sicher, dass alle Strings übersetzbar sind - hartcodierter Text bleibt unverändert und ist leicht zu erkennen.
• Enthüllt falsche Handhabung von Platzhaltern - dynamische Inhalte wie {{name}} müssen erhalten bleiben.
• Hilft, Übersetzungslängenlimits für UI-Komponenten mit Platzbeschränkungen zu definieren.

Automatisierungsstrategien für QA

Hier sind bewährte Strategien zur Automatisierung von i18n-Tests mit Pseudo-Lokalisierung:

Akzentuierte & Nicht-Lateinische Zeichen

Ersetzen Sie lateinische Buchstaben durch akzentuierte Formen oder andere Schriftzeichen, um die Zeichencodierung und Schriftartunterstützung zu testen.

Beispiel: "Save" → "Šàvē"

QA-Überprüfung: Stellen Sie sicher, dass alle Zeichen korrekt angezeigt werden und nichts aufgrund von Kodierungsproblemen kaputtgeht.

Textvergrößerungssimulation

Erweitern Sie jeden String automatisch um ~30–40%, um lange Sprachen wie Deutsch oder Finnisch nachzuahmen. Wickeln Sie ihn mit visuellen Markierungen für eine einfache Erkennung von Überlappungen ein.

Beispiel: "Save" → ⟦Šàvēēēēē⟧

QA-Überprüfung: Verwenden Sie automatisierte Screenshot-Vergleiche, um UI-Überlauf, Überlappung oder Fehlanpassungen zu erkennen.

Platzhalter-Stresstest

Ersetzen Sie Interpolationsvariablen (Platzhalter) durch sichtbare Markierungen, um zu überprüfen, ob sie während der Übersetzung erhalten bleiben.

Beispiel: "Sie haben {{count}} Elemente" → "Sie haben <COUNT> Elemente"

QA-Überprüfung: Führen Sie Regressionstests durch; schlagen Sie fehl, wenn eine Markierung fehlt oder falsch escaped ist (&lt;COUNT&gt;).

RTL-Simulation

Umwickeln Sie den Text mit von rechts nach links (RTL) Markierungen unter Verwendung von Unicode-Steuerzeichen, um Arabisch oder Hebräisch zu simulieren.

QA-Überprüfung: Überprüfen Sie, ob Ausrichtung, Textausrichtung und Spiegelung für RTL-Sprachen korrekt sind.

CI/CD-Integration

Fügen Sie Pseudo-Lokalisierung zu Ihrer automatisierten Testpipeline hinzu, um i18n-Probleme zu erkennen, bevor sie in die Produktion gelangen.

QA-Überprüfung: Blockieren Sie die Bereitstellung, wenn Tests fehlende Übersetzungen, defekte Platzhalter oder Layoutprobleme erkennen.

Automatisierung mit dem Pseudo-l10n-Paket

Das Pseudo-l10n npm-Paket automatisiert die Pseudo-Lokalisierung für Ihre JSON-Übersetzungsdateien und erleichtert die Integration von i18n-Tests in Ihren Entwicklungsworkflow.

Hauptmerkmale

• Textvergrößerung: Simuliert, wie übersetzter Text oft 30-40% länger als Englisch ist.
• Akzentuierte Zeichen: Testet die UTF-8-Kodierung und Schriftartunterstützung mit akzentuierten Äquivalenten.
• Visuelle Marker: Umhüllt Zeichenfolgen mit ⟦...⟧-Markierungen, um unübersetzte oder abgeschnittene Texte leicht zu erkennen.
• Platzhalterbehandlung: Bewahrt Platzhalter wie {{name}}, {count}, %key%, usw.
• RTL-Simulation: Simuliert von rechts nach links geschriebene Sprachen mit Unicode-Steuerzeichen.

Installation

Installiere pseudo-l10n global für die Verwendung in der Befehlszeile:

npm install -g pseudo-l10n

Oder füge es als Entwicklungsabhängigkeit hinzu:

npm install --save-dev pseudo-l10n

Grundlegende Verwendung

Transformiere deine Quellübersetzungsdatei in eine pseudo-lokalisierte Version:

pseudo-l10n input.json output.json

Beispieltransformation

Eingabe (en.json):

{
  "welcome": "Welcome to our application",
  "greeting": "Hello, {{name}}!",
  "itemCount": "You have {{count}} items"
}

Ausgabe (pseudo-en.json):

{
  "welcome": "⟦Ŵëļçõɱë ţõ õür àƥƥļïçàţïõñēēēēēēēēēēēēēēēēēē⟧",
  "greeting": "⟦Ĥëļļõēēēēēē, {{name}}!ēēēēē⟧",
  "itemCount": "⟦Ŷõü ĥàṽë {{count}} ïţëɱšēēēēēēēēēēēēēēēē⟧"
}

Erweiterte Funktionen

Benutzerdefinierte Erweiterung

pseudo-l10n en.json pseudo-en.json --expansion=30

RTL-Simulation

Simuliere von rechts nach links geschriebene Sprachen wie Arabisch oder Hebräisch:

pseudo-l10n en.json pseudo-ar.json --rtl

Platzhalter für visuelle Tests ersetzen

Ersetze Platzhalter durch Großbuchstabenmarker für eine einfachere visuelle Erkennung:

pseudo-l10n en.json pseudo-en.json --replace-placeholders

# Input:  { "greeting": "Hello, {{name}}!" }
# Output: { "greeting": "⟦Ĥëļļõēēēēēē, <NAME>!ēēēēē⟧" }

Unterstützung für verschiedene Platzhalterformate

Das Paket unterstützt verschiedene Platzhalterformate, die von verschiedenen i18n-Bibliotheken verwendet werden:

# For i18next (default)
pseudo-l10n en.json pseudo-en.json --placeholder-format="{{key}}"

# For Angular/React Intl
pseudo-l10n en.json pseudo-en.json --placeholder-format="{key}"

# For sprintf style
pseudo-l10n en.json pseudo-en.json --placeholder-format="%key%"

Programmgesteuerte Verwendung

Verwende pseudo-l10n programmgesteuert in deinen Node.js-Skripten oder im Build-Prozess:

const { generatePseudoLocaleSync, pseudoLocalize } = require('pseudo-l10n');

// Generate a pseudo-localized JSON file
generatePseudoLocaleSync('en.json', 'pseudo-en.json', {
  expansion: 40,
  rtl: false
});

// Pseudo-localize a single string
const result = pseudoLocalize('Hello, {{name}}!');
console.log(result);
// Output: ⟦Ĥëļļõēēēēēēēēēēēēēē, {{name}}!ēēēēē⟧

Integration in deinen Workflow

npm-Skripte

Füge die Generierung von pseudo-lokalisierungen zu deinen package.json-Skripten hinzu:

{
  "scripts": {
    "pseudo": "pseudo-l10n src/locales/en.json src/locales/pseudo-en.json",
    "pseudo:rtl": "pseudo-l10n src/locales/en.json src/locales/pseudo-ar.json --rtl"
  }
}

Integration in den Build-Prozess

Generiere pseudo-lokalisierungen als Teil deines Build-Prozesses:

// build.js
const { generatePseudoLocaleSync } = require('pseudo-l10n');

// Generate pseudo-locales as part of build
generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-en.json',
  { expansion: 40 }
);

generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-ar.json',
  { rtl: true }
);

CI/CD-Pipeline-Integration

Integriere pseudo-lokalisierung in deine Continuous Integration-Pipeline:

# .github/workflows/test.yml
- name: Generate pseudo-locales
  run: |
    npm install -g pseudo-l10n
    pseudo-l10n src/locales/en.json src/locales/pseudo-en.json

- name: Run i18n tests
  run: npm run test:i18n

Teststrategie

1. Generiere pseudo-lokalisierung während deines Build-Prozesses.
2. Füge die pseudo-lokalisierung zu deiner Anwendung hinzu (z. B. im Sprachwähler).
3. Teste deine Anwendung mit aktivierter pseudo-lokalisierung.
4. Überprüfe die Anwendung auf häufige i18n-Probleme.

Worauf man achten sollte

• Fehlende ⟦⟧-Marker = unübersetzte Zeichenfolgen (fest kodierter Text).
• Abgeschnittene Marker = Textabschneidung oder UI-Überlauf.
• Kaputte Layouts = unzureichender Platz für Textvergrößerung.
• Verzerrter Text = Kodierungsprobleme oder fehlende Schriftartenunterstützung.
• Falsche Textausrichtung = RTL-Probleme (für RTL-pseudo-lokalisierungen).

Von Tests zur echten Übersetzung

Nachdem du deine i18n-Implementierung mit pseudo-lokalisierung validiert hast, ist es Zeit, deine Anwendung für echte Benutzer zu übersetzen. Hier kommen KI-gestützte Übersetzungsdienste wie l10n.dev ins Spiel.

Warum l10n.dev für Produktionsübersetzungen

Nachdem du sichergestellt hast, dass deine App die Internationalisierung mit pseudo-lokalisierung korrekt behandelt, nutze l10n.dev für professionelle KI-gestützte Übersetzungen:

• Bewahrt Platzhalter, Format und Struktur - genau wie pseudo-l10n während der Tests schützt.
• Unterstützt 165 Sprachen mit kontextbewusster KI-Übersetzung.
• Verarbeitet Pluralformen, Interpolation und Sonderzeichen automatisch.
• Bietet CI/CD-Integration über API oder npm-Paket (ai-l10n) für automatisierte Workflows.
• Bietet eine VS Code-Erweiterung und eine Weboberfläche für manuelle Übersetzung und Überprüfung.

Vollständiger i18n-Workflow

1. Teste deine i18n-Implementierung mit pseudo-l10n, um Probleme frühzeitig zu erkennen.
2. Behebe alle Layout-, Kodierungs- oder Platzhalterprobleme, die während der Tests entdeckt wurden.
3. Übersetze deine validierten Quelldateien mit l10n.dev für produktionsreife Übersetzungen.

Bereit, i18n-Probleme frühzeitig zu erkennen und deinen Lokalisierungsworkflow zu optimieren?