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

下面這個就是一個簡單的配置檔案。

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')
    }
    
}

原文地址：https://segmentfault.com/a/1190000016706019