Nightwatch101 #6:使用 Xpath 定位網頁元素

Nightwatch.js

做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,在本篇使用 Xpath。(參考使用 CSS Selector 定位網頁元素

本系列文章皆使用這個專案,可以拉下來玩玩;有什麼問題都可以提出 issue

如何取得 Xpath?

Xpath(XML Path Language,XML 路徑語言),是用於確定 XML 文檔中某節點位置的語言。

相信很多人其實不知道怎麼取得 Xpath,甚至聽都沒聽過 XD

方法很簡單,打開 Chrome Dev Tool 的 Elements 頁籤,選到這個 DOM Element,選擇「Copy > Copy XPath」即可。

如何取得 Xpath?

範例

這個範例在做登入露天網站的動作,其中使用 Xpath 來抓取網頁元素。動作列舉如下

使用 Xpath 定位網頁元素

範例程式碼如下。

module.exports = {
  'Ruten Login': function (browser) {
    browser
      .url('https://member.ruten.com.tw/user/login.htm') // 打開網頁
      .waitForElementVisible('body', 1000) // 等待 1 秒,確認 <body> 這個元素是否出現
      .useXpath() // 使用 Xpath 來抓取網頁元素
      .setValue('//input[@id="userid"]', 'nightwatch101') // 在帳號欄位輸入字串 nightwatch101
      .setValue('//input[@id="userpass"]', 'nightwatch101') // 在密碼欄位輸入字串 nightwatch101
      .useCss() // 使用 CSS Selector 來抓取網頁元素
      .click('#btnLogin') // 點擊登入按鈕
      .pause(1000) // 等待 1 秒
      .assert.urlContains('http://www.ruten.com.tw/') // 確定網址是否包含 http://www.ruten.com.tw/
      .end(); // 結束 session,關閉瀏覽器
  },
};

完整程式碼

在這邊會看到混用 CSS Selector 和 Xpath Selector 來選取頁面元素。預設是使用 CSS Selector,如果要切換成 Xpath 要用 .useXpath(),再切回 CSS Selector 就要用 .useCss()

跑測試 👟

執行測試程式。

nightwatch test/e2e/member/testLogin.js

顯示測試報告-通過所有的項目並產生測試報告

使用 Xpath 定位網頁元素

測試報告。

測試報告

總結

CSS Selector 和 Xpath 的比較可參考這裡,相較起來,CSS Selector 效能較佳,請多使用。


2018 鐵人賽網址


Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文