這篇文章就跟大家介紹js中nightwatch的自動化測試，讓大家可以掌握nightwatch自動化測試的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
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')
}
}總結：以上就是這篇文章的全部內容，程式碼很簡單，大家可以動手試試。希望能對大家的學習有所幫助，更多相關教學請造訪JavaScript影片教學，jQuery影片教學，bootstrap教學！
以上是詳解js中nightwatch的自動化測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！
