#学习笔记#e2e学习使用（一）

本文仅限于记录本人学习的过程，以及怎么踩的坑，是如何解决的。逻辑肯定是混乱的，有用之处会抽出共通另行发帖。

最终目标：要运用于Vue项目中，进行功能测试甚至自动化测试。

一、e2e概念

• 理解：end to end，端到端，前端到后端整个过程的测试（也叫功能测试/连接测试）。

　　　　　 主要是测业务，绝大部分情况是指在浏览器上对某个网站进行某个的操作，比如：登录。

　　　　　 模拟用户操作。

• 特征：e2e是由Nightwatch + Selenium 搭建的（未做深入考究别认真）测试环境。

　　　　　　把整个系统当作一个黑盒；

　　　　　 测试人员模拟真实用户在浏览器中操作UI；

　　　　　 测试出的问题可能是前端也可能是后端导致的。

　　　　 -- Nightwatch 是一款 Test Runner，可以简单理解为Selenium 的控制软件，它将提供一系列接口供我们编写测试案例，同时也是与现有前端项目结合的桥梁；

　　　　 -- Selenium 是一款 Web 的自动化测试环境，它将帮我们搭建好测试环境，调取系统安装的浏览器，在浏览器里执行一切自动化行为。

• 运行过程：

　　　　1.  测试编写测试脚本

　　　　2.  runner.js 引入依赖、浏览器内核并运行脚本

　　　　3.  nightwatch.js 在后台打开一个 java 进程，用于操作浏览器

　　　　4.  java 进程收到脚本的指令

　　　　5.  java 进程操作浏览器

• 流程一览：

　　　  1.  检查环境（node.js、vue-cli、【webpack】、jdk、）

　　　  2.  使用 Vue + Webpack 构建vue项目：#vue init webpack vue-project ，选择e2e、nightWatch

　　　  3.  npm run e2e

　　　  4.  编写测试代码，测试用例，运行测试

　　　  5. 结果分析

• 为什么需要jdk？

　　　　运行过程中，java进程需要jdk支持

二、项目搭建

　0、安装jdk【点击进入】

　　查看默认安装的openJDK：#rpm -qa | grep openjdk

1、创建Git知识库，克隆到本地

　　#git clone https://github.com/MrLittlepirate/vue-e2eDemo.git

　　

2、进入项目根目录，搭建vue项目

　#vue init webpack vue-e2eDemo

　

3、first cmmit

　还不会git命令直接提交，采用在VSCode中提交。

　pull (拉取) --> commit all（提交全部） --> push （推送）

4、 npm run e2e

　 终端，转到项目根目录，运行命令

 # npm run e2e　

报错：

Error： Cannot find module 'chromedrive'

　　

　　

　　

　原因：

　   没有安装chrome驱动

解决：

解决chorm驱动问题：

   #npm install chromedriver　　

仍然报错：

　　ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.112:443

　　可能是不能翻（F）墙（Q）的问题？？？【百度出来的额】

　换命令：　

　　#cnpm install chromedriver

　　

再次运行npm run e2e，报错如下：

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?

　　

此时我认为错误原因是：虚拟机中 centos7 没有安装Chrome浏览器导致的。目前只有自带的firefox，且还不打算下载Chrome，所以决定把浏览器的连接修改为firefox：

配置文件： /test/e2e/runner.js

 if (opts.indexOf('--env') === -1) {
    // opts = opts.concat(['--env', 'chrome'])   原来的注释掉
    opts = opts.concat(['--env', 'firefox'])
 }

再次npm run e2e，报错如下：

　　

仔细检查了一下/test/e2e/runner.js配置文件，发现之前修改Chrome时还有一处需要改动【其实完全没有必要】：

 selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    // cli_args: {   原来的注释掉
    //   'webdriver.chrome.driver': require('chromedriver').path
    // }
  },

由于 selenium 打开火狐浏览器不需要驱动（只需要正确安装即可正常启动），故而不需要install 火狐driver。

