自動化測試程式如何驗證網頁畫面?
這篇文章主要說明電腦自動化測試程式如何驗證網頁資訊與元件。
對於人眼來說我們可以很快的看出這個網頁是否顯示異常，
有沒有缺少任何網頁元件、位置是否正確、顏色，進一步驗證連結與功能是否正常運作。
但是對於電腦來說要如何讓電腦做這些驗證?
Selenium 是否有提供相關的API?
網頁元件是否有正常的顯示?
這些問題就是這篇會探討並且用 Selenium/Python 範例實作。
Google 首頁的驗證
我們用一個簡單的例子說明，
例如這個 Google 首頁，我們怎麼知道這個頁面是否成功訪問載入正常呢?
對於人眼來看，我們可以很快的立刻辨別，但是我們是用哪些特徵辨別這個網頁?
哪些特徵是電腦可以用來驗證該網頁呢? 筆者舉例如下：
- 正中央的 Search Bar 是否有出現? Visibility?
- Google Search 按鈕是否可以點擊 clickable?
- Google 圖片是否有出現?
- 最上方的連結是否有出現? Search, Images, Mags, YouTube等
- 最下方的 Footer 是否有出現? About Google
- Http Response Code 是否為 200
- Page Title 是否為 “Google”
Selenium 的驗證 Expected Conditions
對於 Selenuim來說，我們主要用到的功能就是 expected_conditions
Expected Conditions 可以協助我們驗證網頁的狀態。標註紅色的部分為筆者建議比較常用，
可以讓自動化測試程式更穩定，減少因為網頁顯示或是下載時間的關係而造成的例外錯誤。
| alert_is_present | 驗證 alert 視窗是否存在 |
| element_located_selection_state_to_beelement_located_to_be_selected
element_to_be_selected |
驗證 Selection list 是否有被選取 |
| element_to_be_clickable | 該網頁元件是否可以被點選 |
| frame_to_be_available_and_switch_to_it | 遇到有 iframe的網頁時，可以先檢查該iframe是否已經載入成功 |
| invisibility_of_element_located | 該網頁元件是否看不到 |
| presence_of_all_elements_locatedpresence_of_element_located | 網頁元件是否存在 |
| text_to_be_present_in_elementtext_to_be_present_in_element_value | 特定文字是否出現在網頁元件中 |
| title_containstitle_is | 該網頁的 Page Title 驗證 |
| visibility_ofvisibility_of_element_located | 特定網頁是否出現? 與 present 不一樣的是 Visibility 還會檢查該網頁屬性 height/width 設定是否大於 0 |
實作範例
通常 Expected Conditions 會與 WebDriverWait 一併使用。讓自動化測試程式”等待”，直到所預期的條件 (網頁元件出現、可以點擊)。
因此，程式要 import 有：
- from selenium.webdriver.support.ui import WebDriverWait
- from selenium.webdriver.support import expected_conditions
例如針對 google homePage 來說，可以用下列方試驗證
- 驗證中間的 Search bar (name=”q”)出現，等10秒後timeout
SearchField = WebDriverWait(self.driver, 10).until(expected_conditions.visibility_of_element_located((By.NAME, “q”)))
- 驗證語言選單中是否有三個選項
WebDriverWait(self.driver, 10).until(lambda s: s.find_element_by_id(“select-language”).get_attribute(“length”) == “3”)
- 驗證Search Button 是否可以點擊。等10秒後 timeout。
Search_button = WebDriverWait(self.driver, 10).until(expected_conditions.element_to_be_clickable((By.name, “btnk”)))
Search_button.click()
- 驗證該網頁的 title 是否含有 Google
WebDriverWait(self.driver, 10).until(expected_conditions.title_contains(“Google”))
小結
在對網頁元件進行操作前，適時的透過這樣的方式驗證網頁與等待，
WebDriverWait 配合 expected_conditions的使用。
除了可以對於該網頁作基本的驗證之外，還可以讓自動化測試程式更穩定，
減少因為網路下載時間或是出現的時間差造成的程式例外錯誤。