一、创建测试项目

二、配置Nightwatch（以chrome为演示）

一、创建测试项目

首先通过@vue/cli创建一个基于nightwatch的测试项目。（我这里使用的是@vue/cli 3.x的版本）

vue create your_project（你的项目名）

因为我们要选择e2e功能所以不采用第一种的默认预设，通过方向键选择： Manually select features（手动选择功能），然后回车

这里选择项目所需的功能特性，空格键确定。

其他功能我这里随便选择一下，大家可按需勾选，但重点要勾选：E2E Testing。然后回车

第一个问题：是否使用路由的history模式？

第二个问题：选择端到端测试解决方案。

这里我们选择第二个：Nightwatch (Selenium-based)

第三个问题：将Babel, PostCSS, ESLint等配置放在哪里?

第四个问题：将此保存为未来项目的预设?

最后回车，等待项目创建。

二、配置Nightwatch（以chrome为演示）

打开刚刚创建好的项目，首先测试下刚创建的项目能否直接进行e2e测试，在终端里输入 package.json配置文件里设定的测试命令：npm run test:e2e。然后回车

直接报错，这是因为vue-cli默认使用的nightwatch的0.9+的版本，其适用的chrome的版本很低，我们目前的浏览器都90+了，默认的还适用70+，所以我们这里不采用默认的。

在node_modules文件夹内找到nightwatch以及chromedriver的文件夹将其删除（或使用命令行删除），然后重新安装

npm install nightwatchnpm install chromedriver

如果失败报错请使用cnpm，建议使用cnpm。

如果chromedriver安装失败，可使用如下命令：

cnpm install chromedriver --ignore-scripts

安装成功后可看到nightwatch的版本为2+（nightwatch版本1.0之后就不在需要额外安装selenium server），chromedriver的版本为98+

这里我们查看我们的chrome版本：

“帮助” -> “关于Google Chrome”

注：一定确保chrome是chromedriver所对应的版本，最好都是最新版本

我们再测试下是否可以进行e2e测试

结果还是报错了，根据错误日志，我们查看node_modules/selenium-server/lib/runner路径下的selenium-server-standalone-3.141.59.jar是否存在及正常。

结果显示文件损坏，我们重新去下载对应版本

http://selenium-release.storage.googleapis.com/index.html

下载完成后将下载文件替换原有文件

再重新测试能否进行e2e测试

结果还是报错了，再看错误日志，查看node_modules/_chromedriver@98.0.1@chromedriver/lib路径下的chromedriver文件夹里的chromedriver.exe

结果发现该目录下并无对应的chromedriver文件夹，所以我们去下载对应版本的chromedriver.exe

谷歌浏览器ChromeDriver下载地址：

http://npm.taobao.org/mirrors/chromedriver/

找到与我们浏览器版本相一致的文件点击下载（可通过notes.txt文件查看chromedriver所对应chrome版本），下载完成后将下载的压缩包解压改名后放在node_modules/_chromedriver@98.0.1@chromedriver/lib路径下

完成后，再再再再一次重新测试能否进行e2e测试

最终在我们不懈努力下终于运行成功！！！

VUE项目的e2e自动化测试超详细安装过程（保姆级）相关推荐

SAS 9.4 的超详细安装过程（保姆级教程）（含安装包+常见问题解决）
目录:SAS 9.4 的超详细安装过程一.安装前的准备 1.1 环境准备 1.2 安装包分享(解压密码见最后) 二.安装过程 2.1 下载解压完成 2.2 点击setup.exe安装 2.3 以管理 ...
oracle-19c超详细安装过程-windows11系统
一.下载安装包二.安装oracle 注意:安装到42%是等待时间较长(可能20-30分钟),耐心等待三.运行测试安装是否成功注意:在oracle19c中scott用户默认不存在,需要导入, 如果 ...
MongoDB超详细教程（保姆级）
MongoDB 一.简介 1. 简单介绍 MongoDB是一个基于分布式文件存储的数据库由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非 ...
mysql2008数据库配置_SQL Server 2008 R2 超详细安装图文教程
这篇文章主要介绍了SQL Server 2008 R2 超详细安装图文教程,需要的朋友可以参考下一.下载SQL Server 2008 R2安装文件二.将安装文件刻录成光盘或者用虚拟光驱加载,或者 ...
appserv怎么安装mysql_AppServ怎么安装？AppServ 8.6.0 64位图文超详细安装教程(附下载)...
AppServ是一款著名的PHP架站工具组合包,来自泰国的作者将网络上的免费架站资源重新整合包装成为一个安装程序,AppServ 所包含的软件有:Apache.Apache Monitor.PHP.M ...
我的Go+语言初体验——（1）超详细安装教程
我的Go+语言初体验--(1)超详细安装教程 "我的Go+语言初体验" | 征文活动进行中- Go+ 是什么?为数据而生,实现教学.工程与数据的 "三位一体". ...
Burpsuite介绍及2022.8.2版本超详细安装教程（图文版）
Burpsuite介绍及2022.8.2版本超详细安装教程(图文版) 文章目录 Burpsuite介绍及2022.8.2版本超详细安装教程(图文版) Burpsuite是什么? Burpsuite环境 ...
DynaSLAM超详细安装配置运行ubantu20.0.4+opencv2.4.11+tensorflow1.4.0
DynaSLAM超详细安装配置运行ubantu20.0.4+opencv2.4.11+tensorflow1.4.0 注:我现在ubantu的环境是基于可以运行ORB SLAM 2和ORB SLAM3 ...
Hadoop集群安装和搭建（全面超详细的过程）
Hadoop集群安装和搭建(全面超详细的过程) 文章目录 Hadoop集群安装和搭建(全面超详细的过程) 前言一.虚拟机的安装二.Linux系统安装 1.环境准备 2.虚拟机安装三.Centos ...

VUE项目的e2e自动化测试超详细安装过程（保姆级）

一、创建测试项目

二、配置Nightwatch（以chrome为演示）

VUE项目的e2e自动化测试超详细安装过程（保姆级）相关推荐

最新文章

热门文章