前情提要: 本篇使用 [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設定檔中的 selectiumstart_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：
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/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/