前端E2E测试略解 | 您所在的位置:网站首页 › e2e测试框架 › 前端E2E测试略解 |
什么是E2E
E2E(End To End)即端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。 典型E2E测试框架对比 名称断言是否跨浏览器支持实现官网是否开源nightwatchassert 和 Chai Expect是seleniumhttp://nightwatchjs.org/是cypressChai、Chai-jQuery 等否Chromehttps://www.cypress.io/是testcafe自定义的断言是不是基于 selenium 实现https://devexpress.github.io/testcafe/是katalonTDD/BDD是未知https://www.katalon.com/katalon-studio/否 nightwatch 需要安装配置 selenium,selenium-server需要安装jdk(Java Development Kit)。cypress 安装方便,测试写法和单元测试一致,只支持 Chrome 类浏览器,有支持其他浏览器的计划testcafe 安装方便,测试写法与之前的单元测试差异比较大,编写测试用例时只能选择到可见的元素katalon 不是测试框架,是 IDE ,比较重,并且不开源,测试用例不是用 js 编写但是可以通过 Chrome 插件录测试用例经过测试使用对比,nightwatch 和 cypress 是 vue 推荐的框架,社区活跃度较高,功能较为完备,开源,推荐二选一(nightwatch 需要装 jdk,准备工作多,但 AP I丰富度更高;cypress 有自己的可视化窗体,能记录运行信息,重现 bug 精品) nightwatch 1. 安装 npm i selenium-server nightwatch chromedriver -Dchromedriver 安装需要翻墙,很坑,如果没梯子去网上搜罗单独的包,然后改配置文件 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]') }) }) |
CopyRight 2018-2019 实验室设备网 版权所有 |