使用 Nightwatch.js 实现 Node.js 的端到端测试

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测试。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容