Skip to content

Testing the Translation Feature

Issue Fixed

The translation feature was not showing as available, even in Chrome Beta with Experimental Web Features enabled. This was because the code was using the old Translation API specification (self.translation.createTranslator), but the current specification uses Translator.create().

Changes Made

  1. Updated TypeScript interfaces: Changed from TranslationAPI interface with self.translation to TranslatorConstructor interface with window.Translator
  2. Updated browser support check: Changed from self.translation.canTranslate() to Translator.availability()
  3. Updated translator creation: Changed from self.translation.createTranslator() to Translator.create()
  4. Updated documentation: All documentation now reflects the new API specification
  5. Updated tests: All tests now check for window.Translator instead of self.translation

How to Test

Prerequisites

  1. Chrome Canary, Dev, or Beta (Version 128+)

  2. Download from: https://www.google.com/chrome/canary/ or https://www.google.com/chrome/beta/

  3. Enable Translation API Flags:

  4. Open Chrome and navigate to: chrome://flags
  5. Search for and enable these flags:
    • #translation-api - Enable Translation API
    • #enable-experimental-web-platform-features - Enable experimental features
  6. Restart Chrome

Testing Steps

  1. Build the application: 

    cd CompendiumUI
npm install
npm run build

  2. Start the dev server: 

    npm run dev

  3. Open in Chrome Canary/Beta:

  4. Navigate to http://localhost:5173

  5. Open Developer Console (F12)

  6. Check API availability:

  7. In the console, type: 
    'Translator' in window

  8. Should return true if the API is available

  9. Then check availability for a language pair: 

    await Translator.availability({ sourceLanguage: 'en', targetLanguage: 'es' })

  10. Should return one of: 'available', 'downloadable', 'downloading', or 'unavailable'

  11. Verify UI:

  12. If the API is available (!== 'unavailable'), you should see:
    • ✅ Translation dropdown in the navigation menu
    • ✅ Language selector showing 12 languages

  13. If the API is not available, you should see:

    • ✅ "Translation not available" link in the header
    • ✅ Tooltip explaining requirements when clicked

  14. Test Translation:

  15. Select a language from the dropdown (e.g., "Español (Spanish)")
  16. The content should translate (may take a moment for first translation as model downloads)
  17. Warning banner should appear at the top
  18. Select "English (Original)" to restore original content

Expected Console Output

When the page loads, you should see console messages like: 

Translation API availability: available -> canTranslate: true
or 
Translation API availability: downloadable -> canTranslate: true

If the API is not supported: 

Translation API not supported in this browser

Troubleshooting

If translation dropdown doesn't appear: 1. Check console for errors 2. Verify flags are enabled and Chrome was restarted 3. Ensure you're using Chrome Canary/Dev/Beta version 128+ 4. Try manually checking: window.Translator in console

If Translator is undefined: - The Translation API may not be fully rolled out in your Chrome version yet - Try Chrome Canary for the latest experimental features - Verify both flags are enabled

If availability returns 'unavailable': - This is expected on some systems/configurations - The API is still in development and may not be available everywhere - Use browser's built-in translation (right-click → Translate) as fallback

API Specification Reference

The new Translation API specification can be found at: - https://github.com/WICG/translation-api - https://chromestatus.com/feature/5182950152642560

Key differences from old API: - Old: self.translation.createTranslator() - New: Translator.create() - Old: self.translation.canTranslate() - New: Translator.availability()

Next Steps

If translation still doesn't work after these changes: 1. Check Chrome release notes for Translation API status 2. Verify the API specification hasn't changed again 3. Test with a minimal example to isolate the issue 4. File a bug report with Chrome team if needed

Success Criteria

✅ Build completes without errors ✅ All 69 tests pass ✅ TypeScript compilation successful ✅ Console shows correct API detection ✅ UI shows translation controls when API is available ✅ UI shows fallback message when API is not available