網頁自動測試的好朋友 – WebElement Locators
二十餘年前，網站慢慢開始出現在世界各地，起初就像盤古開天闢地一般，沒有複雜的東西，網站都相當簡易，大多以文字和些許的圖片構成，連頁面也沒有太多。經過好一陣子的發展，慢慢有了比較複雜的結構，那時候人寫網頁的邏輯慢慢的會受到干擾，因而有時候會出現一些錯誤。到了最近幾年，網站已經不再是 Frontpage (Sharepoint) 或 Dreamweaver 這種軟體就可以滿足的了，我們開始使用不同程式語言，自動產生出想要的 HTML 架構，這時候網站可能已經大到一個規模，需要自動化的測試，確保新的網頁和新的功能不會影響到之前完美的功能。
現在，網頁更延伸到了手機上面，整個 Firefox OS 手機所看到的都是 HTML。因此，在 Firefox OS 手機上的自動化測試當然也牽扯到了類似網頁自動測試的元素。今天，你要測試網頁上的東西，最重要的事情是甚麼？我會說是「找到網頁上的元件」。看到了一個密碼輸入欄位時，你要怎麼透過測試軟體操控這個網頁元件？答案是使用「WebElement Locators」，現在諸如 Selenium Webdriver 和 Marionette ，都會採用不同的 WebElement Locator 去找到想要的東西。我們來舉個例說明一下，以下有一個真實的的 HTML：
Welcome
Go Home! Statement 2
Statement Three.
Information
Locators 通常有 CSS Selector、XPath、ID、Name、Link、Partial Link、Tag Name 等等…。
今天，我們看著這個網頁的原始碼並且在瀏覽器看著這個網頁，我看到按鈕顯示 Next，我該如何去找到這個東西呢？
首先，看到這個按鈕裡面的 上面有 id，我就以我所使用的程式架構，和他說：我要找一個 ID 是 “next" 的元件，程式就會把這個元件丟回來，你就可以檢查他是否符合你的測試要求，例如：這個元件上面是不是寫著 Next 或是包含這個元件的是不是一個
可是，有時候找尋一個元件並不簡單，常常會有一些不清楚網頁標準的網頁設計師，把相同的 ID 或 Name 重複給了很多不同元件，程式就沒辦法區分哪一個元件才是正確的，那我們該怎麼辦呢？這時候，就輪到 CSS Selector 或 XPath 上陣了！基本上這兩個 locator 方法都是從網頁架構中去找尋上面的元件。基本上舉個例子可能清楚的很多。
一樣以找到內文 Next 的
/section/menu/button/span[2]
但是你發現其實整個網頁裡面只有這一個
//button/span[2]
或是，你還這可以這樣寫
//span[text()="Next"]
每一種寫法都有他的優缺點，第一種你可以很清楚知道網頁架構有沒有些許變動，第二種可以不會對網頁架構改變太敏感，但還是能偵測必要的變動，第三種對架構完全不在乎，即使 不存在
//span[data-l10n-id="next"]
再舉一次找尋一樣元件的例子，這次我們用 CSS Selector 來寫：
section menu button span:nth-child(2)
同樣你也可以改寫成：
button span:nth-child(2)
不過很可惜的，CSS Selector 卻無法用 Tag 裡面的文字來定位，所以在這裡我們再提供一個作法：
span#next
這是可以指定找尋某 Tag 上面 ID 的作法，XPath 其實也有對應的作法：
//span[@id='next']
不過要特別注意的是，CSS Selector 相較 Xpath 之下，CSS Selector 找尋元件的速度明顯快上很多，能使用 CSS Selector 尋找時，請盡量避免使用其他尋找方法。
CSS Selector 還有一些特異功能，因為現在很多人用 HTML 的 Class 屬性去分類，這樣 CSS Selector 便能輕鬆選取到那些分類，如果你想要找 state 類 (看起來很像是有敘述句的元件) 和 high 類 (看起來很像是高優先序的元件)，那麼你就可以使用：
.state.high
這樣同時可以把 class="stat high haha" 和 class="stat high" 的兩個元件個選擇起來了，很簡單吧！
最後，大家在這篇簡短的介紹文後，可能更想了解 XPath 或 CSS Selector，以下提供一些資源供大家快速學習：
此外，本篇文章在發表後也會同步發表於 http://ypwalter.blogspot.tw/ (或是在同作者部落格攝影旅者發布)
