講到網頁自動測試,一哥地位非 Selenium 莫屬(參考)。雖然 Selenium IDE 支援錄製網頁操作產生測試腳本,但錄製產生的指令常依賴元素的位置順序定位,配置稍有更動立刻破功。依實務經驗,開發者依據設計邏輯手工撰寫還是較可靠的作法,測試指令也較簡潔有效率。Selenium 本身提供好幾種定位器,包含:ID、Name、DOM、XPATH、CSS Selector…等。習慣 jQuery 再回頭使用這些彈性受限的定位器,每每遇到複雜情境,都會先想 jQuery 如何操作,再設法對應成 CSS Selector,但三不五時就會超出 CSS 能力範圍(例如::contains()、:has(),或是結合 closest()、parent() ),心中滿是恨鐵不成鋼的怨氣。

既然 jQuery 好用,我測試的網頁也多半已載入 jQuery,為什麼寫測試時必須將就這堆能力受限的內建定位器呢?最後,我找到一個解法,為 Selenium 寫擴充函式直接支援 jQuery!

我寫了一個user-extensions.js,為 Selenium 類別加入幾個新函式:

  • locateElementByJq: 所有適用 css=… 選擇器的場合,都可以寫成  jq=… 使用 jQuery 選擇器
  • getJqText:支援 verifyJqText/waitForJqText,傳入 jQuery 選擇器取回 .text()
  • getJqVal:支援 verifyJqVal/waitForJqVal,傳入 jQuery 選擇器取回 .val()
  • getJqHtml:支援 verifyJqHtml/waitForJqHtml,傳入 jQuery 選擇器取回 .val()
  • doExecute:Selenium 雖然有 runScript,但執行時 this 指向 Selenium 物件,如要存取 DOM 必須寫 window.document.* 有點囉嗉。改良版的 execute 支援直接輸入 JavaScript,以 window.eval() 執行,就跟在 F12 主控台下指令一樣方便。因此,execute 是為我寫測試最慣用的兵器。
  • getExecute:沿用 execute 概念,可執行複雜 JavaScript 指令自網頁取值,可配合 verifyForExecute、waitForExecute 使用,威力強大!(例如:取得元素內容進行 Regular Expression 比對、檢查元素個數介於 2 到 4 之間… 這類內建指令不易實現的運算比對)

user-extensions.js 的內容如下:

//http://docs.seleniumhq.org/docs/08_user_extensions.jsp
Selenium.prototype.doExecute = function(script) {
    this.browserbot.getCurrentWindow().eval(script);
};
Selenium.prototype.getExecute = function(script) {
    return this.browserbot.getCurrentWindow().eval(script);
};
Selenium.prototype.getJqMethod = function(selector, method) {
    return this.getExecute('$("' + selector + '").' + method + '();');
};
Selenium.prototype.getJqText = function(selector) {
    return this.getJqMethod(selector, "text");
};
Selenium.prototype.getJqHtml = function(selector) {
    return this.getJqMethod(selector, "html");
};
Selenium.prototype.getJqVal = function(selector) {
    return this.getJqMethod(selector, "val");
};
PageBot.prototype.locateElementByJq = function(selector, inDocument) {
    // FF/Chrome/IE9+: defaultView, OldIE: parentWindow
    return (inDocument.defaultView || inDocument.parentWindow)
            .eval("jQuery('" + selector.replace(/'/g, "\\'") + "')[0];");
};

要使用它,只需開啟 Selenium IDE 選項設定,加入 user-extensions.js 路徑。血清注射完成,美國隊長要現身了!

用一個簡單網頁示範:

<!DOCTYPE html>
 
<html>
    <body>
        <div>
            <input type="text" value="Darkthread" />
            <span class='name'>Jeffrey</span>
        </div>
        <div>
            <input type="button" value="Hide" />
            <span>Test</span>
        </div>
        <div class="last">
            <input type="text" value="Selenium" disabled />
            <span style="display:none">Selenium IDE</span>
        </div>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
        <script>
            $(":button").click(function() {
                $(".name").hide(3000);
            });
        </script>
    </body>
</html>

如以下圖示,展示使用 jq=div:has(:text) 配合 verifyElementPresent 可以做到 CSS 不支援的 :has() 選擇器;verifyExecute 時應用 JavaScript .match() 做 Regular Expression 比對;另外還展示用 execute 執行 JavaScript 直接對 DOM 動手動腳。

能使用 jQuery 選擇器,又可直接用 JavaScript 操作網頁或進行運算,就能輕鬆在 Selenium 測試案例加入各種自訂邏輯,寫起測試案例再也不會被綁手綁腳囉!


Comments

# by lrd@hust.edu.tw

您好, 因您文章受用良深,請教您一問題如附檔視訊, https://drive.google.com/file/d/1IpDs-O3F9jNniXJT3qfa9dmlRKbDmO2p/view?usp=sharing 環境為FF&SideeX is an extended version of Selenium IDE, CLICK指令可點到輸入欄位之ID,可是相同欄位相同ID,TYPE指令卻是未見任何動作,也就是未自動打字,WHY? 麻煩您了 lrd@hust.edu.tw

# by Jeffrey

to Ird, 只有某個欄位有問題還是全面失效? 改用sendKeys/typeKeys結果會不同嗎?

Post a comment


20 + 12 =