Pages

搜尋此網誌

2015年4月13日 星期一

jenkins + docker for e2e test: 自動化測試的最後一哩

jenkins + docker for e2e test: 自動化測試的最後一哩

enter image description here

講到測試最常也最方便的就是 unit test 或是 API test,因為最單純,沒有環境問題,簡單又有效,以往的測試大部份都在這範圍。

假若我們要進行前端測試,相對的就複雜許多,簡單羅列一下,我們需要:

  1. 真實的運行環境。
  2. 不同瀏覽器。
  3. 可存取測試標的的網路。

撇除掉前端測試碼的撰寫不談,若要開始我們需要上述三樣東西都到位,才能進行前端測試。

當然,若只是要在開發還進行基本上沒什麼問題,但若要在 server 環境上進行就是問題了,如:

  1. 沒有 UI 介面。
  2. 沒有 browser。
  3. server 有網路存取限制。

在測試環境準備上,當然還是盡量單純最好,不然一旦 test fail 除了程式問題本身,還要排除環境網路問題,那就失去測試的意義,雜訊也就太多,反而會讓開發者對結果不信任。

至於為什麼要在 server 上執行?當然就是為了搭配 CI 進行自動化測試,確保專案呼吸正常(沒有掛掉)。

一開始,當然還是希望找現成的 service 來解決問題,比較過很多方案,看上的是:

基本上是不錯的服務,但受限於網路的限制,所要測試的服務主機沒辦法令外部存取,若要使用這服務,我們頂多只能讓他對有對外開放的 production 環境進行測試。

Sauce Labs 測試內部 Application

感謝 Ke-Ren Dai (Andy) 提供的意見:

Sauce Labs 可以透過 Sauce Connect 來測試內部的 Application
https://docs.saucelabs.com/reference/sauce-connect/

若對 test 有所瞭解的就知道這樣是不行的,因為:

  1. production 是在運行的服務,假設因為 test 過程造成 crash 是誰的問題?
  2. test 很重要得一環就是要能夠在同樣的環境同樣的資料反覆進行驗證,如此才有基礎確認是否正常。
  3. 測試環境牽扯太多,CI server 呼叫 saucelabs 對 production server 進行測試,這樣的情況就有三個參與者。
  4. test code 可能跟測試標的不是同一個版本。

基於上述原因,可以的話當然還是希望 server 可以像開發環境一樣,多種願望一次滿足,該如何滿足?還好現在有 docker。

只要處理好 ui test 環境問題,整個自動化測試大致上就完成大部份,在實作這部分時,這邊嘗試了兩個方案,在開始之前我們需要先把 docker 環境裝好。

prepare docker

安裝 docker:

 wget -qO- https://get.docker.com/ | sh

設定 jenkins 可以取 docker:

 sudo usermod -aG docker jenkins

安裝完之後就可以透過 docker 安裝 chrome 的環境,在實作的過程中,嘗試兩個 repository,第一個是 Selenium 官方的 docker:

Selenium 官方的 docker

網址:

安裝步驟:

sudo su jenkins
cd ~
git clone https://github.com/SeleniumHQ/docker-selenium.git
cd docker-selenium/
docker pull ubuntu:14.04
VERSION=local make build

啟動服務:

docker run -d -p 4444:4444 selenium/standalone-chrome:2.45.0

如此,基本上就等於把把測試環境準備好了,不過就我自己嘗試的結果,在我的開發環境: macbook 上測試正常,但在 ubuntu server 沒有辦法正常運作,若有興趣嘗試的可以試試看,畢竟是 selenium 官方製作的 docker,若有確實執行成功,或是有找到解法麻煩讓我知道 :D。

不過皇天不負苦心人,讓我在第二次就找到可正常運作的。

docker-selenium-chrome

網址:

docker-selenium-chrome

安裝步驟:

sudo docker pull phoey/docker-selenium-chrome
docker run --privileged -p 4444:4444 -d phoey/docker-selenium-chrome

實測結果,不管是在我的 macbook 還是 ubuntu server 上都可以運作,大快人心。

除錯

既然是 ui test 若沒有看到畫面怎麼知道錯在哪裡?一則是當有發生 test 沒有辦法通過時,進行螢幕截圖,二則是為 docker 安裝 vnc,在 Selenium 官方的 docker 就有內建,所以可以作為開發環境除錯使用,若要在 docker-selenium-chrome 加上 vnc 的相關功能也不是不行,剛好可以趁這機會了解 docker 囉!

最後再推薦一個好用的 jenkins plugin 可以注入環境參數,更直覺的進行 task 設定,因為在開發過程中除了 jenkins 運行 ui test 之外,也會有在自己的環境進行開發測試的情形,利用環境變數改變執行參數是一個不錯的選擇,給大家參考。

jenkins plugin

https://wiki.jenkins-ci.org/display/JENKINS/EnvInject+Plugin

最後附上 protractor.conf.js 相關設定檔給大家參考

protractor.conf.js

require('coffee-script/register')

var baseUrl = 'http://' + (process.env.HTTP_IP || 'localhost') + ':' + (process.env.HTTP_PORT || '1337');
var seleniumAddress = 'http://' + (process.env.SELENIUM_IP || 'localhost') + ':' + (process.env.SELENIUM_PORT || '4444') + "/wd/hub";
var config = {
  framework: "mocha",
  seleniumAddress: seleniumAddress,
  capabilities: {
    browserName: "chrome",
  },
  specs: [
    //可在 init 啟動你要測試的 server
    "test/init/e2e/init.coffee",
    //開始進行 UI testing
    "test/e2e/**/*.spec.coffee"
  ],
  baseUrl: baseUrl,
  ignoreSynchronization: true
}

還有 jenkins 的 task command

jenkins 的 task command

rm -rf node_modules 2> /dev/null 
npm install
grunt
docker run -d -p 4444:4444 selenium/standalone-chrome:2.45.0 || true
protractor protractor.conf.js

結論

不管別人怎麼想,我個人認為 test 是軟體開發中很重要的一環,且跟開發過程應該是不可分割,test 本來就是開發的一部分,自動化測試就像專案的心跳一樣,定時運作可以讓你確保目前的專案是健康的。

就 test 的實作來說一般還是從後端開始,因為環境不複雜,測試環境的建置相對簡單,而前端測試就是最後一哩路了,這個時代還好我們有 docker 可以很快解決測試環境建置的問題,不用再額外開一台機器等在那,也可以用程式控制,實在是非常的方便!

希望透過這篇文章可以讓大家對前端自動化測試有一定的瞭解跟實作的方向,有任何問題也歡迎討論囉。

張貼留言