@vue/cli-plugin-e2e-cypress not using correct version of cypress()

[speedyankur]

Version

4.5.8

Environment info

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 12.18.4 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.80
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    @graphql-codegen/typescript:  1.17.11 
    @storybook/vue: ^5.3.18 => 5.3.21 
    @vue/apollo-composable: ^4.0.0-alpha.10 => 4.0.0-alpha.12 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  3.12.1 
    @vue/babel-preset-jsx:  1.2.3 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.1 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  3.12.1 
    @vue/cli-plugin-babel: ^3.9.0 => 3.12.1 
    @vue/cli-plugin-e2e-cypress: ^4.5.8 => 4.5.8 
    @vue/cli-plugin-eslint: ^3.9.0 => 3.12.1 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.8 
    @vue/cli-plugin-unit-jest: ^4.2.3 => 4.5.8 
    @vue/cli-service: ^3.9.0 => 3.12.1 
    @vue/cli-shared-utils:  3.12.1 (4.5.8)
    @vue/component-compiler-utils:  3.2.0 
    @vue/composition-api: ^1.0.0-beta.14 => 1.0.0-beta.18 
    @vue/eslint-config-typescript: 5.1.0 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31 
    @vue/web-component-wrapper:  1.2.0 
    ag-grid-vue: 23.0.2 => 23.0.2 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  3.7.0 
    babel-preset-vue: ^2.0.2 => 2.0.2 
    eslint-config-vuetify: ^0.6.1 => 0.6.1 
    eslint-plugin-vue: ^7.0.0-beta.4 => 7.1.0 (4.7.1, 6.2.2)
    eslint-plugin-vuetify:  undefined (1.0.0-beta.7)
    jest-serializer-vue:  2.0.2 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^2.6.12 => 2.6.12 
    vue-class-component:  7.2.6 
    vue-cli-plugin-i18n: ~1.0.1 => 1.0.1 
    vue-cli-plugin-storybook: ~1.2.2 => 1.2.2 
    vue-cli-plugin-vuetify: ^0.6.1 => 0.6.3 
    vue-demi:  0.4.0 
    vue-drag-zone: ^2.0.0-rc1 => 2.0.0-rc1 
    vue-eslint-parser:  7.1.1 (2.0.3)
    vue-form-generator: ^2.3.4 => 2.3.4 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.17.3 => 8.22.1 
    vue-i18n-extract:  1.0.2 
    vue-jest: ^3.0.5 => 3.0.7 
    vue-loader: ^15.9.2 => 15.9.3 
    vue-property-decorator: ^8.2.1 => 8.5.1 
    vue-router: ^3.0.7 => 3.4.7 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vue-toasted: ^1.1.27 => 1.1.28 
    vue-upload-component: ^2.8.20 => 2.8.20 
    vuedraggable:  2.24.2 
    vuetify: =2.2.30 => 2.2.30 (2.3.15)
    vuetify-loader: ^1.2.2 => 1.6.0 
    vuex: =3.4.0 => 3.4.0 
  npmGlobalPackages:
    @vue/cli: 4.5.6

Steps to reproduce

vue add @vue/cli-plugin-e2e-cypress

What is expected?

@vue/cli-plugin-e2e-cypress should latest version of cypress i.e 5.4.0

What is actually happening?

@vue/cli-plugin-e2e-cypress is still using cypres 3.8

[speedyankur]

[Mikilll94]

This is a known issue for a long time. IMO when using vue-cli you should be able to select manually Cypress version. Also Cypress v4 and later support TypeScript natively. However, even if you select TypeScript in vue-cli, the Cypress project is still generated in Javascript.

I recommend deleting the Cypress plugin and adding Cypress manually. This is very easy to do.

[trungdang194]

This is a known issue for a long time. IMO when using vue-cli you should be able to select manually Cypress version. Also Cypress v4 and later support TypeScript natively. However, even if you select TypeScript in vue-cli, the Cypress project is still generated in Javascript.

I recommend deleting the Cypress plugin and adding Cypress manually. This is very easy to do.

Can you write a small guidance how to run on newest cypress version ?

[trainoasis]

@trungdang194 it seems to me that currently you have to add your version of Cypress separately. The below example might help.

npm install cypress --save-dev

and then add resolutions section to your package.json:

"resolutions": {
    "cypress": "^6.8.0"
  },

The good: The above example will use cypress v6 when cypress commands are run.

The bad: Cypress v3 still gets downloaded since it's part of @vue/cli-plugin-e2e-cypress, but v6 will be used in the above case as required. Also in our Gitlab CI, "Unzipping Cypress" v6 takes like 3-4 minutes, which is a disaster.

I noticed that @vue/cli-plugin-e2e-cypress v5 will have the updated version of cypress within. I also started a discussion about this here.

[timhere]

Thanks for the workaround @trainoasis, I now have cypress 7.1.0 working with @vue/cli 4.5.12.

[vesper8]

@timhere @trainoasis Is there a reason to keep @vue/cli-plugin-e2e-cypress at all when installing Cypress manually?

[trainoasis]

@vesper8 good question, haven't tried it, but I thought @vue/cli-plugin-e2e-cypress does some proxy stuff behind the scenes to make Cypress more Vue compatible. (cause why having a plugin if only adding Cypress would work just as well?) If you get to try this, do let me know please, as will I If I find the time.