cypress not running after server start

[jeremyriverain]

Hi,

I just created a Vue app using the npm init vue command.

When I run the test:e2 and test:e2e:ci commands on my machine, Cypress does not run after starting the server.

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 means replacing:

{
  "scripts": {
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
  }
}

with:

{
  "scripts": {
    "test:e2e": "start-server-and-test preview tcp:5050 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview tcp:5050 'cypress run'",
  }
}

fixed these errors.

Do you agree ? Can I create a pull request to fix this error?

[Tommytrg]

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.

[vincerubinetti]

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 /.

[jeremyriverain]

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.

[vincerubinetti]

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.

[GreatAuk]

create-vue why not use playwright ？

[watonyweng]

@GreatAuk #76 has not been merged.

[watonyweng]

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'"

[haoqunjiang]

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 https://github.com/vuejs/create-vue/pull/183

create-vue why not use playwright ？

The latest release has added a Playwright option alongside Cypress.