cypress not running after server start about create-vue HOT 8 CLOSED

These errors are fixed when I replace http://127.0.0.1:5050/ with tcp:5050 in test:e2e and test:e2e:ci scripts.

This is due to the subtle differences between 127.0.0.1 and localhost, which is mostly fixed in Vite 3. You can read more about the technical details at https://vitejs.dev/guide/migration.html#dev-server-changes

With the proposed solution, cypress opens, but the default test fails. To fix this problem, I ran yarn build before yarn test:e2e and it worked.

This is expected because I believe end-to-end tests should run against the production build to better match the real-world environment.

On the other hand, it is a pain point that the feedback loop would be too long with npm run build + npm run test:e2e, not to say that many people forget about the build command or forget to update the bundle in time.

So in the most recent release, I added a test:e2e:dev command to make use of the vite dev server.
The test:e2e command remains as-is, though. The detailed changes are in #183

create-vue why not use playwright ？

The latest release has added a Playwright option alongside Cypress.

from create-vue.

With the proposed solution, cypress opens, but the default test fails. To fix this problem, I ran yarn build before yarn test:e2e and it worked.

from create-vue.

I just tried a fresh project with the same exact options, using npm init vue@3 and then npm init vue@latest. The proposed solution doesn't change anything for me. The command just stalls like in the above screen recording:

npm run test:e2e

> [email protected] test:e2e
> start-server-and-test preview tcp:5050 'cypress open'

1: starting server using command "npm run preview"
and when url "[ 'tcp:5050' ]" is responding with HTTP status code 200
running tests using command "cypress open"


> [email protected] preview
> vite preview --port 4173

  > Local: http://localhost:4173/
  > Network: use `--host` to expose

And opening the localhost link in a browser, it shows Cannot GET /.

from create-vue.

Hi @vincerubinetti

if the tests don't start, it's probably because your preview script starts your application on port 4173 while the server you start with the start-server-and-start command expects an app on port 5050. You need to adjust the ports to be the same.

from create-vue.

Ah I didn't realize I had to change that too, thanks. So I changed it to "preview": "vite preview --port 5050", and I also noticed that in cypress.config.ts you'd (presumably) have to change it to baseUrl: 'http://localhost:5050'?

Anyway with that, and building the app before running the test per @Tommytrg , the e2e tests worked. But I guess since it relies on building the app, that means hot-reloading with e2e wouldn't work?

Seems like something's missing here. For context, I was just playing around with create-vue because I saw that they (just recently?) started officially recommending it, but it seems odd that one of the huge functionalities of it wouldn't work out of the box. And fwiw I'm on an M1 Mac with Monterrey, a common-enough developer platform I think. Seems like I'll probably stick with Vue CLI for now until this matures more.

from create-vue.

create-vue why not use playwright ？

from create-vue.

@GreatAuk #76 has not been merged.

from create-vue.

Hi @jeremyriverain, When I adjusted the following code, it can work.

"test:e2e": "npm run build-only && start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'"

from create-vue.