前端E2E测试略解

2023-08-21 06:42| 来源: 网络整理| 查看: 265

什么是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 -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]') }) })

【本文地址】

公司简介

联系我们