什麼是E2E： E2E（End To End）即端對端測試，屬於黑盒測試，通過編寫測試用例，自動化模擬使用者操作，確保元件間通訊正常，程式流資料傳遞如預期。

典型E2E測試框架對比

1. nightwatch 需要安裝配置 selenium，selenium-server需要安裝jdk（Java Development Kit）。
2. cypress 安裝方便，測試寫法和單元測試一致，只支援 Chrome 類瀏覽器，有支援其他瀏覽器的計劃
3. testcafe 安裝方便，測試寫法與之前的單元測試差異比較大，編寫測試用例時只能選擇到可見的元素
4. katalon 不是測試框架，是 IDE ，比較重，並且不開源，測試用例不是用 js 編寫但是可以通過 Chrome 外掛錄測試用例

經過測試使用對比，nightwatch和cypress是vue推薦的框架，社群活躍度較高，功能較為完備，開源，推薦二選一（nightwatch需要裝jdk，準備工作多，但API豐富度更高；cypress有自己的視覺化窗體，能記錄執行資訊，重現bug精品）

nightwatch

1. 安裝

npm i selenium-server nightwatch chromedriver -D

chromedriver 安裝需要翻牆，很坑，如果沒梯子去網上搜羅單獨的包，然後改配置檔案

2. 配置
根目錄新建nightwatch.conf.js（也可json，推薦js）：

module.exports = {
  // 測試檔案入口
  src_folders: ['tests'],
  // 輸出報表路徑
  output_folder: 'reports',

  // selenium配置
  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    // selenium log輸出
    log_path: 'reports',
    port: 9090,
    cli_args: {
      'webdriver.chrome.driver'
 
: require('chromedriver').path,
      'webdriver.gecko.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      launch_url: 'http://localhost',
      selenium_port: 9090,
      selenium_host: 'localhost',
      silent: true,
      screenshots: {
        enabled: false,
        path: ''
      }
    },

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

3.測試用例
新建tests資料夾，在裡面新建test.js，內容如下：

module.exports = {
  'Demo test Baidu' : function (browser) {
    browser
      .url('www.baidu.com')
      .waitForElementVisible('body', 1000)
      .setValue('input[name=wd]', 'NightWatch')
      .click('#su')
      .pause(1000)
      .assert.containsText('#container', 'NightWatch')
      .end();
  }
};

4. 執行
①推薦在package.json中配置

"scripts": {
    "test": "./node_modules/.bin/nightwatch --env"
  },

就可以直接 npm test，也可以在shell中手動。
②根目錄新建entry.js（名字自起）

require('nightwatch/bin/runner.js');

之後shell中node entry.js

cypress

1. 安裝

npm install cypress --save-dev

2. 啟動

./node_modules/.bin/cypress open

可新增npm scripts

3. 寫測試用例

touch {your_project}/cypress/integration/simple_spec.js

describe('My First Test', function() {
  it("Gets, types and asserts", function() {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it and verify that the value has been updated
    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]')
  })
})