How to make Lingui work in the Playwright test context?

[MurzNN]

Lingui works great with my React app! But now it's time to cover the app by tests :) I plan to use the "pseudo" locale for tests and need a function that will translate the source text in English to the pseudo locale, to not write the pseudo-localized strings manually.

So, I am trying to understand how can I activate the Lingui i18n correctly in the Playwright test, where seems no SWC or Babel is used. Therefore, a loader like this:

      const imported = await import(`../locales/${locale}.po`)
      messages = imported.messages ?? {}

fails with an error, because of the missing plugin:

Failed to load catalog for locale "en": Error {code: 'BABEL_PARSE_ERROR', reasonCode: 'MissingSemicolon', loc: {…}, pos: 5, syntaxPlugin: undefined, …}

Is there any examples on how to integrate Lingui with Playwright?

[MurzNN]

Invented a working approach without initializing the full translation engine! It looks not very concise, but, at least, works for me :)

import { test } from '@playwright/test'
import { createCompiledCatalog } from "@lingui/cli/api"  

function pseudoLocalize(message: string) {  
  const { source } = createCompiledCatalog("pseudo-LOCALE", {  
    "msgId": message  
  }, {  
    pseudoLocale: "pseudo-LOCALE",  
    namespace: "json"  
  })    
  const parsed = JSON.parse(source)  
  return parsed.messages["msgId"]  
}  

test.describe('My test', () => {
  test('my test1 ', async ({ page, browser }) => {
    const pseudoLocalizedString = pseudoLocalize('Click me')
    const pseudoLocalizedRegexp = new RegExp(pseudoLocalizedString)

    await page.goto('/')
    await page.getByRole('button', { name: pseudoLocalizedRegexp }).click()
  })
})

Why do we need converting the string to regexp?

The issue is happening because getByRole converts your pseudo-localized string into a complex internal CSS selector. When it encounters special accent marks/diacritics like ĩ natively, the underlying engine crashes during the parsing stage with an error:

unexpected symbol "ĩ" at position N during parsing attribute value

This issue is reported many times, eg here microsoft/playwright#5627 but no fix is planned.

A workaround for this is convert the String to a Regex: Converting the string to a regular expression bypasses the CSS engine's string-parsing limitations.

[MurzNN]

Reported a fresh bug report about errors with pseudolocalized strings: microsoft/playwright#41750

[timofei-iatsenko]

You can use pseudolocale package directly

[MurzNN]

Thanks! But using the direct package will not catch up the Lungui pseudolocale customizations like this: https://lingui.dev/ref/conf#pseudolocale - right?

[timofei-iatsenko]

Right

[timofei-iatsenko]

But you can import lingui config in your tests and pass the properties to the function directly.

[MurzNN]

Found out that just pseudolcale and Lingui settings is not enough for tests, because in tests it is required to declare the same translation messages, as in the testing code, so ended up with using a pure JS definitions of the messages using this PR #2618 - they works well in Playwright tests!