E2E testing

I’m not expecting vite to provide an E2E solution for me, but a pointer in documentation or some tips in general would be great. Maybe this issue can work just a reference to share experiences how others have approached this topic.

vue-cli provides Cypress integration which is nice. I don’t expect vite to do that.

I could add Cypress myself, but soon enough I’d probably hit one major issue: vite is not designed to perform well on initial page load in dev mode. Unless you do a lot of async imports a vite app ends up doing a lot of requests upfront which slows down Chrome (Safari seems to be performing better in this regard). This is not a great issue in dev because you rely on HMR but when running Cypress tests, full page reload happens between every test.

I can imagine something like vite --mode=production - run Cypress tests against production code (that’s good idea anyways I assume). So basically vite build but with file watching + Proxy server and other vite dev server utilities. This would be better DX than some custom dev server solution serving dist (at least the Server Proxy I’d have to share somehow).

vite --mode=production could also be useful for debugging issues that seem to show up only in production build.

any tips welcome, cheers!

[Uninen]

I’ve built a Vite template (vite-ts-tailwind-starter) that I use in many projects with Cypress and it works fine for my purposes. Cypress runs great both locally and in CI (pre-configured for GitLab and GitHub). It’s quite slow in CI, but e2e is always slow on CI so it hasn’t been a problem for me personally. (The default setup uses dev mode but it’s very easy to start Vite 2 in prod mode as well.)

The same setup works for Playwright as well (which gives you Safari/Webkit in addition to Chrome+FF).

[yyx990803]

Shouldn’t you do the production build once and then run multiple e2e tests on that production build? Do you have Cypress open and running e2e tests on every file change?