11

My question is about configuring Cypress to launch a browser instance in a certain language.

In order to:

  • make assertions on localized (i18n) text labels?
  • check i18n features (switching between languages)
  • bypass issues of Continuous Integration (CI/CD) when, for example, on a local computer, the browser default to fr_FR, and on the CI/CD VM it defaults to en_US?

I tried (without much success):

Giacomo
  • 163
  • 10
David Lacourt
  • 1,165
  • 1
  • 10
  • 14

6 Answers6

8

from Gleb Bahmutov:

you set it during cy.visit using onBeforeLoad with something like Object.defineProperty(navigator, 'language', { value: 'de-GE' })

src: https://gitter.im/cypress-io/cypress?at=5d61408a07d1ff39f8769545

OschtärEi
  • 2,255
  • 3
  • 20
  • 41
MetaSean
  • 881
  • 17
  • 25
  • Could not make it work, simply ignored my code : ```javascript cy.visit('/', { onBeforeLoad: (_contentWindow) => { Object.defineProperty(navigator, 'language', { value: 'fr-FR' }) } }) ``` – Nicolas Bossard Sep 17 '19 at 13:22
  • 2
    can you try with `cy.visit('/', { onBeforeLoad: (_contentWindow) => { Object.defineProperty(_contentWindow.navigator, 'language', { value: 'fr-FR' }) } })` – paolo Oct 31 '19 at 11:48
  • 1
    I tried both combinations and couldn't make it work :( any help on this? – Gabriel Pita Jan 15 '20 at 18:16
8

To set the language in the browser and also for request, which was what I had to do for my tests, the following worked for me:

cy.visit('url', {
    onBeforeLoad(win) {
      Object.defineProperty(win.navigator, 'language', { value: 'de-DE' });
      Object.defineProperty(win.navigator, 'languages', { value: ['de'] });
      Object.defineProperty(win.navigator, 'accept_languages', { value: ['de'] });
    },
    headers: {
      'Accept-Language': 'de',
    },
});
st.huber
  • 1,481
  • 2
  • 24
  • 45
4

navigator has two lang props:

  • language ({ value: 'en-GB'}
  • languages(['en-GB'])

navigator.language refers to the first element of navigator.languages but some libraries check navigator.languages[0] instead of navigator.language, so better if you set both properties

onBeforeLoad: (window, ...args) => {
  Object.defineProperty(window.navigator, 'language', { value: 'en-GB' });
  Object.defineProperty(window.navigator, 'languages', ['en-GB']);

ref: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages

ayxos
  • 408
  • 1
  • 7
  • 15
  • 2
    Note that this implements only *one effect* of changing the browser language - for example, this doesn't change the behavior of `Date.toLocaleString`, and the `Accept-Language` header will not be sent. – mindplay.dk Jun 30 '20 at 11:27
  • 2
    This is the only solution that worked for me. – eega Mar 21 '22 at 10:42
3

In support/index.js

Cypress.on('window:before:load', window => {
  Object.defineProperty(window.navigator, 'language', { value: 'fr' });
});
Nicolas De Boose
  • 41
  • 3
0

Someone got it working with this: (I couldn't)

Source: https://github.com/cypress-io/cypress/issues/7890#issuecomment-824676390

// cypress/plugins/index.js

on('before:browser:launch', (browser, launchOptions) => {
  if (browser.name === 'chrome') {
    launchOptions.args.push('--lang=en-GB');
    return launchOptions;
  }
});
Maurici Abad
  • 1,012
  • 9
  • 20
0

In our setup we are using Cypress v12.x with 2 different browsers:

  • the chrome browser (we use this when running the cypress app interactively yarn cypress open)
  • the electron browser (is used when running the tests headless on CI yarn cypress run)

We found that we need to configure both browsers separately

chrome

we use the Cypress Browser Launch API (https://docs.cypress.io/api/plugins/browser-launch-api#Changing-browser-preferences) to customize the chrome configuration.

// file cypress.config.js

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser, launchOptions) => {
        if (browser.family === "chromium" && browser.name !== "electron") {

          launchOptions.preferences.default.intl = {
            accept_languages: "en-US,en",
            selected_languages: "en-US,en",
          };

          return launchOptions;
        }
      });
    },
  },
});

electron

we use the environment variable ELECTRON_EXTRA_LAUNCH_ARGS (https://docs.cypress.io/api/plugins/browser-launch-api#Modify-Electron-app-switches) to pass extra args to the electron browser.

// file package.json

"scripts": {
    "e2e:run": "ELECTRON_EXTRA_LAUNCH_ARGS=--lang=en yarn cypress run",
    ...
}

summary

with this configuration the browser is using the specified locale when using the cypress app and also when running the tests on our CI server

abendt
  • 675
  • 5
  • 9