網頁自動測試的好朋友 – WebElement Locators

Meet-the-Firefox-OS-Mascot-a-Fox-That-s-on-Fire

二十餘年前,網站慢慢開始出現在世界各地,起初就像盤古開天闢地一般,沒有複雜的東西,網站都相當簡易,大多以文字和些許的圖片構成,連頁面也沒有太多。經過好一陣子的發展,慢慢有了比較複雜的結構,那時候人寫網頁的邏輯慢慢的會受到干擾,因而有時候會出現一些錯誤。到了最近幾年,網站已經不再是 Frontpage (Sharepoint) 或 Dreamweaver 這種軟體就可以滿足的了,我們開始使用不同程式語言,自動產生出想要的 HTML 架構,這時候網站可能已經大到一個規模,需要自動化的測試,確保新的網頁和新的功能不會影響到之前完美的功能。

現在,網頁更延伸到了手機上面,整個 Firefox OS 手機所看到的都是 HTML。因此,在 Firefox OS 手機上的自動化測試當然也牽扯到了類似網頁自動測試的元素。今天,你要測試網頁上的東西,最重要的事情是甚麼?我會說是「找到網頁上的元件」。看到了一個密碼輸入欄位時,你要怎麼透過測試軟體操控這個網頁元件?答案是使用「WebElement Locators」,現在諸如 Selenium Webdriver 和 Marionette ,都會採用不同的 WebElement Locator 去找到想要的東西。我們來舉個例說明一下,以下有一個真實的的 HTML:

Locators 通常有 CSS Selector、XPath、ID、Name、Link、Partial Link、Tag Name 等等…。
今天,我們看著這個網頁的原始碼並且在瀏覽器看著這個網頁,我看到按鈕顯示 Next,我該如何去找到這個東西呢?

首先,看到這個按鈕裡面的 <span> 上面有 id,我就以我所使用的程式架構,和他說:我要找一個 ID 是 “next" 的元件,程式就會把這個元件丟回來,你就可以檢查他是否符合你的測試要求,例如:這個元件上面是不是寫著 Next 或是包含這個元件的是不是一個 <button>。這樣是不是很簡單呢?

可是,有時候找尋一個元件並不簡單,常常會有一些不清楚網頁標準的網頁設計師,把相同的 ID 或 Name 重複給了很多不同元件,程式就沒辦法區分哪一個元件才是正確的,那我們該怎麼辦呢?這時候,就輪到 CSS Selector 或 XPath 上陣了!基本上這兩個 locator 方法都是從網頁架構中去找尋上面的元件。基本上舉個例子可能清楚的很多。

一樣以找到內文 Next 的 <button> 元件為例,你把 XPath 可以寫成:
(把整個架構列出來)

但是你發現其實整個網頁裡面只有這一個 <button>,那你就可以把 XPath 寫成:
(把獨一無二的架構列出來)

或是,你還這可以這樣寫

每一種寫法都有他的優缺點,第一種你可以很清楚知道網頁架構有沒有些許變動,第二種可以不會對網頁架構改變太敏感,但還是能偵測必要的變動,第三種對架構完全不在乎,即使 <span> 不存在 <button> 裡面也不會感測出來。
此外, XPath 可以做一些除了 ID 或 Class 以外的屬性選擇,例如:

再舉一次找尋一樣元件的例子,這次我們用 CSS Selector 來寫:

同樣你也可以改寫成:

不過很可惜的,CSS Selector 卻無法用 Tag 裡面的文字來定位,所以在這裡我們再提供一個作法:

這是可以指定找尋某 Tag 上面 ID 的作法,XPath 其實也有對應的作法:

不過要特別注意的是,CSS Selector 相較 Xpath 之下,CSS Selector 找尋元件的速度明顯快上很多,能使用 CSS Selector 尋找時,請盡量避免使用其他尋找方法。

CSS Selector 還有一些特異功能,因為現在很多人用 HTML 的 Class 屬性去分類,這樣 CSS Selector 便能輕鬆選取到那些分類,如果你想要找 state 類 (看起來很像是有敘述句的元件) 和 high 類 (看起來很像是高優先序的元件),那麼你就可以使用:

這樣同時可以把 class="stat high haha" 和 class="stat high" 的兩個元件個選擇起來了,很簡單吧!

 

最後,大家在這篇簡短的介紹文後,可能更想了解 XPath 或 CSS Selector,以下提供一些資源供大家快速學習:

此外,本篇文章在發表後也會同步發表於 http://ypwalter.blogspot.tw/ (或是在同作者部落格攝影旅者發布)

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *