@vue/cli-plugin-e2e-cypress #

vue-cli 的 e2e-cypress 插件

这将添加使用 Cypress 的 E2E 测试支持。

Cypress 提供了一个丰富的交互式界面，用于在基于 Firefox 和 Chromium 的浏览器（Chrome、MS Edge、Brave、Electron）中运行 E2E 测试。要了解有关跨浏览器测试的更多信息，请访问 Cypress 跨浏览器测试指南。

注意：如果您对 IE 或 Safari 中的 E2E 测试有严格的要求，请考虑使用基于 Selenium 的 @vue/cli-plugin-e2e-nightwatch。

注入的命令 #

• vue-cli-service test:e2e

  使用 cypress run 运行 e2e 测试。

  默认情况下，它以交互模式启动 Cypress，并带有 GUI（通过 cypress open）。如果您想以无头模式运行测试（例如，用于 CI），可以使用 --headless 选项。

  该命令会自动启动一个生产模式的服务器来运行 e2e 测试。如果您想多次运行测试而不必每次都重新启动服务器，可以在一个终端中使用 vue-cli-service serve --mode production 启动服务器，然后使用 --url 选项针对该服务器运行 e2e 测试。

  选项

  --headless run in headless mode without GUI
  --mode     specify the mode the dev server should run in. (default: production)
  --url      run e2e tests against given url instead of auto-starting dev server
  -s, --spec (headless only) runs a specific spec file. defaults to "all"
  

  此外

  • 在 GUI 模式下，cypress open 的所有 Cypress CLI 选项也受支持；
  • 在 --headless 模式下，cypress run 的所有 Cypress CLI 选项也受支持。

  示例

  • 以无头模式运行 Cypress 以针对特定文件：vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js

配置 #

我们已经预先配置了 Cypress，将大多数与 e2e 测试相关的文件放在 <projectRoot>/tests/e2e 下。您还可以查看 如何通过 cypress.json 配置 Cypress。

环境变量 #

Cypress 不会像 vue-cli 对您的 应用程序代码 那样为您的测试文件加载 .env 文件。Cypress 支持几种方法来 定义环境变量，但最简单的方法是使用 .json 文件（cypress.json 或 cypress.env.json）来定义环境变量。请记住，这些变量可以通过 Cypress.env 函数访问，而不是常规的 process.env 对象。

在已创建的项目中安装 #

vue add e2e-cypress