Test UI with CasperJS

最近停筆了好一陣子,真的是太多事了(這次是真的...orz),加上工作內容與先前差異頗大,實在有太多新東西需要學,再加上自己還處於相當廢的狀態,所以應該是寫不出什麼有營養的東西。不過身為寫手的魂魄(?),不定期寫寫東西實在很難過,所以看看能不能抓一下平常用到的東西,試著擠出一點東西來,如果沒什麼價值的話就略過吧,反正我也只是寫爽而已(誤

這邊想稍微提一下前端測試的部份,因為近期大量的推廣,寫測試幾乎已成了目前Programmer必備的工作之一,一來可以提昇程式品質,一來也便於除錯。有關測試的東西就跳過吧,因為那也不是我今天想提的部份。關於網頁前端的測試,目前有作的是API拿資料的部份,再來就是UI。

API的測試,基本上跟其他語言如PHP, Java or C++用的方式與工具都類似,JS方面也有不少相似的工具(Jasmine, QUnit,寫法上也差不多,就是寫測試邏輯然後驗證。

不過UI測試對我來說就有點陌生了,因為之前從來沒有寫過(也不知道該怎麼下手),問了一下強者同事,有提到一般都是用selenium,不過因為我天生反骨(誤),想找個可以在CLI上面簡單作掉的東西,在尋尋覓覓之後就找到今天的重點(好久XD)- CasperJS

到底CasperJS好在哪邊,原因無他,就是酷
因為我也只用過它而已...orz

CasperJS其實是基於PhantomJS所建構出來的工具,所以得稍微提一下什麼是PhantomJSA headless Webkit with Javascript API,我不太知道該怎麼解釋headless(無頭!?),不過簡單說就是它提供了一個沒有殻的webkit,它的行為跟一般瀏覽器一樣,只是沒有畫面而已XD。不過因為可以透過JS API去模擬瀏覽器行為,跟程式對接之後就可以惡搞許多地方 :p

而CasperJS也正是透過這樣的方式,來達到透過CLI來進行UI Testing,先直接來個範例:

然後直接casperjs EXAMPLE.js就可以看到結果了,這個範例是測試Google的測試頁面,用casperjs當作關鍵字去搜尋的結果。

我們可以稍微做一點小修改,多加入測試檢查以及列出測試結果的訊息:

27: this.test.assertMatch(links[i], /[casperjs|phantomjs]/, links[i] + ' contains casperjs keyword');  
35: this.test.renderResults(true);  

assert相信大家應該都很熟悉,casperjs也同樣提供了許多Tester API可以用來測試與驗證測試結果,然後 de>renderResults就是列出測試的統計資料。這樣就是一個簡單的UI測試了,而casperjs所執行的動作就是:

  1. 連到http://google.fr
  2. 在搜尋欄位輸入casperjs以及phantomjs
  3. 抓出搜尋結果頁面的連結
  4. 檢查連結內是否含有關鍵字(casperjs or phantomjs)

大概就是這樣,透過這些phantomjs提供的API,就可以實作出使用者界面測試。目前簡單的元件或頁面顯示應該都可以輕鬆做到,不過某些特別的行為,可能還得用特別的寫法才有辦法做到,不過我也剛入門而已,之後如果再陸續更新一下心得吧 :p

phantomJS看起來也是可以拿來惡搞的好物...kekeke

Ferrari Lee

Read more posts by this author.

Subscribe to Ferrari != Ferrari

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!