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

2018 iT 邦幫忙鐵人賽

DAY 6

DevOps

Nightwatch101：使用 Nightwatch 實現 End-to-End Testing系列第 6 篇

2018鐵人賽 nightwatch 前端測試 end-to-end testing 自動化測試

Summer

團隊露天廢物

2017-12-16 06:32:39

13194 瀏覽

分享至

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 來抓取網頁元素。動作列舉如下

打開網頁 https://member.ruten.com.tw/user/login.htm。
等待 1 秒，確認 <body> 這個元素是否出現。
在帳號欄位輸入字串 nightwatch101。
在密碼欄位輸入字串 nightwatch101。
點擊登入按鈕。
等待 1 秒。
確定網址是否包含 http://www.ruten.com.tw/。
結束 session，關閉瀏覽器。

使用 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()。