前端E2E测试两大框架对比

lsekfe

　什么是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，准备工作多，但 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('fake@email.com') 　　      .should('have.value', 'fake@email.com') 　　  }) 　　})