vue-cli下e2e初探_vue-cli-service test:e2e-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41337100/article/details/108235365

本文介绍了在vue-cli4环境下如何配置和使用e2e测试工具Nightwatch。文章详细阐述了Nightwatch与Selenium的关系，如何在package.json中添加命令，以及创建自动化测试脚本的目录结构。通过一个打开百度并搜索的测试案例，讲解了browser对象的使用，包括Expect、Assert、Commands和WebDriver Protocol四个API部分。最后，提到了动态验证码登录场景的测试处理，并提醒了关于选择特定元素的CSS选择器技巧。

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

vue-cli4集成了watchNight，只需要npm安装本身和自动测试的驱动器就行。虽然nightwatch是基于Selenium Server，但是新版的nightwatch已经不需要再单独引入了。
```
npm install nightwatch
npm install chromedriver
npm install geckodriver
```
然后在package.json里面增加命令。我这里有两种情况，项目生成之后按照第一步的步骤，再安装watchNight，"e2e": "nightwatch --env chrome"并且运行之后会在根目录下自动生成nightwatch.conf.js。
另一种是一种是项目创建的时候就选择了导入了watchNight，此时是vue-cli-service test:e2e，也不需要经过第一步，也不会生成nightwatch.conf.js在根目录，因为生成在了node_moudles里面。
接下来再根目录下创建文件夹，目录结构大致如下：runner.js可以进行配置，reports是返回的报告，而specs里面则是自动化脚本，会依次执行。

如果是手动建立的文件，记得去改配置里的地址位置：
```
  src_folders: ['tests/e2e/specs'],
  output_folder: 'tests/e2e/reports',
  page_objects_path: 'tests/e2e/page-objects',
  custom_assertions_path: 'tests/e2e/custom-assertions', //可用于Nightwatch测试的自定义断言。
  custom_commands_path: 'tests/e2e/custom-commands',
```
第一个测试文档可以用打开百度进行测试，选择的都是id，运行之后就能看到百度被打开，然后输入nightwatch，并且被搜索了。
```
module
```