[AutomationTest] selenium + cucumber + ruby (3)

請先服用第一集、第二集。

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

我們用中文寫了一個可以自動執行的 test case，這樣的 test case 讓不懂程式的人有一個共同的平台與溝通方式可以溝通，然後我們就寫了 ruby 的程式來執行測試。

這一篇，我們要來仔細看看那個 ruby 程式。

========= 手把手教學？ =========

1. 開啟yahoo首頁

這邊就是在第 8 行加入 navigate_to 的敘述，那我是怎麼知道要加這個呢？
就是去這個連結

然後看到第一行，就覺得用用看，就中了。

2. 到 "股市" 首頁去

也是一樣，click 一個 link 以後，等待 3 秒。
其實這邊有一個 predefined step，在這個連結的第 21 ~ 23 行：

所以我就把它的 click 的部分拿出來用了。

後面那個 arg1 是一個參數，這裡是 ruby 的標準寫法，我就跳過不介紹了。

3. When 輸入 "台積電" 在輸入框裡面

這邊的寫法應該有很多種，你也可以像前面一樣，去找 predefined steps的實作方法，然後填入。我的寫法是，用 xpath 找到一個網頁上的 element，然後用 send_keys 這個 api，把字串傳過去，然後傳一個 enter 過去。

那這些資料是哪裡找到的呢？
find_element 在這裡。
找到的 element 在這裡，你也會在這裡找到這個 class 的 send_keys 方法

那傳一個 enter 出去呢？在這裡你可以找到。

4. 我會看到 "2330台積電" 的股價在 "50" 到 "500" 之間

首先，這邊會有三個字串參數傳進來："2330台積電”、”50"與"500" 。
我分別叫他是 tsmc, low, high，來看看 code：

line 23：check_element_presence 這個 method ，我也是先去找 predefined steps，然後去找他的實作，最後在這裡找到，在第 39 ~ 42 行，這些參數需要摸索一下XDDD。

line 25 ~ 最後面：幹，我摸索超久。

是這樣的，我用 firefox 的 firepath 跟 firebug 去找 xpath，原本以為 xpath 一定找得到，但沒想到 yahoo 這個網頁長得很奇怪，找不到；我就用 css 去找，於是發現，他在股價的地方，前面有一串變數，所以要取 css 後面的部分，我就用上面那一串 css 的 string ，就找到了。

說得雲淡風輕，但其實很卡... 不過，寫程式就是這樣吧。

然後我用 get_element_text 拿到字串 (get_element_text 在這裡可以找到，他的實作方法在這裡，其實看到這裡，你應該已經知道這些 selenium-cucumber 的東西的階層實作關係了)，然後用 ruby 的語言，把字串轉成 float 去做比較，不對的話就呼叫 fail。

line 28: 是一個註釋，但裡面的 expect api 我覺得很好用。

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

1. feature 的 step 可以在這一層找到，而這些實作是在往下的這一層實作，所以這第二層的東西，會直接碰到 selenium-cucumber 的 API。目前覺得大概是這個關係。另外這個連結，也可以提供一些線索。

2. 這就是寫程式。

3. 先學會基礎的 ruby 吧～～～

好的，一樣，如果有任何問題或是建議，或是覺得我寫錯了，歡迎在下面留言跟我說～～～～