詳解js中nightwatch的自動化測試

這篇文章就跟大家介紹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中文網其他相關文章！