Localization & Internationalization Testing

Browser engine

Browser-driven locale checks (RTL layout diffs, language-switching flows, locale-specific screenshots) should go through the qe-browser fleet skill. Example:

vibium go "$BASE_URL?lang=ar"  # Arabic, RTL
vibium wait load
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage-ar-rtl
vibium go "$BASE_URL?lang=ja"  # Japanese, CJK text expansion
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage-ja

See .claude/skills/qe-browser/SKILL.md for the full reference.

<default_to_action> When testing multi-language/region support:

1. VERIFY translation coverage (all strings translated)
2. TEST locale-specific formats (date, time, currency, numbers)
3. VALIDATE RTL layout (Arabic, Hebrew)
4. CHECK character encoding (UTF-8, unicode)
5. CONFIRM cultural appropriateness (icons, colors, content)

Quick i18n Checklist:

• All user-facing strings externalized
• No hardcoded text in code
• Date/time/currency formatted per locale
• RTL languages flip layout correctly
• Unicode characters display properly

Critical Success Factors:

• Don't hardcode strings - externalize everything
• Test with real speakers, not just translation files
• RTL requires mirrored UI layout </default_to_action>

Quick Reference Card

When to Use

• Launching in new markets
• Adding language support
• Before international releases
• After UI changes

---

Translation Coverage Testing

test('all strings are translated', () => {
  const enKeys = Object.keys(translations.en);
  const frKeys = Object.keys(translations.fr);
  const esKeys = Object.keys(translations.es);

  // All locales have same keys
  expect(frKeys).toEqual(enKeys);
  expect(esKeys).toEqual(enKeys);
});

test('no missing translation placeholders', async ({ page }) => {
  await page.goto('/?lang=fr');
  const text = await page.textContent('body');