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): using LANGUAGE=en_US from the terminal invocation, using the Browser's API plugin (see Cypress' browser launch API documentation )

configurationinternationalizatione2e-testingcypresslang

David Lacourt

Reputation: 1165

How to set the browser's language in Cypress.io (electron/chrome)?

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):

using LANGUAGE=en_US from the terminal invocation,
using the Browser's API plugin (see Cypress' browser launch API documentation)

Upvotes: 11

Answers (6)

abendt

Reputation: 775

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",
    ...
}

electron cli switches: https://www.electronjs.org/docs/latest/api/command-line-switches#--lang

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

Upvotes: 1

Maurici Abad

Reputation: 1728

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;
  }
});

Upvotes: -1

Nicolas De Boose

Reputation: 41

In support/index.js

Cypress.on('window:before:load', window => {
  Object.defineProperty(window.navigator, 'language', { value: 'fr' });
});

Upvotes: 3

st.huber

Reputation: 1545

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',
    },
});

Upvotes: 9

ayxos

Reputation: 408

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

Upvotes: 4