[test] Nightwatch.js debug 血淚史

前情提要: 本篇使用 [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

"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:

  • setValue 前記得要先 clearValue,因為 setValue 行為其實是 appendValue….(https://github.com/nightwatchjs/nightwatch/issues/4)
  • useXpath() 完記得呼叫 useCss() 還原,預設是 css selector,當每次呼叫 useXpath() 會改變 global 的 selector, 會造成找不到 element 的錯誤….

重要:如果你的測試對象有根據(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

Leave a Reply