2016年9月8日 星期四

[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 來做自動化測試囉~~~
敬請期待 :)

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

2 則留言:

  1. 可以在最後面加上:
    And I wait for 10 sec
    Then I close browser

    就可以等待十秒後自動關閉 browser

    回覆刪除