51Testing软件测试论坛

标题: 前端E2E测试两大框架对比 [打印本页]

作者: lsekfe 时间: 2021-3-26 10:03
标题: 前端E2E测试两大框架对比
　什么是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')
　　  })
　　})

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)