轉自:http://ypwalter.blogspot.tw/2013/09/webelement-locators.html

 

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

 

二十餘年前，網站慢慢開始出現在世界各地，起初就像盤古開天闢地一般，沒有複雜的東西，網站都相當簡易，大多以文字和些許的圖片構成，連頁面也沒有太多。經過好一陣子的發展，慢慢有了比較複雜的結構，那時候人寫網頁的邏輯慢慢的會受到干擾，因而有時候會出現一些錯誤。到了最近幾年，網站已經不再是 Frontpage (Sharepoint) 或 Dreamweaver 這種軟體就可以滿足的了，我們開始使用不同程式語言，自動產生出想要的 HTML 架構，這時候網站可能已經大到一個規模，需要自動化的測試，確保新的網頁和新的功能不會影響到之前完美的功能。 現在，網頁更延伸到了手機上面，整個 Firefox OS 手機所看到的都是 HTML。因此，在 Firefox OS 手機上的自動化測試當然也牽扯到了類似網頁自動測試的元素。今天，你要測試網頁上的東西，最重要的事情是甚麼？我會說是「找到網頁上的元件」。看到了一個密碼輸入欄位時，你要怎麼透過測試軟體操控這個網頁元件？答案是使用「WebElement Locators」，現在諸如 Selenium Webdriver 和 Marionette ，都會採用不同的 WebElement Locator 去找到想要的東西。我們來舉個例說明一下，以下有一個真實的 HTML： 

<section id="step-1" role="region">
  <header>
    <h1 name="header" data-l10n-id="fte-welcome-title">Welcome</h1>
  </header>
  <section>
    <div aria-hidden="true" class="stat low">
      <h2 data-l10n-id="fte-authed-sim" class="warning">Statement 1</h2>
    </div>
    <div aria-hidden="false" class="stat high haha">
      <h2 data-l10n-id="fte-nonauthed-sim" class="error">Statement 2</h2> 
    </div>
    <div aria-hidden="false" class="stat high">
      <h2 class="error emergency">Statement Three.</h2>
    </div>
    <p data-l10n-id="fte-sim-info" class="stat">Information</p>
  </section>
  <menu>
    <button data-navigation="next">
      <span></span>
      <span id="next" data-l10n-id="next">Next</span>
    </button>
  </menu>
  <a href="#home">Go Home!</a>
</section>

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 可以寫成： （把整個架構列出來） 

/section/menu/button/span[2]

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

//button/span[2]

或是，你還這可以這樣寫 

//span[text()="Next"]

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

//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，以下提供一些資源供大家快速學習： 

此外，本篇文章同步發表在謀智台客

arrow
arrow
    文章標籤
    QA 測試 WebElement Locators 自動測試
    全站熱搜

    以戒為師 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