@vue/cli-plugin-e2e-nightwatch #

vue-cli 的 e2e-nightwatch 插件

注入的命令 #

• vue-cli-service test:e2e

  使用 Nightwatch.js 运行端到端测试。

  选项

  --url                 run the tests against given url instead of auto-starting dev server
  --config              use custom nightwatch config file (overrides internals)
  --headless            use chrome or firefox in headless mode
  --parallel            enable parallel mode via test workers (only available in chromedriver)
  --use-selenium        use Selenium standalone server instead of chromedriver or geckodriver
  -e, --env             specify comma-delimited browser envs to run in (default: chrome)
  -t, --test            specify a test to run by name
  -f, --filter          glob to filter tests by filename
  

  此外，所有 Nightwatch CLI 选项 也受支持。例如：--verbose、--retries 等。

项目结构 #

安装此插件后将生成以下结构。其中包含 Nightwatch 中大多数测试概念的示例。

tests/e2e/
  ├── custom-assertions/
  |   └── elementCount.js
  ├── custom-commands/
  |   ├── customExecute.js
  |   ├── openHomepage.js
  |   └── openHomepageClass.js
  ├── page-objects/
  |   └── homepage.js
  ├── specs/
  |   ├── test.js
  |   └── test-with-pageobjects.js
  └── globals.js

specs #

测试文件的主要存放位置。可以包含子文件夹，这些子文件夹可以在运行时使用 --group 参数进行定位。 更多信息。

custom-assertions #

此处的文件会由 Nightwatch 自动加载，并放置到 .assert 和 .verify api 命名空间中，以扩展 Nightwatch 内置断言。有关详细信息，请参阅 编写自定义断言。

custom-commands #

此处的文件会由 Nightwatch 自动加载，并放置到主 browser api 对象中，以扩展内置的 Nightwatch 命令。有关详细信息，请参阅 编写自定义命令。

page objects #

使用页面对象是端到端 UI 测试中的一种流行方法。放置在此文件夹中的文件会自动加载到 .page api 命名空间中，文件名即为页面对象的名称。有关详细信息，请参阅 使用页面对象 部分。

globals.js #

外部全局文件，可以包含全局属性或钩子。请参阅 测试全局 部分。

在已创建的项目中安装 #

vue add e2e-nightwatch

配置 #

我们已预先配置 Nightwatch 以默认使用 Chrome 运行。Firefox 也可通过 --env firefox 使用。如果您希望在其他浏览器（例如 Safari、Microsoft Edge）中运行端到端测试，则需要在项目根目录中添加一个 nightwatch.conf.js 或 nightwatch.json 来配置其他浏览器。该配置将合并到 内部 Nightwatch 配置 中。

或者，您可以使用 --config 选项完全替换内部配置为自定义配置文件。

请参阅 Nightwatch 文档了解 配置选项 以及如何 设置浏览器驱动程序。

运行测试 #

默认情况下，specs 文件夹中的所有测试都将使用 Chrome 运行。如果您希望在无头模式下针对 Chrome（或 Firefox）运行端到端测试，只需传递 --headless 参数即可。

$ vue-cli-service test:e2e

运行单个测试

要运行单个测试，请提供文件名路径。例如：

$ vue-cli-service test:e2e tests/e2e/specs/test.js

跳过开发服务器自动启动

如果开发服务器已在运行，并且您希望跳过自动启动它，请传递 --url 参数

$ vue-cli-service test:e2e --url https://127.0.0.1:8080/

在 Firefox 中运行

默认情况下也支持在 Firefox 中运行测试。只需运行以下命令（可以选择添加 --headless 以在无头模式下运行 Firefox）

$ vue-cli-service test:e2e --env firefox [--headless]

在 Firefox 和 Chrome 中同时运行

您还可以通过提供用逗号 (",") 分隔的两个测试环境（无空格）来同时在两个浏览器中运行测试。

$ vue-cli-service test:e2e --env firefox,chrome [--headless]

并行运行测试

为了显著加快测试运行速度，您可以在存在多个测试套件时启用并行测试运行。并发是在文件级别执行的，并根据可用的 CPU 内核自动分配。

目前，这仅在 Chromedriver 中可用。在 Nightwatch 文档中了解有关 并行运行 的更多信息。

$ vue-cli-service test:e2e --parallel

使用 Selenium 运行

从 v4 开始，Selenium 独立服务器不再包含在此插件中，并且在大多数情况下，由于 Nightwatch v1.0，使用 Selenium 运行不再是必需的。

仍然可以使用 Selenium 服务器，请按照以下步骤操作

1. 安装 selenium-server NPM 包

$ npm install selenium-server --save-dev

2. 使用 --use-selenium cli 参数运行

$ vue-cli-service test:e2e --use-selenium