nightwatch實現vue應用e2e測試

nightwatch是一個基於Selenium WebDriver API的e2e自動化測試框架，可以使用js方法與css選擇器來編寫運行在Selenium服務器上的端到端測試。

這里直接使用vue-cli來安裝的，nightwatch的相關模塊都已自動安裝，下面就來解釋下安裝了哪些模塊，以及具體怎么進行測試。

 

 1. nightwatch安裝

由於nightwatch需要Selenium才能工作，所以這兩樣東西我們要一起安裝(vue-cli安裝時會提示，如果選y會自動安裝)

// install selenium-server
npm install selenium-server
// install nightwatch
npm install nightwatch

tips：由於selenium是java服務，要想啟動必須安裝jdk，且版本必須大於等於1.8！！！（selenium3.0以上需大於等於1.8，2.0可以無視）公司用的是1.7版本，害我入坑了，現在兩個jdk版本切換有點小麻煩。

 

2. 目錄(vue-cli會自動生成該文件夾)

├── e2e
│   ├── custom-assertions
│   │   └── elementCount.js 自定義的斷言方法
│   ├── nightwatch.conf.js nightwatch的配置文件
│   ├── reports 
│   │   ├── CHROME_61.0.3163.100_Windows NT_edit.xml
│   │   └── CHROME_61.0.3163.100_Windows NT_test.xml
│   ├── runner.js  用來起服務
│   └── specs
│       └── test.js 測試用例

 

3. nightwatch.conf.js

require('babel-register')
var config = require('../../config')

module.exports = {
  src_folders: ['test/e2e/specs'], // 測試用例存放目錄
  output_folder: 'test/e2e/reports', // 測試報告存放目錄
  custom_assertions_path: ['test/e2e/custom-assertions'], // 自定義斷言方法存放地址  

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path, // selenium服務的地址 
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path // webDriver的地址，可以添加多個，這里只用了chrome的
    }
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

 

4. runner.js

啟動服務的js

process.env.NODE_ENV = 'testing'
var server = require('../../build/dev-server.js') 

server.ready.then(() => {
  // 1. start the dev server using production config
  // 2. run the nightwatch test suite against it
  // to run in additional browsers:
  //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
  //    2. add it to the --env flag below
  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
  // For more information on Nightwatch's config file, see
  // http://nightwatchjs.org/guide#settings-file
  var opts = process.argv.slice(2)
  if (opts.indexOf('--config') === -1) {
    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
  }
  if (opts.indexOf('--env') === -1) {
    opts = opts.concat(['--env', 'chrome'])
  }

  var spawn = require('cross-spawn')
  var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })

  runner.on('exit', function (code) {
    server.close()
    process.exit(code)
  })

  runner.on('error', function (err) {
    server.close()
    throw err
  })
})

 

5. 測試用例

specs文件夾中都是測試用例，舉個例子test.js：

module.exports = {
  'default e2e tests': function (browser) {
    const devServer = browser.globals.devServerURL

    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      // 查看有否搜索框，並且賦值
      .assert.elementPresent('input')
      .setValue('input', 'j')
      // 查看有否搜索按鈕，並且點擊
      .assert.elementPresent('.contact-list-wrap:nth-child(1) button')
      .pause(1000)
      .click('.contact-list-wrap:nth-child(1) button')
      .pause(1000)
      // 查看搜索后的第一項
      .assert.elementPresent('.el-table')
      .click('.el-table .el-table__row:nth-child(1)')
      .pause(3000)
      // 3秒后關閉彈窗
      .click('.el-dialog__close')
      .pause(3000)
      // 3秒后點擊刪除
      .click('.el-table .el-table__row:nth-child(1) .el-button--default')
      .pause(1000)
      // 1秒后取消刪除
      .click('.el-message-box__btns .el-button--default')
      .pause(3000)
      // 3秒后點擊刪除
      .click('.el-table .el-table__row:nth-child(1) .el-button--default')
      .pause(1000)
      // 1秒后確認刪除
      .click('.el-message-box__btns .el-button--primary')
      .pause(5000)
      .end()
  }
}

調用命令 node test/e2e/runner.js即可啟動服務，等幾秒后，會自動打開chrome進行測試。

 

關於測試的前端頁面可以看這里：http://www.cnblogs.com/junhua/p/7675811.html