前言
怎么說(shuō)呢泽示?本司之前用的是selenium Java寫(xiě)的前端自動(dòng)化钳幅。倒也是我寫(xiě)了。不過(guò)為什么會(huì)想著Nightwatch呢比藻?因?yàn)橛幸惶彀l(fā)現(xiàn)自動(dòng)化掛了铝量。一查看才發(fā)現(xiàn)前端加了個(gè)蒙板。結(jié)果導(dǎo)致xpath變了银亲,然后導(dǎo)航頁(yè)點(diǎn)擊掛了(不能點(diǎn)到導(dǎo)航頁(yè)慢叨,也就進(jìn)不了具體頁(yè)面)。改了下倒也不麻煩务蝠,但是導(dǎo)runable jar包沒(méi)給折騰死拍谐。實(shí)在太多了。
想著如今js也是很強(qiáng)的馏段,就找到了Nightwatch轩拨。為什么不用phantomjs?因?yàn)橛玫臅r(shí)候覺(jué)得API實(shí)在是有點(diǎn)不夠用院喜。而且無(wú)界面化別人覺(jué)得不靠譜(人家覺(jué)得眼見(jiàn)為實(shí))亡蓉。
Nightwatch | phantomjs |
---|---|
有界面 | 無(wú)界面 |
API豐富 | API有點(diǎn)不夠用 |
selenium與nightwatch
Selenium是一個(gè)用于Web應(yīng)用程序測(cè)試的工具,nightwatch其實(shí)有點(diǎn)像是調(diào)用selenium干活一樣喷舀。只是使用nightwatch做中轉(zhuǎn)和直接使用selenium相比砍濒,前者很是輕松易上手淋肾。
準(zhǔn)備
Java
Java環(huán)境是必須的。百度下jdk安裝教程數(shù)不勝數(shù)爸邢,在此不贅述樊卓。
node.js
node.js環(huán)境也是需要的,記得早年npm與nodejs得分開(kāi)安裝杠河,現(xiàn)在卻是不用了碌尔。官網(wǎng)下載無(wú)腦安裝即可。
selenium
需要瀏覽器驅(qū)動(dòng)和selenium server.jar
server.jar下載地址
driver下載地址
得下載和瀏覽器相匹配的driver券敌。去chromedriver.storage.googleapis.com唾戚,點(diǎn)進(jìn)最新版,查看notes.txt即可看見(jiàn)支持情況待诅。就比如此時(shí)最新版為2.33颈走。
https://chromedriver.storage.googleapis.com/2.33/notes.txt
這里提供下chromedriver與chrome版本對(duì)照表
chromedriver | chrome |
---|---|
v2.33 | v60-62 |
v2.32 | v59-61 |
v2.31 | v58-60 |
v2.30 | v58-60 |
v2.29 | v56-58 |
v2.28 | v55-57 |
v2.27 | v54-56 |
v2.26 | v53-55 |
v2.25 | v53-55 |
v2.24 | v52-54 |
v2.23 | v51-53 |
v2.22 | v49-52 |
v2.21 | v46-50 |
v2.20 | v43-48 |
v2.19 | v43-47 |
v2.18 | v43-46 |
正文
環(huán)境準(zhǔn)備就緒,開(kāi)始擼代碼咱士。
簡(jiǎn)化
首先建立項(xiàng)目,比如nightwatch轧钓,在位于當(dāng)前文件夾的終端/命令行敲入
npm init -y
初始化完成之后輸入
npm install --save nightwatch
安裝nightwatch依賴(lài)
新建nightwatch.json(此文件名不能修改)序厉,以下注釋了些常用關(guān)鍵項(xiàng),千萬(wàn)記得實(shí)際上這是個(gè)JSON文件毕箍,不能有注釋?zhuān)孕腥サ?/strong>弛房。更多配置項(xiàng)請(qǐng)看官網(wǎng),無(wú)需找中文版而柑,因?yàn)橛⒄Z(yǔ)很淺顯文捶。
{
"src_folders": [
"tests" //存放測(cè)試用例的文件夾,文件夾不可嵌套
],
"output_folder": "reports", //存放測(cè)試報(bào)告文件夾
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "",
"globals_path": "",
"selenium": {
"start_process": true,//是否自動(dòng)開(kāi)啟selenium服務(wù)
"server_path": "./selenium-server-standalone-3.7.1.jar",//selenium jar路徑
"log_path": "",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "./chromedriver", //driver路徑
"webdriver.gecko.driver": "",
"webdriver.edge.driver": ""
}
},
"test_settings": {
"default": {
"launch_url": "http://localhost",
"selenium_port": 4444,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": true,//是否開(kāi)啟截圖媒咳,若為false粹排,截圖不成功
"path": ""
},
"desiredCapabilities": {
"browserName": "chrome",//默認(rèn)使用什么瀏覽器測(cè)試
"marionette": true
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome"
}
},
"edge": {
"desiredCapabilities": {
"browserName": "MicrosoftEdge"
}
}
}
}
新建start.js(此文件為啟動(dòng)文件,所以可以隨意命名)
require('nightwatch/bin/runner.js')
自此涩澡,環(huán)境搭建完畢顽耳。可以寫(xiě)測(cè)試用例
我們新建一個(gè)tests文件夾存儲(chǔ)測(cè)試用例妙同。新建一個(gè)./tests/test.js
module.exports = {
'Search by baidu': function (client) {
// 定義頁(yè)面元素
const searchInput = '#kw';
const searchBtn = '#su';
const resultContainer = '#container';
// 啟動(dòng)瀏覽器并打開(kāi)www.baidu.com
client.url('http://baidu.com').maximizeWindow()
// 確保輸入框可以使用.
.waitForElementVisible(searchInput, 5000)
// 輸入"nightwatch"然后搜索.
.setValue(searchInput, 'nightwatch')
.click(searchBtn)
.waitForElementVisible(resultContainer, 1000)
// 截屏
.saveScreenshot('reports/answers.png')
.end()
}
}
相信這個(gè)用例大家都看得懂射富。
然后終端輸入
node ./start.js
效果如下(簡(jiǎn)書(shū)對(duì)GIF大小有限制,就截了部分):
改裝
上面我們是事先下載好selenium driver與jar包粥帚。其實(shí)我們可以使用selenium-standalone這個(gè)安裝器(需要翻墻)
首先安裝依賴(lài)
nom install --save-dev selenium-standalone
其次胰耗,新建selenium文件夾。在此文件夾下新建selenium-conf.js
const process = require('process')
module.exports = {
// selenium版本與下載地址
// check for more recent versions of selenium here:
// https://selenium-release.storage.googleapis.com/index.html
version: '3.7.1',
baseURL: 'https://selenium-release.storage.googleapis.com',
// Driver看情況配置芒涡,比如只需要chrome就止血chrome 即可
drivers: {
chrome: {
// check for more recent versions of chrome driver here:
// https://chromedriver.storage.googleapis.com/index.html
version: '2.33.2',
arch: process.arch,
baseURL: 'https://chromedriver.storage.googleapis.com'
},
ie: {
// check for more recent versions of internet explorer driver here:
// https://selenium-release.storage.googleapis.com/index.html
version: '3.0.1',
arch: process.arch,
baseURL: 'https://selenium-release.storage.googleapis.com'
}
}
}
新建setup.js文件
const selenium = require('selenium-standalone')
const seleniumConfig = require('./selenium-conf.js')
// 從網(wǎng)絡(luò)下載selenium
selenium.install({
version: seleniumConfig.version,
baseURL: seleniumConfig.baseURL,
drivers: seleniumConfig.drivers,
logger: function (message) { console.log(message) },
progressCb: function (totalLength, progressLength, chunkLength) { }
}, function (err) {
if (err) throw new Error(`Selenium 安裝錯(cuò)誤: ${err}`)
console.log('Selenium 安裝完成.')
})
運(yùn)行setup.js即可安裝
node ./selenium/setup.js
大坑
為什么是大坑呢柴灯?因?yàn)槔戏騁oogle卖漫,逛了好些國(guó)外論壇,看了源碼都沒(méi)搞定下面這貨弛槐。
先說(shuō)下原因懊亡。都是因?yàn)槲襝hromedriver版本與我機(jī)子chrome版本不對(duì)應(yīng)。對(duì)應(yīng)表格請(qǐng)看上文
雖然解決了乎串,但是還是說(shuō)下我的爬坑路店枣。
首先第一想法是參數(shù)問(wèn)題,學(xué)過(guò)Java的朋友應(yīng)該知道叹誉,Java啟用selenium可以設(shè)置參數(shù)來(lái)解決這個(gè)問(wèn)題鸯两,不怎么用Java selenium,這里就度娘了一篇长豁。
按照這個(gè)思路钧唐,那必定是在nightwatch.json里填參數(shù)。官網(wǎng)找了圈沒(méi)找到匠襟,就google了下钝侠,如下:
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"chromeOptions": {
"args": [
"disable-web-security",
"ignore-certificate-errors"
]
}
}
}
發(fā)現(xiàn)還真可以消除這個(gè)ignore-certificate-errors,但是卻不能打開(kāi)網(wǎng)頁(yè)酸舍。
百般無(wú)奈之下帅韧,看源碼,定位到
打印this.cliOpts參數(shù)可見(jiàn)
當(dāng)然啃勉,因?yàn)椴皇呛芮宄@個(gè)對(duì)應(yīng)的參數(shù)應(yīng)該怎么寫(xiě)忽舟,自然沒(méi)成功。知道的朋友望告知一聲淮阐。
后記
有空寫(xiě)個(gè)selenium Java時(shí)遇到的一些問(wèn)題以及解法叮阅。比如滾動(dòng)截屏的Javashi xian