前端E2E测试略解

什么是E2E

E2E（End To End）即端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

典型E2E测试框架对比

名称	断言	是否跨浏览器支持	实现	官网	是否开源
nightwatch	assert 和 Chai Expect	是	selenium	http://nightwatchjs.org/	是
cypress	Chai、Chai-jQuery 等	否	Chrome	https://www.cypress.io/	是
testcafe	自定义的断言	是	不是基于 selenium 实现	https://devexpress.github.io/testcafe/	是
katalon	TDD/BDD	是	未知	https://www.katalon.com/katalon-studio/	否

1. nightwatch 需要安装配置 selenium，selenium-server需要安装jdk（Java Development Kit）。
2. cypress 安装方便，测试写法和单元测试一致，只支持 Chrome 类浏览器，有支持其他浏览器的计划
3. testcafe 安装方便，测试写法与之前的单元测试差异比较大，编写测试用例时只能选择到可见的元素
4. katalon 不是测试框架，是 IDE ，比较重，并且不开源，测试用例不是用 js 编写但是可以通过 Chrome 插件录测试用例

经过测试使用对比，nightwatch 和 cypress 是 vue 推荐的框架，社区活跃度较高，功能较为完备，开源，推荐二选一（nightwatch 需要装 jdk，准备工作多，但 AP I丰富度更高；cypress 有自己的可视化窗体，能记录运行信息，重现 bug 精品）

nightwatch

1. 安装

npm i selenium-server nightwatch chromedriver -D

chromedriver 安装需要，很坑，如果没梯子去网上搜罗单独的包，然后改配置文件

2. 配置

根目录新建nightwatch.conf.js（也可json，推荐js）：

const path = require('path');
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]')
  })
})