cypress
cypress copied to clipboard
cypress-io
Warning about browserslist and caniuse-lite
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
> [email protected] 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",
Any update on this? This is causing annoying noise on azure pipeline when running test
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)
@begner You are Superman!
Cypress installation folder: https://docs.cypress.io/guides/getting-started/installing-cypress#Binary-cache
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?
@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.
@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.
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.
I'm seeing this message even after running 'pnpm dlx update-browserslist-db@latest' in my project.
What does this message mean please? Also when updating cypress should not everything be updated at that time?
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.
