什么是E2E
典型E2E测试框架对比
1、nightwatch 需要安装配置 selenium，selenium-server需要安装jdk（Java Development Kit）。
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小编(021-64471599-8017)，我们将立即处理
