一、创建测试项目
首先通过@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 nightwatch
npm 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下载地址:
找到与我们浏览器版本相一致的文件点击下载(可通过notes.txt文件查看chromedriver所对应chrome版本),下载完成后将下载的压缩包解压改名后放在node_modules/_chromedriver@98.0.1@chromedriver/lib路径下
完成后,再再再再一次重新测试能否进行e2e测试