[AutomationTest] selenium + cucumber + ruby (2)

作者：

請先服用 第一集

========= 前情提要 =========

在上一集裡面我用了應該是全球最短的篇幅就把 安裝 跟 執行 selenium, cucumber 講完了這一篇要開始把鹹豬手伸過去 ruby 那邊

========= 中文版 test case =========

1. 改成中文版

這是在第一集出現的程式碼：

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

我把它改成：

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

Scenario: 從首頁進去 然後去查詢台積電股價
Given 開啟yahoo首頁
When 到 "股市" 首頁去
When 輸入 "台積電" 在輸入框裡面
Then 我會看到 "2330台積電" 的股價在 "50" 到 "500" 之間
Then I close browser

是不是平易近人許多？


2. 執行看看，然後哭哭在 console 裡面，打cucumber，結果出現一堆黃字：


3. 解決黃字的方法
囧

4. Copy-and-Paste 大法

先用你的 IDE or editor 開啟 feature/step_definitions/custom_steps.rb
我是用 eclipse

然後 我們把 console 的黃字 copy 並貼到這裡來但！第一行不用貼！

並且把 “pending” 字樣 全部拿掉，後面的是註釋，也拿掉

做完以後 custom_steps.rb 會長的像這樣：


回到 console 再打一次 cucumber就綠綠的了～～～


但，我們知道，我們什麼也沒測，看看那空空如也的 firefox 吧～

6. 真的來寫 code 了

其實是這樣的，在 feature 檔裡面的 Given When Then 會去找相對應的 steps，所以 selenium-cucumber 幫你預先定義了一堆 steps (請見第一集)。
我們現在在 .feature 檔裡面，寫了一堆中文，當然也就沒有預先定義的 steps，所以我們要來自己寫了～～～～～

我們先看以下這段


這段的意思就是說，在 .feature 檔裡面，selenium-cucumber 看到”開啟yahoo首頁”的敘述，請來這裡執行。所以在第八行開始，我們要填入 ruby 的 code，讓他完成這件“開啟yahoo首頁”的事。

在寫 code 的時候，請搭配 API , API 服用 (當然，你還要會寫 ruby)。

所以...我就整個寫出來了。

以下是 custom_steps.rb 的程式碼：

require 'selenium-cucumber'Do Not Remove This FileAdd your custom steps here$driver is instance of webdriver use this instance to write your custom codeGiven(/^開啟yahoo首頁$/) do
navigate_to("http://tw.yahoo.com")
end

When(/^到 "([^"]*)" 首頁去$/) do |arg1|
click('link', arg1)
sleep 3.0
end

When(/^輸入 "([^"])" 在輸入框裡面$/) do |arg1|
element = $driver.find_element(:xpath, ".//[@id='stock_id']")
element.send_keys arg1
element.send_keys [:control, :enter]
end

Then(/^我會看到 "([^"])" 的股價在 "([^"])" 到 "([^"]*)" 之間$/) do |tsmc, low, high|
check_element_presence('link', tsmc, true)

price_css = "table>tbody>tr>td>table>tbody>tr>td>b"
element_text = get_element_text(:css, price_css)
price =  element_text.to_f

expect(price).to eq 179.5

7. 執行

成功了，拍拍手

這次 firefox 會自動關閉，假如你成功的話，所以也不要忘記你在第三步按的廣告的 browser 也可以關掉囉，以便釋放資源～

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

1. 寫程式真的不是太容易這篇文章跟 code 我寫了一天...首先 你要會 ruby不會的話 就去學到會吧～然後 第 6 步兩個 API 的連結要常常去甚至去看 github 上的原始碼看他是怎麼往下 call 的

2. 我會用下一篇來講解我們上面寫的 ruby 的程式

3. 當可以用中文寫 test case 了，PM 會不會看得懂 test case了？業務呢？行銷呢？客戶呢？test case 成為了一種文件，雙方可以在上面溝通，然後由 QA 把雙方認知翻譯成 ruby 的 code，就像上面第 6 步的內容一樣。

4. 所以，你怎麼可能還會再用 excel 管理你的 test case??


好的，以上，有問題或有建議都可以在下面留言中提出～～～～