#學習筆記#e2e學習使用（一）

本文僅限於記錄本人學習的過程，以及怎麼踩的坑，是如何解決的。邏輯確定是混亂的，有用之處會抽出共通另行發帖。

 

最終目標：要運用於Vue項目中，進行功能測試甚至自動化測試。

 

1、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支持

 

2、項目搭建

　0、安裝jdk【點擊進入】

　　查看默認安裝的openJDK：#rpm -qa | grep openjdk

 

  一、建立Git知識庫，克隆到本地

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

　　

 

 二、進入項目根目錄，搭建vue項目

　#vue init webpack vue-e2eDemo

　

 

  三、first cmmit

　還不會git命令直接提交，採用在VSCode中提交。

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

 

   四、 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 安裝一波了。

 

二、安裝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命令再執行一遍。

 

三、再次運行e2e：

#npm run e2e

 

四、無限多的坑：

無用功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：修改配置文件

  

五、最終：

• 下載安裝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」。

 

六、編寫測試代碼、測試用例

見#學習筆記#e2e學習使用（二）

  

資料：

一、怎麼爲大中型的vue.js項目編寫e2e測試？

二、前端自動化測試是幹嗎的？

三、搭建本身的前端自動化測試腳手架（一）

四、Centos7 JDK8的安裝配置 

五、使用nightwatch進行E2E測試中文教程