20

Is it possible to tell Cypress to launch Chrome with a certain language (e.g. German) as I have an application which I need to test in multiple languages. I can't see this detailed anywhere in the documentation which suggests it is not possible at present.

I have tried adding the --lang argument when Chrome is launched but this does not seem to have any effect and Chrome still uses English. See the pluginsFile code below.

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--lang=de')
      return args
    }
  })
}

I have also tried --lang=de-DE which also did not work.

Michael
  • 1,643
  • 1
  • 15
  • 31
  • did u find a solution ? I'm also trying to find an answer for this – Gabriel Pita Jan 15 '20 at 16:00
  • How does your web application use the language? Can you give a code snippet? Does it just look at `navigator.language`? – gleb bahmutov Jan 15 '20 at 16:09
  • Does this answer your question? [How to set the browser's language in Cypress.io (electron/chrome)?](https://stackoverflow.com/questions/56791796/how-to-set-the-browsers-language-in-cypress-io-electron-chrome) – st.huber Nov 05 '20 at 07:36

5 Answers5

16

See full example in https://glebbahmutov.com/blog/cypress-tips-and-tricks/#control-navigatorlanguage but in short

it('shows Klingon greeting', () => {
  cy.visit('index.html', {
    onBeforeLoad (win) {
      // DOES NOT WORK
      // Uncaught TypeError: Cannot assign to read only property
      // 'language' of object '[object Navigator]'
      // win.navigator.language = 'Klingon'

      // instead we need to define a property like this
      Object.defineProperty(win.navigator, 'language', {
        value: 'Klingon'
      })
    }
  })
  cy.contains('#greeting', 'nuqneH').should('be.visible')
})
gleb bahmutov
  • 1,801
  • 15
  • 10
  • 4
    This doesn't work at all. Check `new Date().toLocaleString()` and you'll see the format is unchanged. I don't believe it's possible to change a user's language with Javascript, and for good reason. This needs to be handled on the Cypress level. – hackel Feb 05 '20 at 20:57
  • You still may want your app language to be changed programmatically. It doesn't solve the answer directly and for all app, but in many case it makes sense to have a possibility to override browser's language (from user preference, a cookie, a switch etc.). Maybe you could share insights on the good reason why it is not possible to change the language? – Eric Burel Jun 10 '20 at 15:49
  • Our application actually used the `languages` array instead of `language` field (mind the S). In that case you have to change this example a bit. – Matthias Dunkel Mar 18 '21 at 14:28
  • You need to set both `language` ('Klingon') and `languages` (['Klingon']) props. – froston Jun 10 '23 at 17:30
6

I had a similar problem, when launching cypress the browser would be in my default language (Dutch), while all our tests expect English to be the default. I found a question on a support-forum mentioning the parameter --lang param as well, but it had no effect on my browser's language.

In the end I could work around the problem by changing the LANG environment variable - I am using Linux. In the terminal I typed the following:

export LANG="en_EN.UTF-8"

and then I ran cypress from the same terminal. You could script this, and for other operating systems such as MacOS and Windows there's probably a similar environment variable.

Gerbrand
  • 1,561
  • 1
  • 12
  • 20
6

Besides adding command line options, you can also change browser preferences using Cypress' Browser Launch API (documentation). This allows you to override the Accept-Language header setting like this:

on('before:browser:launch', (browser, launchOptions) => {
  if (browser.family === 'chromium' && browser.name !== 'electron') {
    launchOptions.preferences.default.intl = { accept_languages: "nl" }
    return launchOptions
  }
}

Note that the launchOptions.preferences.default object may be empty, so trying to assign to launchOptions.preferences.default.intl.accept_languages directly may fail.

For one of our projects, this was enough to get the site we were testing to appear in the right language. If you need more, there are more language settings you can try altering (see Chrome's source code and look for "intl").

On a side note, it looks like the --lang command line option only works on Windows, according to Chrome's documentation. On Mac, you are required to change your system preferences, and on Linux, you can use the LANGUAGE environment variable.

JessefSpecialisterren
  • 128
  • 1
  • 4
  • so that's why `--lang` wouldn't work for me... anyway, do you have any idea how could that be changed from within the test itself? if it is possible at all – crollywood Aug 31 '20 at 14:05
  • @crollywood Sorry, it's been months since I last worked with Cypress, and I wouldn't know. Perhaps you could ask in a separate question and/or try Cypress's support channels. I imagine changing the browser language per test might require quitting and relaunching the browser. – JessefSpecialisterren Sep 03 '20 at 06:40
  • My use case is to use the selected languages for all tests, so this methodology is currently the best way to do it. Just console log the `launchOptions.preferences.default.intl` to see how it is set, and use "language-area" format according to the MDN Accept-Language. – Woden Sep 30 '22 at 06:56
1
cy.visit('/', {
  onBeforeLoad(win: Cypress.AUTWindow) {
    Object.defineProperty(win.navigator, 'language', { value: 'de-DE' });
  },
});
Sommereder
  • 904
  • 4
  • 10
  • 32
0

For me setting language (singular) did not do the trick, so I had to set languages, like below:

        cy.visit(`/tested/page`, {
            onBeforeLoad(win) {
                Object.defineProperty(win.navigator, 'languages', {
                    value: ['en-US'],
                });
            }
        })
M. Ryznar
  • 11
  • 2