安装 Nightwatch

开始使用 Nightwatch 只需要几分钟。您可以使用 Nightwatch 执行以下类型的测试

  1. 在台式机和移动浏览器上对 Web 应用程序进行端到端测试
  2. 使用 React、Vue、Storybook 和 Angular 等顶级框架进行组件测试
  3. 在 Android 和 iOS 上进行移动应用程序测试
  4. API 测试
  5. 视觉回归测试 (VRT)
  6. 无障碍测试

对于所有类型的测试，您必须先安装 Nightwatch 本身。让我们开始吧！

先决条件

确保系统上安装了 Node。

Nightwatch 支持 V14.20 以上的所有 Node 版本

设置 Nightwatch

Nightwatch 可以通过一个命令行安装，无论是作为新项目还是在现有位置。

1. 作为新项目

要将 Nightwatch 设置为新项目，只需运行

npm init nightwatch <directory-name>
2. 在现有项目中
cd <directory-name> 
npm init nightwatch

看到提示时按 y 安装 create-nightwatch

❯ npm init nightwatch
Need to install the following packages:
  create-nightwatch
Ok to proceed? (y)

这将安装 Nightwatch，询问您的偏好并根据您的偏好设置 nightwatch.conf.js 文件，如下所示

Nightwatch setup using CLI Utility


回答简单的一组问题以完成 Nightwatch 安装。如果您需要有关这些问题的更多信息，请参考以下指南。否则，请在完成安装后跳至运行您的端到端测试部分。

偏好设置

测试类型

这将设置 Nightwatch 以及所选测试类型所需的所有依赖项。无论选择什么，都将安装 Nightwatch 基本版本。

? Select testing type to setup for your project (Press <space> 
to select, <a> to toggle all, <i> to invert selection, and 
 to proceed) 

❯◉ End-to-End testing 

 ◯ Component testing 

 ◯ Mobile app testing
您可以选择任何一个选项，并在以后也设置其他类型的测试。

测试运行器和语言

Nightwatch 还支持其他测试运行器。除了 Nightwatch，您还可以选择 Mocha 或 Cucumber JS 作为测试运行器。

Nightwatch 支持 v1.6.0 之后的测试文件中的 TypeScript。因此，您可以选择用 Javascript 或 Typescript 设置测试。

? Select language + test runner variant (Use arrow keys) 

❯ JavaScript / default 

  TypeScript / default  

  JavaScript / Mocha  

  JavaScript / CucumberJS

浏览器选择

您可以选择您将在其上进行测试的浏览器，配置将自动为它们创建。

? Select target browsers (Press <space> to select, <a> to toggle all, <i> to invert selection,
 and <enter< to proceed) 

❯◯ Firefox 

 ◯ Chrome 

 ◯ Edge 

 ◯ Safari
您也可以通过安装驱动程序并添加相应的环境来添加其他浏览器。

测试文件夹

接下来，您可以命名要放置测试的文件夹。默认值为 tests。

? Enter source folder where test files are stored (tests)

基本 URL

这是一个非常重要的配置，应该在您的测试中用作变量，以便您只需更改配置即可在不同的测试环境和 URL 之间切换。此偏好将默认为 https://127.0.0.1

? Enter the base_url of the project (https://127.0.0.1)

在本地/远程（云）上运行

您可以将 Nightwatch 配置为在本地计算机上运行，在云计算机上远程运行，或者同时运行。

? Select where to run Nightwatch tests (Use arrow keys) 

❯ On localhost 

  On a remote/cloud service 

  Both

对于远程测试，如果您选择 BrowserStack 或 Sauce Labs，主机和端口详细信息将自动添加。但是，如果您选择在自己的远程 selenium 服务器或任何其他云提供商上运行，则必须在 nightwatch.conf.js 文件中手动配置主机和端口详细信息。

匿名指标

允许 Nightwatch 收集匿名指标。由于我们尊重用户的隐私，此偏好将默认为 no。

? Allow Nightwatch to collect completely anonymous usage 
metrics? (y/N)

在移动 Web 上运行测试

Nightwatch 支持在真实和虚拟移动设备上运行测试。Nightwatch 还将负责所有底层 SDK、库和虚拟设备的设置。

Setup testing on Mobile devices as well? (Use arrow keys) 

  Yes 

❯ No, skip for now

选择此偏好后，Nightwatch 设置将开始。它还会为您生成示例测试以帮助您入门。

如果您从 Mac 运行，safaridriver 默认存在，但必须启用。您将看到以下选项。

? Enable safaridriver (requires sudo password)? (Use arrow keys)
 ❯Yes
  No, I'll do that later.

运行您的第一个端到端测试

设置完成后，您可以使用以下命令运行示例测试

npx nightwatch ./nightwatch/examples

输出应类似于以下内容


 Running:  default: examples/accessibilty-tests/websiteAccessibility.js 

 Running:  default: examples/basic/duckDuckGo.js 

 Running:  default: examples/basic/ecosia.js 

 Running:  default: examples/basic/todoList.js 

 Running:  default: examples/with-custom-assertions/todoList.js 

 Running:  default: examples/with-custom-commands/angularTodo.js 

 Running:  default: examples/with-page-objects/google.js 
 


✔  default: examples/with-custom-assertions/todoList.js    

 [To-Do List End-to-End Test] Test Suite 

 ────────────────────────────────────────────────────────────────────────────── 

 Using: chrome (110.0.5481.177) on MAC OS X. 


  
 – should add a new todo element 

 ✔ Testing if element <#todo-list ul li> has count: 4 (10ms) 

 ✔ Testing if element <#todo-list ul li> has count: 5 (59ms) 

 ✔ default: examples/with-custom-assertions/todoList.js [To-Do List End-to-End Test] should add a new todo element (2.531s)  

. 

. 

. 

  ✨ PASSED. 22 total assertions (16.68s) 

 Wrote HTML report file to: <path to Nightwatch project folder>/tests_output/nightwatch-html-report/index.html

查看报告

只需将输出末尾的 HTML 路径复制粘贴到浏览器地址栏中即可查看报告

HTML report

恭喜！您已安装 Nightwatch，运行了测试并查看了 HTML 报告。

请加入我们的 Discord 服务器，与不断壮大的 Nightwatch 社区建立联系，并在遇到任何问题时寻求帮助。

现在您已经安装了 Nightwatch

  1. 了解如何为 Web 应用程序编写端到端测试
  2. 了解如何进行移动应用程序测试
  3. 了解如何使用 Nightwatch 进行 API 测试
  4. 了解如何进行视觉回归测试
  5. 了解如何进行无障碍测试