Vue-cli: cli-plugin-e2e-cypress should allow a different version of cypress

[dholth]

What problem does this feature solve?

Cypress is always asking users to update, but cli-plugin-e2e-cypress pins the version that will actually be used. Could the plugin give the user more leeway in choosing their version of Cypress? It would need to invoke cypress from the project's node_modules instead of from the cypress stored in the plugin's dependencies.

What does the proposed API look like?

The user would supply a "cypress" : "x.y.z" dependency in their own package.json instead of in node_modules/@vue/cli-plugin-e2e-cypress/package.json

[EfChouTR]

Temporary workaround until cli-plugin-e2e-cypress upgrades their version

in package.json add the following:

  "resolutions": {
    "cypress": "4.3.0" 
  }

note: you can replace 4.3.0 with your own version. You will get the nag about unsupported version, but it gives you what you want!

The resolutions field says whatever plugins require this dependency, use this version instead.

Note: Using a version not supported by the plugin may have ill-side effects and any issues you may have might be caused by using a different version. I have not had any so far, and you get Firefox support!

[smarandav]

I do get the below error when using cypress 4.3.0 in this cli-plugin-e2e-cypress and I really need min 4.3.0 version for cypress because of other dependencies. Is the above patch working for you? @EfChouTR @tschoartschi

Error: The handler for the event task must be an object
at createErrorResult (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:3:71)
at validate (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:7:46)
at isObject (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:15:10)
at validateEvent (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\validate_event.js:42:10)
at register (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:35:32)
at module.exports (C:\source\RestaurantClaimsWeb\tests\ui\plugins\index.js:2:3)
at C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:75:12
at tryCatcher (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
at Function.Promise.attempt.Promise.try (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\method.js:39:29)
at load (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:72:7)
at EventEmitter. (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:196:5)
at EventEmitter.emit (events.js:210:5)
at process. (C:\Users.\AppData\Local\Cypress\Cache4.3.0\Cypress\resources\app\packages\server\lib\plugins\util.js:25:29)
at process.emit (events.js:210:5)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:81:21)

[tschoartschi]

@smarandav we didn't try 4.3.0 but with 4.8.0 it works good for us. It works on our local development environments (which are only Macs) and also on our CI which uses the node:lts docker image. But I can not tell you, if it works on Windows as well 🤔

[EfChouTR]

@smarandav it looks like you may be running into this issue? https://github.com/cypress-io/cypress/issues/6853

It was always tossed as a warning but never properly caught until v4.2+

if you are requiring task, return the object in the method per the below comment:
https://github.com/cypress-io/cypress/issues/6853#issuecomment-626685209

[Mikilll94]

@EfChouTR
This is working only for yarn. What if I use npm?

[EfChouTR]

@Mikilll94 you would have to use something like https://github.com/rogeriochaves/npm-force-resolutions to achieve the same outcome as yarn's resolutions field

[Mikilll94]

@EfChouTR
I have found a better workaround. I have just uninstalled cli-plugin-e2e-cypress and installed cypress package. It's very easy to setup cypress on your own :) This vue-cli plugin is just a very simple wrapper for cypress open command.

[EfChouTR]

@EfChouTR
I have found a better workaround. I have just uninstalled cli-plugin-e2e-cypress and installed cypress package. It's very easy to setup cypress on your own :) This vue-cli plugin is just a very simple wrapper for cypress open command.

So many different solutions to the same problem; glad you found one that works!

[itsalaidbacklife]

This would be very helpful. As someone currently using npm, I would prefer not to hack around using npm-resolutions. The ability to open cypress and start the vue server with one command is handy; however the newer versions of cypress have a more robust feature set that (especially source mapping after 4.6.0) which outweight the convenience of a single command imo.

Having the ability to use new versions of cypress with this wrapper would be the best of both worlds

[aranoe]

@EfChouTR
I have found a better workaround. I have just uninstalled cli-plugin-e2e-cypress and installed cypress package. It's very easy to setup cypress on your own :) This vue-cli plugin is just a very simple wrapper for cypress open command.

I really wanted to see an example but it is actually pretty easy to setup and run cypress!
For everyone who wants an example, here are the changes to the scripts section in my package.json:

...
scripts {
...
 "serve:cypress": "npm run serve:target & cypress open",
 "serve:target": "serve ./target/dist -p 3000",
 "test:e2e": "npm run build && npm run serve:cypress",
...
}
...

Don't forget to add serve to your dependencies:

npm i serve --only=dev

Accordingly, here is my cypress.json in the root directory:

{
  "pluginsFile": "tests/e2e/plugins/index.js",
  "baseUrl": "http://localhost:3000",
  "includeShadowDom": true 
}

You probably wont need "includeShadowDom": truebut that was the reason, why I needed the update.
Nevertheless, the clie-plugin-e2e-cypress comes in handy for scaffolding your e2e-tests folder structure.

[sodatea]

Fixed in v4.5.9 and v5.0.0-alpha.0