Accept timezone as configuration

[brian-mann]

It remains to be seen if all browser respect this - but setting the TZ environment variable seems to make chrome change the timezone accordingly.

If this is the case we can accept this as a config value in cypress.json and automatically pass this in when spawning the browser.

[ZachGawlik]

This will be necessary for supporting snapshot visual regression testing, whether from Cypress itself or usage of third party libraries like cypress-image-snapshot. Without it, any page that shows timezone or relative time information won't be able to be covered by automated visual testing.

[jennifer-shehane]

@Songyu-Wang No work has been done on this issue

[jeremy-ebler-vineti]

Setting TZ=UTC worked for me.

[krokofant]

Does this actually work on Windows as well?

[mwarrens]

@jeremy-ebler-vineti, in which file did you put this?

[jennifer-shehane]

TZ should be set as an environment variable on the machine you are running the Cypress tests, so in our npm script, we have something like TZ=America/New_York cypress run

This should work on Windows machines, you just need to make sure to set the environment variable correctly.

Also, many CI providers have a way to set timezone in their configuration, which may be what you want to set up.

[ghost]

@jennifer-shehane Can you please give a code example? I can't get it to work. Thanks a lot

[jennifer-shehane]

In package.json:

"scripts": {
  "cypress:open": "TZ=America/New_York cypress open",
  "cypress:run": "TZ=America/New_York cypress run"
}

UTC example:

"scripts": {
  "cypress:open": "TZ=Etc/UTC yarn cypress open",
  "cypress:run": "TZ=Etc/UTC yarn cypress run"
}

In Circle config:

environment:
  TZ: "/usr/share/zoneinfo/America/New_York"

UTC example:

environment:
  TZ: '/usr/share/zoneinfo/UTC'

[ghost]

Thank you very much for the response. I have a cypress.json and a cypress.env.json. Does the environment part go in there? Or what do you mean with Circle config?

[jennifer-shehane]

@Delfgou https://circleci.com/docs/2.0/faq/#how-can-i-set-the-timezone-in-docker-images

[ghost]

Ah but then it only works when I run the test as part of the pipeline? Is there a way to mock the timezone when I run the test locally?

[jennifer-shehane]

Yes, with OS level environment variables as already mentioned. Please search in Google for "setting timezone via environment variables" for your OS.

[ghost]

ok thanks

[kavitha24]

Any example how to configure TZ in bitbucket?

[martinsik]

I wasn't able to change my local timezone in either Chrome nor Edge using any of the methods described above. I can see it's set in the Cypress runner app but it has no effect.

[vilvaq]

I succesfully set the timezone on my tests usin the TZ variable, but I had to look around until I got to this issue to discover it. Should we add that to the Cypress documentation?

[LirSegev]

@martinsik same for me on Windows (tried chrome and electron), Linux was fine

[wundo]

After updating to the latest cypress the TZ env variable seems to have stopped working

[lgenzelis]

Setting TZ environment variable works for me on cypress 9.1.1 and macos, using any browser (so, works for electron, chrome, edge and firefox). Like @jennifer-shehane said, all it takes is changing the scripts on package.json:

"scripts": {
  "cypress:open": "TZ=America/New_York cypress open",
  "cypress:run": "TZ=America/New_York cypress run"
}

Also, for anyone using cypress-io/github-action@v2, you need to add it under env: (NOT under with: env:). In my case, the corresponding step on .github/workflows/ci.yml looks like:

- name: Test (Cypress)
  uses: cypress-io/github-action@v2
  with:
    build: npm run build-msw
    start: npm run start
    wait-on: 'http://localhost:3000'
    browser: chrome
  env:
    TZ: America/New_York

[Kirdock]

Any updates for Windows? No matter if it is set in the env variable in cypress.json or within the script in package.json ("cypress:run":"set TZ=America/New_York && yarn cypress run"), the timezone does not change.

[SparksFlyx3]

Did anybody find a solution that works on Windows?

TZ=UTC does not work.
set TZ=UTC does not work.
The packages cross-env and run-script-os also didn't work for me.

Why is there no configuration option for Cypress itself? 👀

[BloodyRain2k]

I'm stuck at the same problem as Sparks: trying to make Cypress use a different timezone other than Windows'.

I've tried setting the "TZ" env variable and neither Electron nor Edge give a damn about it.
Firefox however does react to it. So I guess the issue is less in Cypress and more in the browsers.

It's almost like they never thought people might want to use them for unit testing web systems...

[mellis481]

