Vue-cli: Cypress fails test:e2e script with --headless option

Created on 5 Nov 2019 · 11Comments · Source: vuejs/vue-cli

Version

4.0.5

Reproduction link

https://github.com/kepikoi/vue-cli-repro

Environment info

 System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.387.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npm run test:e2e -- --headless

What is expected?

base vue-cli setup executes the e2e test successfully in headless mode to be incorporated into a ci/cd pipeline

What is actually happening?

it fails with ERROR Error: Command failed: C:\www\testing\vue-cli\superbase\node_modules\cypress\bin\cypress run --config baseUrl=http://localhost:8080/

> [email protected] test:e2e C:\www\testing\vue-cli\superbase
> vue-cli-service test:e2e "--headless"

 INFO  Starting e2e tests...
 INFO  Starting development server...


 DONE  Compiled successfully in 13022ms                                                                                                                                3:57:58 PM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.178.25:8080/

  App is served in production mode.
  Note this is for preview or E2E testing only.

 ERROR  Error: Command failed: C:\www\testing\vue-cli\superbase\node_modules\cypress\bin\cypress run --config baseUrl=http://localhost:8080/
Error: Command failed: C:\www\testing\vue-cli\superbase\node_modules\cypress\bin\cypress run --config baseUrl=http://localhost:8080/
    at makeError (C:\www\testing\vue-cli\superbase\node_modules\execa\index.js:174:9)
    at Promise.all.then.arr (C:\www\testing\vue-cli\superbase\node_modules\execa\index.js:278:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:e2e: `vue-cli-service test:e2e "--headless"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\autod\AppData\Roaming\npm-cache\_logs\2019-11-05T14_58_01_691Z-debug.log

vue-cli setup was done with following options:

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, E2E
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

e2e-cypress upstream

Source

kepikoi

Most helpful comment

Add this field to package.json:

"resolutions": {
  "cypress": "3.4.1"
}

If using yarn, just run yarn again.
If using npm:

rm -r node_modules
npx npm-force-resolutions
npm install

sodatea on 7 Nov 2019

👍5 🎉1

All 11 comments

Can't reproduce on my machine… Perhaps a cypress bug? Any more error logs?

sodatea on 6 Nov 2019

@sodatea @kepikoi I can reproduce on my machine, though for me failure happens regardless of whether or not I use headless.

Our project suddenly stopped working, running the test:e2e command would do a build but not launch Cypress or attempt any tests. The end of the command run in the Vue UI looks like this:

[webpack.Progress] 100%

No type errors found
Version: typescript 3.6.4
Time: 17949ms

App running at:

Local: https://localhost:8080/client/

Network: https://localhost:8080/client/

Note that the development build is not optimized.
To create a production build, run yarn build.

Total task duration: 56.8s

I get the same result when I cloned and ran your sample project. Looks like Cypress 3.6.0 came out recently but I haven't been able to narrow down if that is the cause of this issue or not. Here is my environment info:

System: OS: Windows 10 CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz Binaries: Node: 12.7.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.10.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.387.0 npmPackages: @fortawesome/vue-fontawesome: 0.1.8 => 0.1.8 @syncfusion/ej2-vue-base: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-buttons: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-calendars: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-diagrams: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-dropdowns: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-grids: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-inputs: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-lists: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-navigations: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-notifications: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-pdfviewer: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-popups: 17.3.26 => 17.3.26 @syncfusion/ej2-vue-splitbuttons: 17.3.26 => 17.3.26 @vue/babel-helper-vue-jsx-merge-props: 1.0.0 @vue/babel-plugin-transform-vue-jsx: 1.0.0 @vue/babel-preset-app: 4.0.5 @vue/babel-preset-jsx: 1.1.1 @vue/babel-sugar-functional-vue: 1.0.0 @vue/babel-sugar-inject-h: 1.0.0 @vue/babel-sugar-v-model: 1.1.1 @vue/babel-sugar-v-on: 1.1.0 @vue/cli-overlay: 4.0.5 @vue/cli-plugin-babel: ^4.0.5 => 4.0.5 @vue/cli-plugin-e2e-cypress: ^4.0.5 => 4.0.5 @vue/cli-plugin-eslint: ^4.0.5 => 4.0.5 @vue/cli-plugin-router: 4.0.5 => 4.0.5 @vue/cli-plugin-typescript: ^4.0.5 => 4.0.5 @vue/cli-plugin-unit-mocha: ^4.0.5 => 4.0.5 @vue/cli-plugin-vuex: 4.0.5 => 4.0.5 @vue/cli-service: ^4.0.5 => 4.0.5 @vue/cli-shared-utils: 4.0.5 @vue/component-compiler-utils: 3.0.2 @vue/eslint-config-prettier: 5.0.0 => 5.0.0 @vue/eslint-config-typescript: 4.0.0 => 4.0.0 @vue/preload-webpack-plugin: 1.1.1 @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 @vue/web-component-wrapper: 1.2.0 eslint-plugin-vue: 5.2.3 => 5.2.3 typescript: 3.6.4 => 3.6.4 (3.7.2) vue: 2.6.10 => 2.6.10 vue-cli-webpack: 1.0.0 vue-eslint-parser: 2.0.3 (5.0.0) vue-hot-reload-api: 2.3.4 vue-loader: 15.7.2 vue-router: 3.1.3 => 3.1.3 vue-style-loader: 4.1.2 vue-template-compiler: 2.6.10 => 2.6.10 vue-template-es2015-compiler: 1.9.1 vuex: 3.1.1 => 3.1.1 vuex-module-decorators: 0.11.0 => 0.11.0 npmGlobalPackages: @vue/cli: Not Found

danjohnso on 6 Nov 2019

@danjohnso I'm actually having the same issue when running without --headless: no tests are executed in the run. That is why I assumed I need to use headless in the first place.

@sodatea's I tried to reproduce the issue on a fresh Ubuntu 18 VM, but npm run test:e2e threw Install Xvfb and run Cypress again. at me which apparently was solved in https://github.com/cypress-io/cypress/issues/5110

atlas@testvm:~/vue-cli-repro-master$ npm install

> [email protected] install /home/atlas/vue-cli-repro-master/node_modules/yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> [email protected] postinstall /home/atlas/vue-cli-repro-master/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /home/atlas/vue-cli-repro-master/node_modules/core-js-pure
> node postinstall || echo "ignore"


> [email protected] postinstall /home/atlas/vue-cli-repro-master/node_modules/cypress
> node index.js --exec install

Installing Cypress (version: 3.6.0)

 ✔  Downloaded Cypress
 ✔  Unzipped Cypress
 ✔  Finished Installation /home/atlas/.cache/Cypress/3.6.0

You can now open Cypress by running: node_modules/.bin/cypress open

https://on.cypress.io/installing-cypress

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1298 packages from 886 contributors and audited 24906 packages in 107.475s
found 0 vulnerabilities

atlas@testvm:~/vue-cli-repro-master$ npm run test:e2e

> [email protected] test:e2e /home/atlas/vue-cli-repro-master
> vue-cli-service test:e2e

 INFO  Starting e2e tests...
 INFO  Starting development server...


 DONE  Compiled successfully in 7182ms                                                                                                                                                                                         9:09:36 AM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.6:8080/

  App is served in production mode.
  Note this is for preview or E2E testing only.

It looks like this is your first time using Cypress: 3.6.0

 ✖  Verifying Cypress can run /home/atlas/.cache/Cypress/3.6.0/Cypress
   → Cypress Version: 3.6.0
Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.

Read our documentation on dependencies for more information:

https://on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required dependencies installed.

----------

Error: spawn Xvfb ENOENT

----------

Platform: linux (Ubuntu Linux - 18.04)
Cypress Version: 3.6.0
 ERROR  Error: Command failed: /home/atlas/vue-cli-repro-master/node_modules/cypress/bin/cypress open --config baseUrl=http://localhost:8080/
Error: Command failed: /home/atlas/vue-cli-repro-master/node_modules/cypress/bin/cypress open --config baseUrl=http://localhost:8080/
    at makeError (/home/atlas/vue-cli-repro-master/node_modules/execa/index.js:174:9)
    at /home/atlas/vue-cli-repro-master/node_modules/execa/index.js:278:16
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:e2e: `vue-cli-service test:e2e`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/atlas/.npm/_logs/2019-11-07T09_09_37_483Z-debug.log

kepikoi on 7 Nov 2019

I have the exact same scenario - error on headless and no tests run on regular one. I suppose it's OS oriented as colleagues successfully running tests on UNIX.

fourpixels on 7 Nov 2019

👍1

See https://github.com/cypress-io/cypress/issues/5466

sodatea on 7 Nov 2019

Is there a way to lock the cypress version being used within the CLI
plugin? I tried installing and older version but it keeps trying to launch
the latest version instead, must need a config somewhere?

On Thu, Nov 7, 2019, 8:14 AM Haoqun Jiang notifications@github.com wrote:

See cypress-io/cypress#5466
https://github.com/cypress-io/cypress/issues/5466

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/4799?email_source=notifications&email_token=AAGQIA6IQ5UG337AGCAAV3TQSQPFRA5CNFSM4JJD447KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDMRB5I#issuecomment-551096565,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAGQIA4RFPWWB4CWM45ASNDQSQPFRANCNFSM4JJD447A
.

danjohnso on 7 Nov 2019

Add this field to package.json:

"resolutions": {
  "cypress": "3.4.1"
}

If using yarn, just run yarn again.
If using npm:

rm -r node_modules
npx npm-force-resolutions
npm install

sodatea on 7 Nov 2019

👍5 🎉1

Works @sodatea only till node 12.11.0 version, the default LTS 12.13.0 node throw ENOTCONN on this 3.4.1

cypress:cli cli starts with arguments ["C:\\Program Files\\nodejs\\node.exe","D:\\projects\\bluedesk\\node_modules\\cypress\\bin\\cypress",
"run","--config","baseUrl=http://localhost:8080/"] +0ms
  cypress:cli NODE_OPTIONS is not set +0ms
  cypress:cli program parsing arguments +2ms
  cypress:cli running Cypress +0ms
  cypress:cli parsed cli options { config: 'baseUrl=http://localhost:8080/' } +70ms
  cypress:cli verifying Cypress app +0ms
  cypress:cli checking environment variables +0ms
  cypress:cli checking if executable exists C:\Users\Marcelo\AppData\Local\Cypress\Cache\3.5.0\Cypress\Cypress.exe +3ms
  cypress:cli Binary is executable? : true +3ms
  cypress:cli binaryDir is  C:\Users\Marcelo\AppData\Local\Cypress\Cache\3.5.0\Cypress +2ms
  cypress:cli Reading binary package.json from: C:\Users\Marcelo\AppData\Local\Cypress\Cache\3.5.0\Cypress\resources\app\package.json +0ms   
  cypress:cli Found binary version 3.5.0 installed in: C:\Users\Marcelo\AppData\Local\Cypress\Cache\3.5.0\Cypress +3ms
  cypress:cli { verified: true } +2ms
  cypress:cli is Verified ? true +1ms
  cypress:cli processing run options +0ms
  cypress:cli --key is not set, looking up environment variable CYPRESS_RECORD_KEY +0ms
  cypress:cli run to spawn.start args ["--run-project","D:\\projects\\bluedesk","--config","baseUrl=http://localhost:8080/"] +0ms
  cypress:cli needs to start own Xvfb? false +0ms
  cypress:cli spawning, should retry on display problem? false +0ms
  cypress:cli spawning Cypress with executable: C:\Users\Marcelo\AppData\Local\Cypress\Cache\3.5.0\Cypress\Cypress.exe +8ms
  cypress:cli spawn args [ '--run-project', 'D:\\projects\\bluedesk', '--config', 'baseUrl=http://localhost:8080/', '--cwd', 'D:\\projects\\b
luedesk' ] { detached: false, stdio: 'pipe', windowsHide: false } +1ms
  cypress:cli piping process STDIN into child STDIN +16ms
  cypress:cli piping child STDOUT to process STDOUT +1ms
  cypress:cli piping child STDERR to process STDERR +0ms
  cypress:cli child event fired { event: 'exit', code: 4294967295, signal: null } +26ms
  cypress:cli child event fired { event: 'close', code: 4294967295, signal: null } +0ms
 ERROR  Error: Command failed: D:\projects\bluedesk\node_modules\cypress\bin\cypress run --config baseUrl=http://localhost:8080/
Error: Command failed: D:\projects\bluedesk\node_modules\cypress\bin\cypress run --config baseUrl=http://localhost:8080/
    at makeError (D:\projects\bluedesk\node_modules\execa\index.js:174:9)
    at D:\projects\bluedesk\node_modules\execa\index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Command failed with exit code 1.

https://github.com/cypress-io/cypress/issues/5241

marceloavf on 12 Nov 2019

👍2

I have the same issue @fourpixels on Windows 10 with node 10 or node 12 with new project created with vue-cli. Error on headless and no tests run on regular one.