Protractor – 實戰篇 – the last puzzle piece

 

Protractor 是一款 end-to-end test framework. 什麼是 end-to-end test 呢?! 簡單的說它可以模擬 user 在 browser 上操作的所有行為(近乎 100%), 進而測試頁面 flow 是否順暢? JavaScript 各 module 是否運作正常? 如果寫得好的話, 取代傳統的人工測試使之進化到全自動化測試也不再是件遙不可及的夢想。

 

 

基本上,  Protractor 已經提供了非常多的 API 來模擬 user 的行為, 對於開發者來說, 便可以輕輕鬆鬆的完成一系列的測試, 不過由於 front end 的操作日新月異, 有些 flow 的操作行為, 可能無法透過這些  API 來兜出來, 這時候我們該怎麼作呢?! 這就是本篇的重點所在 – 「the last puzzle piece」.

 

 

如果 Protractor 沒有提供, 那麼…我們就自己來開發, 這就便是「工程師們的浪漫」, 簡單的說便是透過下列這個 API 來完成這樣的動作

 

browser.executeScript

 

source: http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.executeScript

 

我們可以直接挖進去當前 Page,  透過 Native JavaScript 來完成 protractor 所沒有提供功能, 已下便透過一個簡單的功能測試, 來帶大家走一遭, 相信便可以很快的了解到相關的開發流程

 

 

  • 了解我們所要測試的功能以及相關的 flow

Yahoo! 拍賣近期推出了一個新功能, 讓賣家們可以在商品管理列表直接編輯商品的 title 和 price, 不需要再額外的進去商品 edit page, 我將之稱為 FlexEdit. 我們先透過下面的圖片, 了解它的操作流程

 

 

前往 – 商品管理頁

 

 

 

移動 cursor 到商品的 title, 這時候便會出現上圖的編輯框, 並對右下角的「鉛筆」進行 click 的動作

 

 

 

完成 click 的動作後, 便可以進入 edit mode, 完成 title 編輯後, 便可以點擊 check mark 進行修改, 反之點擊 X 來取消 edit mode.

 

 

 

如下圖, 我們修改完 title 後, 點擊 check mark, 便匯出現簡單的動畫, 來告知 user 目前程序進行中

 

 

完成修改後, 便會結束 edit mode

 

 

 

  • 完成脈絡分析後, 接下來便是實作的部分了, 以下會重點講解有關 Protractor API 的使用時機

 

我們知道要讓 edit mode 出現的先決條件 – 便是將 cursor 移動到 title 上

 

browser.actions().mouseMove(target).perform()

 

接下來我們先來看一下 HTML 的結構

 

 

為了讓這個連結可以正常的運作, 所以會有一個 event 偵測 click 的行為, 如果今天被點擊到的 element tag 是 < span >, 就讓它正常執行連結的動作, 反之, 如果今天被點擊到的 tag 是 < a >, 則就該出現 edit mode (“鉛筆”的圖示是 pseudo element, 所以當它被點擊會直接反升到 < a> 上, 所以會成功的被 event 攔截到) 

 

由於執行完 mouseMove 後, Protractor 會將滑鼠游標移動到該 element 的正中間, 這時候如果直接對它作 click() 的動作, 則負責監聽的 function 便會拿到 < span > 被點擊的行為, 因此就會直接導走頁面而不會如預期的開啟 edit mode

 

這時候就要換個方式來作, 或許我們可以直接找到 「鉛筆」的 element 並且對它作 click 的行為不就可以了 ?? 這樣的行為也確時如同 user 的操作, 不過請注意, 由於「鉛筆」是 pseudo element, 它實際上並不存在於 DOM tree 上, 也就是說…………我們是無法透過 selector 來正確的找到該 element, 寫 automation 的基本原則就是在不更動原有架構為前題進行 test code 的開發, 於是乎我們得再想想其他方向, 不到最後關頭千萬不要輕言放棄

 

 

這時候便可以想想 Native JavaScript 能否在這裡使上力, 如果我直接挖進去 Page 並對 a.flexedit 進行點擊的話, 是不是就可以正常開啟 edit mode ? 

 

browser.executeScript(

        function() {

                arguments[0].click();

        }    

, flexedit.getWebElement());

 

如上所示, 我們將 flexedit 當作參數, 透過 executeScript 打到 page 中, 並且 call 其 click() method, 果然如同我們預期的 – 成功開啟了 edit mode, 印證了本篇的主題, Protractor 沒給的, 我們便透過 executeScript 自己要.

 

 

一旦開啟了 edit mode, 接下來的事情便是小菜一疊了

 

item.$(‘.name textarea’).clear().sendKeys(newTitle);

 

找到 textarea 這個 element 後, 先將它的內容清空(clear()), 再透過 sendKeys 將新的 title 進行輸入, 如下圖所示, “[直購品] 測試商品請勿下標, 所有訂單一律取消 – mei – m” 便是我們的新 title

 

 

item.$(‘.name a.confirm’).click().then(

        function() {

                stand.waitUntilNotPresent(stand.selector.itemTitleFlexEditProgress);

        }

);

 

完成 title 輸入後, 便是 submit 的行為了, 如上, 我們在找到 confirm 的按鈕後, 對它作 click 的行為, 並且透過 waitUntilNotPresent 這個 method 等到 progress 這個 icon 不出現為止, 即便完成了修改商品 title 的行為了

 

 

 

以上, 便是 FlexEdit 這個 module 的相關 test code 開發過程, 只要能夠掌握住 module 在各個狀態的變化以及執行的 flow, 我們便可以成功的模擬出 user 的操作行為, 進而驗證我們所撰寫的功能是否能正常運作, 最後再帶大家 recape 一下這兩個重點

 

  • 了解我們所要測試的功能以及相關的 flow
  • 完成脈絡分析後, 解析各行為 Protractor API 的使用時機

 

希望透過這樣的實例分享, 能夠讓讀者們可以更加的了解實作上所該注意的眉眉角角, 並且能開開心心的撰寫 test code. 

 

 

※ testing video:

https://youtu.be/fqsGGZF-AKs?t=1m45s

 

 

 

※ Reference:

 

 

 

※ 延伸閱讀:

轉載文章 – Protractor – 實戰篇 – the last puzzle piece

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *