[test] Nightwatch.js debug 血淚史

Published: at 04:45 AM (4 min read)

前情提要: 本篇使用 [email protected] ((3.5.0以上會有不同的問題…

使用 Nightwatch.js 寫前端的 E2E test一段時間了…踩了不少雷

Nightwatch 底下還是使用 selenium 與 支援各瀏覽器的 webdriver ，其實大多狀況都是發生在各 web driver 跟 selenium…啊(嘆~

來記錄一下使用 Nightwatch.js 遇到的幾個問題~

selenium：

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?
....

最常出現以上這個訊息，可以先試著單獨開啟 selenium 在預設 port 4444，透過瀏覽器手動創建 session 確認 selenium 有正常運作。

java -jar selenium-server-standalone-{VERSION}.jar

另外，如果要透過 nightwatch.js 自動開啟 selenium，記得要將 nightwatch.json 設定檔中的 selectium start_process 設為 true

webdriver：

通常確認 selenium 有正常運作，但在 web UI 無法正確開啟 session，跑 nightwatch.js 仍然出現

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started? …

問題大概就會是在 webdriver 或瀏覽器設定的問題(selenium 的 cli_args)~

以下列出幾個常用的主流瀏覽器及 headless 瀏覽器的 webdriver~

Chrome：

linux：“webdriver.chrome.driver” : “node_modules/chromedriver/bin/chromedriver” (npm install —save-dev chromedriver)

windows：請下載 https://sites.google.com/a/chromium.org/chromedriver/downloads，解壓縮後 chromedriver.exe 放在當前執行目錄即可，安裝好後就不用特別設定 cli_args

可以單獨執行 chromedriver，可以看看有沒有在當前執行目錄有沒有產生錯誤的 chromedriver.log

"desiredCapabilities" : {
  "browserName" : "chrome",
  "javascriptEnabled" : true,
  "acceptSslCerts" : true,
  "chromeOptions" : {
    "args" : ["start-fullscreen"]
  }
}

Firefox：

linux ：“webdriver.gecko.driver” : “node_modules/geckodriver/bin/geckodriver” (npm install —save-dev geckodriver)

windows：不用設定 cli_agrs

可以單獨執行 geckodriver，可以看看有沒有產生錯誤

"desiredCapabilities" : {
  "browserName" : "firefox",
  "javascriptEnabled" : true,
  "acceptSslCerts" : true,
}

Safari：

mac：不用特別設定 cli_args，開啟 safari Develop，勾選 Allow Remote Automation

"desiredCapabilities" : {
  "browserName" : "safari",
  "javascriptEnabled" : true,
  "acceptSslCerts" : true
}

IE：

windows：

“browserName” : “internet explorer”…

“webdriver.ie.driver” : “IEDriverServer.exe”

打開 IE 的 網際網路選項>安全>勾選 將所有區域重設為預設等級，將四個區域(網際網路, 近端內部網路…)的啟用保護模式 打勾。

ps. 請下載http://selenium-release.storage.googleapis.com/index.html 對應 selenium 版本的 IEDriverServer.exe 切記要下載正確對應到 IE 的 32/64 bits driver !important (錯了會動…但會不定時的 hang 住 orz)

"desiredCapabilities" : {
  "browserName" : "internet explorer",
  "javascriptEnabled" : true,
  "acceptSslCerts" : true
}

phantom.js：

linux：npm install —save-dev phantomjs-prebuilt

如果你是 centOS，需要另外安裝 fontconfig (sudo yum install fontconfig)

windows：請下載 windows 版本 (http://phantomjs.org/download.html)，取代 phantomjs.binary.path。

"desiredCapabilities" : {
  "browserName" : "phantomjs",
  "javascriptEnabled" : true,
  "acceptSslCerts" : true,
  "phantomjs.binary.path": "node_modules/phantomjs-prebuilt/bin/phantomjs",
  "phantomjs.cli.args": ["--ignore-ssl-errors=true", "--web-security-false"]
}

Chrome headless (Chrome Canary)：

"desiredCapabilities" : {
  "browserName" : "chrome",
  "chromeOptions": {
    "args": ["headless"],
    "binary": "/Application/Google Chrome Canary.app/Content/MacOs/Google Chrome Canary"
  }
}

上面是 mac 的範例(只實測過 mac…windows 使用者可以換掉 binary 檔的位置測試看看

nightwatch.js：

重要：如果你的測試對象有根據(js hack 或  user agent)擋掉部分瀏覽器，記得要先用適當的瀏覽器測試後，再使用 headless 測試。(headless 和 GUI 環境不同)

參考資料：

https://github.com/nightwatchjs/nightwatch/wiki/Chrome-Setup

https://github.com/nightwatchjs/nightwatch-docs/blob/master/gettingstarted/browser-setup/gecko-driver.md

https://github.com/nightwatchjs/nightwatch/wiki/Running-tests-in-Safari

https://github.com/nightwatchjs/nightwatch/wiki/Internet-Explorer-Setup

https://stackoverflow.com/questions/40172788/unable-to-create-new-remote-session

https://github.com/nightwatchjs/nightwatch/wiki/Running-tests-in-PhantomJS

http://sameerhalai.com/blog/how-to-install-phantomjs-on-a-centos-server/

https://github.com/nightwatchjs/nightwatch/issues/1439