vue e2e 测试

最新推荐文章于 2025-06-26 15:07:38 发布

叶子10086

最新推荐文章于 2025-06-26 15:07:38 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端菜鸟日结随笔小记

本文链接：https://blog.youkuaiyun.com/iceice_L/article/details/89359670

前端菜鸟同时被 3 个专栏收录

10 篇文章

订阅专栏

随笔小记

8 篇文章

订阅专栏

日结

2 篇文章

订阅专栏

本文介绍了Vue的端对端(e2e)测试，重点关注使用Nightwatch和Selenium进行测试。文章对比了不同e2e测试框架，如Cypress和TestCafe，然后详细阐述了如何在Vue项目中配置和使用Nightwatch，包括添加测试命令、配置文件和测试用例的编写。最后，文章提供了一些Nightwatch API的参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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