I'm unsure why none of the cypress-io maintainers nor this Testing Time Zones in Parallel article have addressed this but setting the time zone in Cypress does not work in Windows. I tried seemingly everything to get it to work in Windows, but to no avail. This included the following:

• setting process.env.TZ (via cross-env).
• setting the Cypress TZ environment variable.
• trying it in a component test.
• trying it in an E2E test.

After seeing so many people in this thread share that they weren't able to get it to work in Windows, I ran a cypress-io/github-action GitHub Actions workflow which set the TZ env variable in the job step. I then ran the workflow on a Windows machine (runs-on: windows-latest) and then again on a Linux machine (runs-on: ubuntu-latest). The run on the Windows machine had the same results when I ran it locally (it did NOT respect the time zone I set via the TZ env variable), but it worked for the Linux run (it DID respect the time zone I set via the TZ env variable).

[multivoltage]

did you try to set var using SET on window?

[BloodyRain2k]

Yes, tried that too:

set TZ=America/New_York
npx cypress open --e2e --browser %1

ran it with electron for %1, this is the result:

(Edit: I don't know what changed, but I can't get it working in Firefox anymore either... Not with Cypress Env nor SET...)

I did however come across something else: https://stackoverflow.com/a/69860846/1025177
Unlike the fruitless attempts of setting an env var that doesn't get used on Windows, THAT actually changes the time that JS works with.
Now if only Cypress would have a way of setting that instead, we wouldn't have to bother with Windows' lack of support for standards anymore.

The first problem being that Electron (haven't tested Edge yet) remembers the DevTools location, but in some cases doesn't re-apply it. Indicated by the additional fields being locked and greyed out.
So the timezone is set but not actually used. To fix that it needs to be changed to a different one and then back.

Edit 2: The approach described by this nice fellow works great (at least for my case with Electron): #7942 (comment)
At first I was worried that the commands meant to be TZ'd need to be run in the .then() of the custom command.
But luckily it's enough to just run that command for setting the TZ in a beforeEach().
Meaning it works too for running entire test sets against different TZs.

[petrkrejcik]

Setting the ENV var works fine but how can I test that my app works in different timezones?
When setting TZ=UTC all the tests will use UTC. I would like to run one test in UTC and another test in a different TZ.

Update:
I found Gleb's blog post on how to test multiple timezones: https://glebbahmutov.com/blog/testing-timezones/
Although it might work it seems to me like a fairly complicated workaround. Also I can see some downsides:

• reduced performance - we need to open Cypress N times (N is the amount of timezones we want to check)
• conditions in tests - we would need to apply conditional assertions

// pseudo code
it('test all timezones', () => {
  if (TZ === 'UTC') {
    assert(timezone).eq('12:00')
  } else if (TZ === 'Europe/Paris') {
    assert(timezone).eq('13:00')
  }
})

It would be great to be able to do:

// pseudo code
it('test in UTC', () => {
  assert(timezone).eq('12:00')
})
it('test in Europe/Paris', () => {
  cy.setTimezone('Europe/Paris')
  assert(timezone).eq('13:00')
})

[goska-malaga]

"scripts": { "cypress:open": "TZ=America/New_York cypress open", "cypress:run": "TZ=America/New_York cypress run" }
I don't know how this suppose to work in Windows,
the only thing I can do is knowing I have this issue in test - change timezone in my computer Set-TimeZone -Id "UTC" so it does change time completely and I might forget to leave work on time :P and I need to remember to change it back after test
@jennifer-shehane does taking off backlog label means it will not be worked on?

Documentation for this issue is quite poor and I am not sure then if fact of using docker image in CI is cause of an issue but we failed to change timezone in CI that would affect cypress environment

[dpage-mdsol]

Ideally this would be configurable in the cypress.json file.

An alternative solution would be to put the following code in the cypress/support/e2e.js file in order to lock the tests into a timezone and make them deterministic. Works locally and in CI.

I didn't test it on Windows, but I think it should work on both Mac and Windows.

First function is to lock the locale and the second is to lock the timezone.

Cypress.on('test:before:run', () => {
  Cypress.automation('remote:debugger:protocol', {
    command: 'Emulation.setLocaleOverride',
    params: {
      locale: 'en-US',
    },
  });
});

Cypress.on('test:before:run', () => {
  Cypress.automation('remote:debugger:protocol', {
    command: 'Emulation.setTimezoneOverride',
    params: {
      timezoneId: 'America/New_York', // OR  'UTC'
    },
  });
});