Cypess e2e 测试，当使用 vite 构建时，在“自动化”模式下失败，但在开放交互模式下工作

Question

我最近将我的 Vue 3 应用程序从 Webpack 切换到 Vite，并且很难以自动化方式运行我的测试。我（在一些测试中）得到：

ReferenceError: The following error originated from your application code, not from Cypress.

  > Buffer is not defined

有些测试效果很好。因为我使用 jszip，并且 Vite 默认情况下不会应用像 Buffer 这样的 Node polyfills，所以我怀疑我的问题就埋在那里。但我没能正确修复它。

我有相当多的测试集，只要我在

open

模式下启动 Cypress，它们都会起作用：

# works just fine (but requires me to manually start the test runs)
npx start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'

但是，当我尝试自动化执行时：

# Does not work!
npx start-server-and-test preview http://localhost:4173 'cypress run --e2e'
# Does not work, too! (although opens the browser like the open mode)
npx start-server-and-test preview http://localhost:4173 'cypress run --e2e --headed --browser chrome'

所以问题更多地围绕not使用

open

参数，而不是

run

参数，而不是关于是否无头运行它。

问题在于使用

preview

参数与

vite dev

参数之间的差异。

我目前在 vite 配置中使用 polyfill，如下所示，它们很有帮助。

// vite.config.ts
plugins: [
    vue(),
    /** Configure the polyfills for use with vite.
     * @remarks See https://github.com/davidmyersdev/vite-plugin-node-polyfills
     * @devdoc stream is used with jszip
     */
    nodePolyfills(),
],

这些 Polyfill 是否需要 Cypress 或预览版本的特定配置？我要在 vitest.config.ts 中配置它吗？

Answer 1

这里的问题是运行 cypress 测试的默认命令使用生产版本，而我的工作命令使用开发版本。 （感谢@adsy为我指明了正确的方向）

因为我的生产版本还存在问题，所以测试无法正常运行。

解决方案当然是通过生产版本解决问题。

同时，一个

解决方法是在开发构建中使用自动化测试运行，如下所示：

# run the tests with the dev build
npx start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress run --e2e --headed --browser chrome'