2017 年 5 月 15 日起, Scott 会陆续翻译一些不错或者有趣的 Node.js 文章,干货湿货一起撸,帮助 Node.js 爱好者更好的了解 Node.js 这个技术所带来的生产力和职业竞争力。
另外 Scott 也录制了 一些 Node.js 的实战学习视频,有免费的有收费的,大家可以自取所需,下面进入正题:
本文来自RisingStack的官方博客,发表于 2017.3 Node.js End-to-End Testing with Nightwatch.js
译文如下:
在这篇文章里,我们将要去看一看如何在 Node.js 中通过使用 Nightwatch.js 这个强大的 e2e 测试框架来实现E2E测试。
在前一篇关于 Node.js at Scale 的文章中,我们讨论了 Node.js测试和获取 TDD 权限 。如果你还没有阅读过这篇文章,或者你并不熟悉单元测试和 TDD(测试驱动开发),我建议你在继续阅读这篇文章之前先查阅一下上篇文章。
什么是 Node.js e2e测试?
在直接进入代码实例和学习在 Node.js 工程中去编写 e2e 测试之前,去了解什么是 e2e 测试是很有意义的。
首先,e2e 测试是黑盒测试工具的一种,这就意味着作为一个写测试的人,你在检查功能的同时不了解任何关于内部实现的原理,所以你不会看到一点源代码。
其次,e2e 测试可以被用来当作用户体验测试,或 UAT 。 UAT 是一个验证这个方案确认用于使用的过程,这个过程不会专注于发现细节错误,但可能会导致系统崩溃的问题,或者是功能上的缺失。
开始 Nightwatch.js
Nightwatch.js 允许你去 “在 Node.js 中快速、轻松地编写 e2e测试就像 Selenium/WebDriver 服务一样”。
Nightwatch 有以下的特性:
- 一个内置的测试运行器
- 可控的 selenium 服务
- 持续集成 selenium ,比如 BrowserStack 或者 SauceLabs
- CSS 和 Xpath 选择器
安装 Nightwatch
为了本地把 Nightwatch 跑起来,我们要先做一些小工作 - 我们将会需要一个独立的 Selenium 本地服务,以及一个 webdriver ,另外我们可以使用 Chrome/Firefox 去本地测试我们的app应用。
有了这三个工具,我们将会实现下图中的流程
图片来源: nightwatchjs.org
步骤1: 安装 Nightwatch
你可以很简单的通过命令行来安装 Nightwatch : npm install nightwatch --save-dev
。
这个命令会将 Nightwatch 安装到你的 ./node_modules/bin
文件夹里,所以你就不需要全局安装它。
步骤2: 下载 Selenium
Selenium 是一套可以在许多平台上实现 web 浏览器自动化的工具。
前提是: 确定你已经安装了 JDK,同时版本至少要大于等于7。如果你不满足这个条件,你可以点击 这里。
Selenium 服务是一个 Java 应用,用于通过 Nightwatch 来连接各种浏览器。你可以从 这里 下载这两部分。
如果你已经下载了这些 JAR 文件,在你的工程目录中创建一个 bin
文件夹,然后把文件放到里面。我们将会安装 Nightwatch 去使用它,因此你不需要去手动开启 Selenium 服务。
步骤3: 下载 Chromedriver
Chromedriver 是一个独立的服务,它通过 Chromium 实现了 W3C WebDriver 通讯协议。
要获取可执行的文件,通过下面这个 下载地址 下载,然后也将它放到同一个 bin
文件夹里。
步骤4: 配置 Nightwatch.js
简单的 Nightwatch 配置需要通过配置一个 json
文件。
让我们来创建一个 nightwatch.json
文件,然后补充一下:
{
"src_folders" : ["tests"],
"output_folder" : "reports",
"selenium" : {
"start_process" : true,
"server_path" : "./bin/selenium-server-standalone-3.3.1.jar",
"log_path" : "",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "./bin/chromedriver"
}
},
"test_settings" : {
"default" : {
"launch_url" : "http://localhost",
"selenium_port" : 4444,
"selenium_host" : "localhost",
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
通过这个配置文件,Nightwatch 可以知道在哪里找到 Selenium 服务器和 Chromedriver 的二进制文件,以及我们想要运行的测试的位置。
快速总结
现在,我们已经安装了 Nightwatch ,并且下载了独立的 Selenium 服务和 Chromedriver 。通过这些步骤,你已经拥有了所有必备的工具去使用 Node.js 和 Selenium 创建 e2e测试。
来写你的第一个 Nightwatch 测试
我们先新建一个文件放到tests
文件夹里,命名为homepage.js
。
我们先从 Nightwatch getting started guide 拿个例子出来。我们的测试代码将会通过 Google ,搜索 Rembrandt ,同时检查 Wikipedia 页面:
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'rembrandt van rijn')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('ol#rso li:first-child',
'Rembrandt - Wikipedia')
.end()
}
}
剩下唯一要做的事情就是让 Nightwatch 跑起来咯!因此,我建议加一部分新的代码到你的 package.json
文件里:
"scripts": {
"test-e2e": "nightwatch"
}
最后一件要做的事情就是在命令行里面输入下面的代码:
npm run test-e2e
如果所有东西都运行正常,你的测试会打开 Chrome,然后是 Google 和 Wikipedia 。
Nightwatch.js 在你项目中
现在,你已经理解了什么是 e2e 测试了吧,还有如何去安装 Nightwatch , 是时候开始在你的项目中走一个了。
另外,你还得去思考一些方面 - 请注意, 在这里没有灵丹妙药,不能一劳永逸。取决于你自己工作的需要,你可能会对下面的问题有不同的见解:
- 我应该在什么时候跑? 在发布到线上前? 在生产环境? 当我构建自己的容器时?
- 在哪一种测试的场景去使用它来测试?
- 什么时候以及什么人应该来写 e2e 测试?
总结 & 下一步
在 Node.js at Scale 这一章,我们学到了:
- 如何去安装 Nightwatch,
- 如何去配置一个独立的 Selenium 服务,
- 还有如何去写一个基础的e2e测试。