欢迎来到Introzo百科

Introzo百科

当前位置：网站首页 > 技术 > VUE项目的e2e自动化测试超详细安装过程（保姆级）

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

日期：2023-09-27 13:43

目录

一、创建测试项目

二、配置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://www.introzo.com/index.html

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

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

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

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

谷歌浏览器ChromeDriver下载地址：

http://www.introzo.com/mirrors/chromedriver/

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

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

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

相关文章

最近发表

猜你喜欢

关灯