一、创建测试项目

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

vue create your_project(你的项目名)


vue2自动化测试cypress vue项目自动化测试_Babel

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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


vue2自动化测试cypress vue项目自动化测试_chrome_03

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_错误日志_05

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

第一个问题:是否使用路由的history模式?


vue2自动化测试cypress vue项目自动化测试_chrome_07

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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

vue2自动化测试cypress vue项目自动化测试_Babel_09

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_11

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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


vue2自动化测试cypress vue项目自动化测试_错误日志_13

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

二、配置Nightwatch(以chrome为演示)

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


vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_15

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

vue2自动化测试cypress vue项目自动化测试_Babel_17

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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

npm install nightwatch

npm install chromedriver

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

如果chromedriver安装失败,可使用如下命令:

cnpm install chromedriver --ignore-scripts

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


vue2自动化测试cypress vue项目自动化测试_Babel_19

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

vue2自动化测试cypress vue项目自动化测试_chrome_21

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_错误日志_23

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_25

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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


vue2自动化测试cypress vue项目自动化测试_错误日志_27

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_错误日志_29

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

vue2自动化测试cypress vue项目自动化测试_chrome_31

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

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


vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_33

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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


vue2自动化测试cypress vue项目自动化测试_错误日志_35

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

谷歌浏览器ChromeDriver下载地址:

 

vue2自动化测试cypress vue项目自动化测试_Babel_37

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_39

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

vue2自动化测试cypress vue项目自动化测试_chrome_41

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

vue2自动化测试cypress vue项目自动化测试_chrome_43

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02

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

vue2自动化测试cypress vue项目自动化测试_chrome_45

vue2自动化测试cypress vue项目自动化测试_vue2自动化测试cypress_02