使用 Nightwatch.js 實現 Node.js 的端到端測試

weixin_34008784發表於2017-06-10
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應用。

有了這三個工具，我們將會實現下圖中的流程

1455990-bf6354cbb4a24bb7.png

圖片來源: 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測試。

相關文章