运行仍报相同的错。嗯，没办法了，只能先把 jdk 安装一波了。

2、安装JDK1.8 Linux64bit【点进进入“正经”的安装过程】

// =====  如果你不是我本人，完全没必要看这部分 =========

(1) Oracle 官网下载时，需要登录账号接收协议（我是没有跳过账号一这步），忙活了一阵子，去搜了免费分享的JDK，感谢大佬。

JDK8下载|JDK1.8下载可选择window版和linux版

(2) 综合这两个教程安装的：

Centos7 JDK8的安装配置 ：解压缩 && 配置环境变量JAVA_HOME

在Centos下用alternative命令切换各个版本的jdk的方法 ：可以不卸载Linux自带的OpenJDK，只切换你当前要用的版本就行。

正确操作步骤：

　　【在opt目录下解压缩 --> 配置JAVA_HOME环境变量 --> 用alternatives命令：登记个新的jdk在 alternatives 里面 --> alternatives --config java 切换要用的JDK】

实际操作步骤截图（顺序其实有误的，无知踩坑，最终ok）：

step1：拷贝JDK压缩包到 /usr/java 

Step2：用alternatives命令

Step3：切换JDK

step4:查看java版本

【巨坑：都还没有解压缩安装，怎么可能会有此命令哼哼！】

step5：配置JAVA_HOME环境变量：

在/etc/profile 文件末尾新增以下内容：

#JDK1.8
export JAVA_HOME=/opt/jdk1.8.0_11
export JAVA_BIN=/opt/jdk1.8.0_11/bin
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export JAVA_HOME JAVA_BIN PATH CLASSPATH

step6：输入重启命令：reboot

step7：重启后打开终端输入 java -version查看，仍然报【bash java：未找到命令....】的错误。

step8：解压缩安装JDK1.8【应该在最开始就做这个操作】

step9：将解压缩后的文件夹【jdk1.8.0_11】移动到  /opt 目录下

　　—— 因为之前配置的JAVA_HOME路径是  /opt/jdk1.8.0_11

step10: java -version

终于OK了，被蠢到了，无语凝噎。

注：如果还是不对，就把之前的alternative命令再执行一遍。

3、再次运行e2e：

#npm run e2e

4、无限多的坑：

无用功1：之后我又下载了selenium-server-sandalone-3.8.1.jar   和  selenium-html-runner-3.8.1.jar，用java -jar selenium-server-sandalone-3.8.1.jar 命令安装。install --save-dev selenium    install --save-dev selenium-standalone  等命令没用。

无用功2：更新firefox

无用功3：修改配置文件

5、最终：

• 下载安装Chrome浏览器：Centos7 yum安装chrome浏览器
• 重新建了一个vue项目【vue install webpack my-project】，没有修改任何配置文件，创建的时候 chromedriver 安装失败了，所以需要单独install：

#npm install chromedriver　　

在下一步运行e2e之前，我还用了这两个命令，虽然不知道有没有什么用：

#npm install selenium-service
#npm install nightwatch

• 运行e2e：

#npm run e2e

　　报错：Error：socket hang up 

       

　   大致意思就是selenium还是没有成功启动浏览器，最后一句应该是断开/挂起了。

　　解决：

　　　　换一个账号（非root权限）登录，这下npm run e2e就行了！！

我用的虚拟机，习惯不好一直用的root账号，这下撞墙了—— Chrome默认不能以root身份运行 Google Chrome浏览器，请以普通用户身份启动“Google Chrome浏览器“。

有关如何允许 root 启动 Google Chrome浏览器，请点击“设置root启动Chrome”。

6、编写测试代码、测试用例

见#学习笔记#e2e学习使用（二）

资料：

1、怎么为大中型的vue.js项目编写e2e测试？

2、前端自动化测试是干嘛的？

3、搭建自己的前端自动化测试脚手架（一）

4、Centos7 JDK8的安装配置 

5、使用nightwatch进行E2E测试中文教程