前端E2E测试略解

大家好，欢迎来到IT知识分享网。

什么是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('') .should('have.value', '') }) })