search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.69k stars 3.16k forks source link

Warning about browserslist and caniuse-lite #19967

Open zaq42 opened 2 years ago

zaq42 commented 2 years ago

Current behavior

Running cypress usually shows a warning about browserslist and caniuse-lite... even when the recommended command is run immediately before Cypress

Example output below:

% yarn run test-record
yarn run v1.22.17
$ npx --yes browserslist@latest --update-db && yarn run cypress run --record --key <redacted>
Latest version:     1.0.30001303
Installed version:  none
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ yarn add -W caniuse-lite
Cleaning package.json dependencies from caniuse-lite
$ yarn remove -W caniuse-lite
caniuse-lite has been successfully updated

No target browser changes
$ <redacted>/node_modules/.bin/cypress run --record --key <redacted>

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        9.3.1                                                                          │
  │ Browser:        Electron 94 (headless)                                                         │
  │ Node Version:   v16.13.2 (/usr/local/bin/node)                                                 │
  │ Specs:          <redacted>                                                                     │
  │ Params:         Tag: false, Group: false, Parallel: false                                      │
  │ Run URL:        https://dashboard.cypress.io/projects/<redacted>                               │
  │ Experiments:    experimentalStudio=true                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  <redacted>                                                        (1 of 25)
  Estimated: 1 minute, 3 seconds
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

Desired behavior

Cypress should manage its dependencies in such a way as to avoid this warning occurring.

Test code to reproduce

https://github.com/zaq42/cypress-test-tiny/tree/caniuse-lite-is-outdated

command: npm run cypress:run

output:

Zaq42/cypress-test-tiny master % npm run cypress:run

> cypress-test-tiny@1.0.0 cypress:run
> npx --yes browserslist@latest --update-db && cypress run

Latest version:     1.0.30001303
Installed version:  none
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ npm install caniuse-lite
Cleaning package.json dependencies from caniuse-lite
$ npm uninstall caniuse-lite
caniuse-lite has been successfully updated

No target browser changes

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        9.3.1                                                                          │
  │ Browser:        Electron 94 (headless)                                                         │
  │ Node Version:   v16.13.2 (/usr/local/bin/node)                                                 │
  │ Specs:          1 found (spec.js)                                                              │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  spec.js                                                                         (1 of 1)
Browserslist: caniuse-lite is outdated. Please run:                     <------------- Annoying warning
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

  page
    ✓ works (674ms)

  1 passing (2s)

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     2 seconds                                                                        │
  │ Spec Ran:     spec.js                                                                          │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

  (Video)

  -  Started processing:  Compressing to 32 CRF                                                     
  -  Finished processing: /Users/Dave/src/Zaq42/cypress-test-tiny/cypress/videos/spec     (1 second)
                          .js.mp4                                                                   

====================================================================================================

  (Run Finished)

       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  spec.js                                  00:02        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:02        1        1        -        -        -  

Zaq42/cypress-test-tiny master %

Cypress Version

9.3.1

Other

The browserslist project has at least 24 issues raised around this particular problem.

Other projects are dealing with similar complaints. E.g. SonarSource

SUGGESTION

The warning can be suppressed by setting BROWSERSLIST_IGNORE_OLD_DATA=true

For example:

    "cypress:run": "BROWSERSLIST_IGNORE_OLD_DATA=true cypress run",
rutherang commented 2 years ago

Any update on this? This is causing annoying noise on azure pipeline when running test

begner commented 2 years ago

We've got the same problem. A quick fix is to require caniuse-lite dependency in your own project and copy the node_module/caniuse-lite/data/* folder into the cypress installation folder (in npm cache) Cypress/Cache/.../Cypress/resources/app/node_modules/caniuse-lite/data

This folder is statically distributed by cypress and not installed by npm (so it cant be updated by "normal" commands)

tit commented 2 years ago

@begner You are Superman!

Cypress installation folder: https://docs.cypress.io/guides/getting-started/installing-cypress#Binary-cache

dylnclrk commented 2 years ago

I've been seeing this issue as well. Went down the rabbit hole earlier trying to figure out what was going on with my project, haha. Glad it's not just me.

For anyone else looking for an easy way to reproduce. I was able to do so by:

# 1. Create a new project "test"
$ mkdir test
$ cd test
$ echo '{"name": "test", "version": "1.0.0" }' > package.json

# 2. Add Cypress to the new project
$ npm install cypress --save-dev

# 3. Open Cypress to initialize the cypress config
$ $(npm bin)/cypress open

# 4. Once the GUI opens, close it, and then run Cypress via the command line:
$ $(npm bin)/cypress run

You should now see the browser list warning in the output

$ $(npm bin)/cypress run 

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        9.5.4                                                                          │
  │ Browser:        Electron 94 (headless)                                                         │
  │ Node Version:   v16.13.2 (------/node)                 │
  │ Specs:          20 found (1-getting-started/todo.spec.js, 2-advanced-examples/actions.spec.js, │
  │                  2-advanced-examples/aliasing.spec.js, 2-advanced-examples/assertions.spec.js, │
  │                  2-advanced-examples/connectors.spec.js, 2-advanced-examples/cookies.spec.js,  │
  │                 2-advanced-examples/cyp...)                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  1-getting-started/todo.spec.js                                                 (1 of 20)
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

# truncated… the rest of the test output is normal

I was wondering, does anyone know if this is an Electron issue vs a Cypress issue?

begner commented 2 years ago

@dylnclrk

I was wondering, does anyone know if this is an Electron issue vs a Cypress issue?

As i wrote in my post and @tit described it further - It has to do with cypress binary cache (and the used caniuse-lite version there). A Quick fix is, to simply overwrite after install will cure this issue.

dylnclrk commented 2 years ago

@begner gotcha, thanks. And thank you for sharing the workaround!

I think the Cypress binay is an Electron app, so I was just wondering if the browserlist/caniuse-lite dependency is Cypress specific, or if it's an issue with Electron/the version of Electron used by Cypress.

cypress-app-bot commented 1 year ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot commented 1 year ago

This issue has been closed due to inactivity.

TD-DO commented 7 months ago

This is still happening

SStranks commented 7 months ago

I'm seeing this message even after running 'pnpm dlx update-browserslist-db@latest' in my project.

TestIsTest001 commented 4 months ago

What does this message mean please? Also when updating cypress should not everything be updated at that time?

crfrolik commented 2 months ago

The warning message is misleading.

At first glance, it's tempting to think that it might be coming from your repo/project. If you're like me, you might run npx update-browserslist-db@latest thinking that will solve the problem. It won't.

The issue is that caniuse-lite is out-of-date in the Cypress installation folder, which is stored in a completely different place (not under your node_modules). Unfortunately this means the Cypress team needs to fix it. Ideally, in a way that prevents this from happening again in the future.