2017 年 5 月 15 日起侵俗， Scott 會陸續(xù)翻譯一些不錯或者有趣的 Node.js 文章糙捺，干貨濕貨一起擼浓镜，幫助 Node.js 愛好者更好的了解 Node.js 這個技術(shù)所帶來的生產(chǎn)力和職業(yè)競爭力。
另外 Scott 也錄制了 一些 Node.js 的實戰(zhàn)學習視頻髓废，有免費的有收費的懒棉，大家可以自取所需草描，下面進入正題：
本文來自RisingStack的官方博客览绿，發(fā)表于 2017.3 Node.js End-to-End Testing with Nightwatch.js
譯文如下：
在這篇文章里策严，我們將要去看一看如何在 Node.js 中通過使用 Nightwatch.js 這個強大的 e2e 測試框架來實現(xiàn)E2E測試。
在前一篇關(guān)于 Node.js at Scale 的文章中饿敲，我們討論了 Node.js測試和獲取 TDD 權(quán)限 妻导。如果你還沒有閱讀過這篇文章，或者你并不熟悉單元測試和 TDD（測試驅(qū)動開發(fā)）怀各，我建議你在繼續(xù)閱讀這篇文章之前先查閱一下上篇文章倔韭。
什么是 Node.js e2e測試？
在直接進入代碼實例和學習在 Node.js 工程中去編寫 e2e 測試之前瓢对，去了解什么是 e2e 測試是很有意義的寿酌。
首先，e2e 測試是黑盒測試工具的一種硕蛹，這就意味著作為一個寫測試的人醇疼，你在檢查功能的同時不了解任何關(guān)于內(nèi)部實現(xiàn)的原理，所以你不會看到一點源代碼法焰。
其次秧荆，e2e 測試可以被用來當作用戶體驗測試，或 UAT 埃仪。 UAT 是一個驗證這個方案確認用于使用的過程乙濒，這個過程不會專注于發(fā)現(xiàn)細節(jié)錯誤，但可能會導致系統(tǒng)崩潰的問題卵蛉，或者是功能上的缺失颁股。
開始 Nightwatch.js
Nightwatch.js 允許你去 “在 Node.js 中快速么库、輕松地編寫 e2e測試就像 Selenium/WebDriver 服務(wù)一樣”。
Nightwatch 有以下的特性:
- 一個內(nèi)置的測試運行器
- 可控的 selenium 服務(wù)
- 持續(xù)集成 selenium 甘有，比如 BrowserStack 或者 SauceLabs
- CSS 和 Xpath 選擇器
安裝 Nightwatch
為了本地把 Nightwatch 跑起來廊散，我們要先做一些小工作 - 我們將會需要一個獨立的 Selenium 本地服務(wù)，以及一個 webdriver 梧疲，另外我們可以使用 Chrome/Firefox 去本地測試我們的app應(yīng)用允睹。
有了這三個工具，我們將會實現(xiàn)下圖中的流程
圖片來源: nightwatchjs.org
步驟1: 安裝 Nightwatch
你可以很簡單的通過命令行來安裝 Nightwatch : npm install nightwatch --save-dev幌氮。
這個命令會將 Nightwatch 安裝到你的 ./node_modules/bin 文件夾里缭受，所以你就不需要全局安裝它。
步驟2: 下載 Selenium
Selenium 是一套可以在許多平臺上實現(xiàn) web 瀏覽器自動化的工具该互。
前提是: 確定你已經(jīng)安裝了 JDK米者，同時版本至少要大于等于7。如果你不滿足這個條件宇智，你可以點擊 這里蔓搞。
Selenium 服務(wù)是一個 Java 應(yīng)用，用于通過 Nightwatch 來連接各種瀏覽器随橘。你可以從 這里 下載這兩部分喂分。
如果你已經(jīng)下載了這些 JAR 文件，在你的工程目錄中創(chuàng)建一個 bin 文件夾机蔗，然后把文件放到里面蒲祈。我們將會安裝 Nightwatch 去使用它，因此你不需要去手動開啟 Selenium 服務(wù)萝嘁。
步驟3: 下載 Chromedriver
Chromedriver 是一個獨立的服務(wù)梆掸，它通過 Chromium 實現(xiàn)了 W3C WebDriver 通訊協(xié)議。
要獲取可執(zhí)行的文件牙言，通過下面這個 下載地址 下載酸钦，然后也將它放到同一個 bin 文件夾里。
步驟4: 配置 Nightwatch.js
簡單的 Nightwatch 配置需要通過配置一個 json 文件咱枉。
讓我們來創(chuàng)建一個 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 服務(wù)器和 Chromedriver 的二進制文件庞钢，以及我們想要運行的測試的位置拔恰。
快速總結(jié)
現(xiàn)在，我們已經(jīng)安裝了 Nightwatch 基括，并且下載了獨立的 Selenium 服務(wù)和 Chromedriver 颜懊。通過這些步驟，你已經(jīng)擁有了所有必備的工具去使用 Node.js 和 Selenium 創(chuàng)建 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 在你項目中
現(xiàn)在侄刽，你已經(jīng)理解了什么是 e2e 測試了吧指黎，還有如何去安裝 Nightwatch ， 是時候開始在你的項目中走一個了州丹。
另外醋安，你還得去思考一些方面 - 請注意， 在這里沒有靈丹妙藥墓毒，不能一勞永逸吓揪。取決于你自己工作的需要，你可能會對下面的問題有不同的見解:
- 我應(yīng)該在什么時候跑所计？ 在發(fā)布到線上前柠辞？ 在生產(chǎn)環(huán)境？ 當我構(gòu)建自己的容器時醉箕？
- 在哪一種測試的場景去使用它來測試钾腺？
- 什么時候以及什么人應(yīng)該來寫 e2e 測試？
總結(jié) & 下一步
在 Node.js at Scale 這一章讥裤，我們學到了:
- 如何去安裝 Nightwatch，
- 如何去配置一個獨立的 Selenium 服務(wù)姻报，
- 還有如何去寫一個基礎(chǔ)的e2e測試己英。
