nightwatch.js是一個web-ui自動化測試框架,被vue-cli深度整合進來。如果一個項目是基於vue-cli搭建的,基本可以做到開箱即用。
但是我們不可能一直都使用vue-cli。因爲它很多時候不能夠滿足我們的定製化需求。我們很多時候會對構建框架進行定製,或者完全重新搭建。這個時候整合進來nightwatch就會很困難。這篇文章就來帶着大家入門搭建這麼一個測試框架。
所需環境
首先在項目裏面安裝nightwatch,切換到項目目錄
npm intall nightwatch -D
安裝這個還不夠,還需要安裝selenium-server,同樣可以使用npm安裝
npm install selenium-server -D
selenium-server是基於Java開發的,作用是用來連接瀏覽器的。所以安裝selenium-server之前需要安裝java。如何安裝Java?
除此之外還需要安裝一個瀏覽器驅動器,一般我們使用chrome做測試
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D
直接安裝chromedriver會提示安裝不成功,需要手動指定鏡像地址
至此需要下載的部分已經下載完成。
項目配置
nightwatch默認使用項目根目錄的nightwatch.conf.js
作爲配置文件。官網也有另外一種配置文件的格式就是nightwatch.json
。這裏我們使用js的配置方式,因爲格式更靈活。
下面這個就是一個簡單的配置文件。
module.exports = {
'src_folders': [
'e2e/case'
],
'output_folder': 'reports',
'custom_commands_path': '',
'custom_assertions_path': '',
'page_objects_path': '',
'globals_path': require('./e2e/config/global.config').path,
'selenium': {
'start_process': true,
'server_path': require('selenium-server').path,
'log_path': '',
'host': '127.0.0.1',
'port': 4444,
'cli_args': {
'webdriver.chrome.driver': require('chromedriver').path
}
},
'test_settings': {
'default': {
'launch_url': 'http://localhost',
'selenium_port': 4444,
'selenium_host': 'localhost',
'silent': true,
'screenshots': {
'enabled': false,
'path': ''
},
'desiredCapabilities': {
'browserName': 'chrome',
'marionette': true
}
},
'chrome': {
'desiredCapabilities': {
'browserName': 'chrome'
}
},
'edge': {
'desiredCapabilities': {
'browserName': 'MicrosoftEdge'
}
}
}
}
src_folders:表示的就是case所在的文件夾
output_folder:代表的是報告輸出的文件夾
selenium下面的server_path:代表的是selenium-server的安裝路徑
selenium下面的start_process:代表的是是否自動啓動selenium——server,入股設爲false,不會自動啓動server。
"cli_args" : {
"webdriver.chrome.driver" : "",
"webdriver.gecko.driver" : "",
"webdriver.edge.driver" : ""
}
cli_args下面的driver表示幾個driver的安裝路徑,分別安裝成功就可以了
test_settings是傳給nightwatch實例的數據,這裏面可以配置多個環境,default是必須有的,其他環境可以自行配製。
nightwatch --env default
然後我們在項目裏運行以上命令。
在windows發現報錯了,運行不起來的。我們需要在package.json下面配置一下
"scripts": {
"e2e": "nightwatch --env default",
},
這就可以正常運行了。
如果需要看到真實的效果,我們在case文件夾下面創建一些case就可以了
比如:
module.exports = {
'Test login': function (browser) {
browser
.windowMaximize()
.url('https://trans.qa.17u.cn/saas')
.waitForElementVisible('.login', 3000)
.assert.urlContains('/saas/login')
}
}