vue e2e 测试

1、vue e2e测试概述

e2e 测试 

端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

典型 e2e 测试框架对比

名称	断言	是否跨浏览器支持	实现	官网	是否开源
nightwatch	assert和 chai expect	是	selenium	http://nightwatchjs.org/	是
cypress	chai、chai-jQuery等	否	chrome	https://www.cypress.io/	是
testcafe	自定义断言	是	非基于selenium	https://devexpress.github.io/testcafe/	是
katalon	TDD/BDD	是	未知	https://www.katalon.com/katalon-studio/	是

• nightwatch 需要安装配置selenium ，selenium-serve 需要安装 jdk；
• crypress 安装方便，测试写法和单元测试一致，只支持chrome类浏览器，有支持其他浏览器的计划；
• testcafe 安装方便，测试写法和之前的单元测试差异比较大，编写测试用例时只能选择到可见的元素；
• katalon 不是测试框架，是IDE，比较重，并且不开源，测试用例不是用js编写但是可以通过chrome插件录测试用例。

转载：https://blog.csdn.net/qq_39300332/article/details/81197503

 

2、vue e2e测试实例 —— nightwatch(基于selenium)

项目的搭建，新建 vue-cli 时选择使用 E2E Testing > Nightwatch (selenium-base) （vue 版本为3.3.0）。

在已有项目添加e2e测试：

vue add @vue/e2e-nightwatch

package.json自动注入命令

"test:e2e": "vue-cli-service test:e2e"

命令行参数

Usage: vue-cli-service test:e2e [options] 

--url        run e2e tests against given url instead of auto-starting dev server
--config     use custom nightwatch config file (overrides internals)
-e, --env    specify comma-delimited browser envs to run in (default: chrome)
-t, --test   specify a test to run by name
-f, --filter glob to filter tests by filename

插件 nightwatch 配置默认运行 chrome,如果e2e测试要在其中浏览器运行，需要在项目根目录下添加 nightwatch.config.js或nightwatch.json 文件配置其他浏览器，将配置合并到内部 nightwatch配置中。

或，可以使用上述 -config 选项将内部配置替换为自定义配置文件。

有关配置选项以及如何设置浏览器驱动程序，阅读 —— http://nightwatchjs.org/gettingstarted/#settings-file

默认文件地址为 项目根目录下 /tests/e2e/specs 下以 .js 结尾的所有文件。

module.exports = {
  'default e2e tests': browser => {
    browser
      .url(process.env.VUE_DEV_SERVER_URL)
      .waitForElementVisible('#app', 5000)
      .assert.elementPresent('#login')
      .assert.containsText('.title', 'GIS平台')
      .end()
  }
}

上诉代码，打开浏览器导航到项目运行 url ,等待 5000毫秒，使元素在页面可见，检测渲染出的页面id 为 login的元素是否存在，class为 title 的元素是否包含 “GIS平台” 字段。

更多API查询：http://nightwatchjs.org/api