[AutomationTest] selenium + cucumber + ruby (1)

這一篇來講講怎麼用 selenium + cucumber 來幫 tw.yahoo.com 來做測試

========= 安裝 =========

我是用 mac
所以 我很快的帶過安裝的部分
gem install rails
gem install cucumber-rails
gem install selenium-cucumber
gem install selenium-webdriver
gem install Selenium
gem install selenium-client

假如不知道 gem 是什麼的朋友
請先去 google 一下

然後 我還裝了 firefox
跟他的兩個 plugin: firebug, firepath

========= 準備工作 =========

1. 開 console，找個資料夾，cd過去

2. 鍵入 selenium-cucumber gen
他會問你 我要做!@#@!#$!@#$!@#$ 事情囉
你確定嗎？
就按下 enter 吧

然後 你會發現多了一個 feature 的 folder

3. cd 進去 feature folder
找一個副檔名是 .feature 的檔
通常是 my_first.feature
用你喜歡的 IDE 或 editor 打開它
我是用 eclipse

你假如發現了 有其他兩個 project
是 android_auto, iOS_auto
沒錯
大概就是他的名字暗示的
以後我再寫怎麼在 android 與 iOS 上 做自動化測試吧～

4. cucumber 簡單的介紹
cucumber 系列的東西就是由這三個主要的詞組成：Given, When, Then
怎麼用呢？
大概可以先這樣理解：
Given 後面寫的是前條件
When 是操作
Then 是預期結果

至於 Feature 跟 scenario 是給人類看的 不影響程式與執行結果

5. 開始想測試
一開始說 我要幫tw.yahoo.com做測試
因為這是第一篇

所以先簡單的：
我想測試能用yahoo查到查台積電的股價的功能
測試場景是 從首頁進去 然後去查詢台積電股價
所以我要打開首頁
按下股市
輸入台積電
螢幕上就會出現2330台積電

6. 把剛剛想的東西翻譯成 given-when-then

以下是程式碼：

Feature: 用yahoo查到查台積電的股價

Scenario: 從首頁進去 然後去查詢台積電股價
Given I navigate to "https://tw.yahoo.com"
When I click on link having text "股市"
When I enter "台積電" into input field having xpath ".//*[@id='stock_id']"
When I click on element having xpath ".//*[@id='ystkglonav']/table/tbody/tr[3]/td/table/tbody/tr/td[4]/label/input"
Then link having text "2330台積電" should be present

7. 執行

回到 console
在 feature folder 的同一層 打 cucumber

你會看到一個 firefox 跳出來
每一步 都會自動在 firefox 上實際的動作
最後
就可以看到成功了

8. 結束

最後 會有一個 firefox 的 instance 還在跑
記得把它結束掉

其實這也不影響
只是多了就...很煩

========= Retrospective =========

各位一定覺得奇怪:

a. 在第 6 步，翻譯是怎麼翻的?
其實是用 selenium-cucumber 的 pre-defined steps
做什麼動作 就去找相對的操作
Given When Then 其實可以交互使用

b. 你怎麼知道 XPath ?
用 firefox 開你要測試的網頁
點開右上角的這個蟲蟲

然後下面會有一個分隔視窗跑出來
再點蟲蟲隔壁的箭頭

再去找你想知道的元件 ex: 按鈕 之類的
旁邊就會跳出那個元件的XPath (or id…etc)

再搭配上面提到的 pre-defined steps 填入
就可以了～

接下來會慢慢深入 開始寫一些 ruby 來做自動化測試囉～～～
敬請期待 :)

有任何問題 歡迎在下面留言提出～～～