使用 Selenium IDE 進行網頁自動化測試

馮三益 2020/03/17 16:31:25
2440

使用 Selenium IDE 進行網頁自動化測試

前言

當網頁製作完成後,都必須對頁面表單、按鈕進行手動測試,當頁面內容簡單且只有 1、2 頁時手動檢查相對簡單快速,但出現操作流程複雜且頁面又多時,當程式修改後就又要全部重新檢測一遍,是相當費時且費力的,因此 Selenium 就出現了。

返回目錄

Selenium 簡介

Selenium 是為網頁自動化測試需求所設計的一套工具集合,讓程式可以直接驅動瀏覽器,進行表單資料輸入、點選按鈕或連結、取得網頁內容並進行檢驗。

返回目錄

Selenium 組成

  1. Selenium IDE :

    瀏覽器的擴充套件,它提供了錄製、回放、測試腳本匯入匯出功能,用於編寫功能測試,且無需學習測試腳本語言,是使用 Selenium 進行網站自動化的基礎。

  2. Selenium WebDriver:

    用來執行並操作瀏覽器的一個 API 介面,程式透過呼叫 WebDriver 來直接對瀏覽器進行操作,Selenium WebDriver API 支援 Java、C#、Ruby、Python 及 Perl 等多種語言進行腳本撰寫,許多 Web Test Framework,都是以 Selenium WebDriver API 作為基礎,功能強大且穩固已經讓 Selenium 成為瀏覽器自動化的基石。

  3. Selenium Grid :

    主要可以讓我們輕鬆的同時使用多台機器、多個瀏覽器來對網頁進行測試。

返回目錄

Selenium IDE 安裝

  1. 進入 Selenium 官網 的下載頁面。

  2. 於 Selenium IDE 下載區塊選擇要安裝的瀏覽器版本(Chrome 或 Firefox)。

  3. 進入擴充功能頁面,點選加到 Chrome → 新增擴充功能 進行安裝 (此處以 Chrome 為例)。

  4. 安裝後即可在瀏覽器上方看見 Selenium IDE 的 Icon 圖示。

  5. 允許存取檔案網址設定。

    測試項目內有需要上傳檔案,這項設定要開啟,否則無法 type 檔案網址。

返回目錄

使用 Selenium IDE 進行測試項目錄製

  1. 點選 瀏覽器上方 Selenium IDE 的 Icon 開啟 Selenium IDE。

    * Record a new test in a new project : 建立新的測試專案,可立即輸入測試網址進行測試項目錄製。

    * Open an existing project : 開啟現有的測試專案。

    * Create a new project : 建立新的測試專案。

    * Close Selenium IDE : 關閉 Selenium IDE 。

  2. 點選 Record a new test in a new project 建立新的測試專案。

  3. 輸入要進行測試的網站網址,並開始進行錄製。

  4. 測試流程錄製完後,切換到 Selenium IDE 點選右上方停止按鈕停止錄製。

  5. 輸入測試項目名稱並結束錄製。

  6. 點選播放按鈕可對此測試項目進行回放。

返回目錄

擴充套件介面介紹

  1. 測試專案名稱,可進行修改。

  2. 測試項目區塊。

  3. 執行相關動作區塊,由左到右依序 :

    3.1 執行測試項目區塊內所有的測試項目。

    3.2 執行當前的測試項目。

    3.3 執行時出現,停止測試。

    3.4 執行時出現,暫停測試,再點選一次可繼續執行。

    3.5 Debug 模式,可逐步執行測試,模式下介面中間會出現 Paused in debugger 提示。

    3.6 可調整測試的執行速度。

  4. 專案相關動作區塊,由左到右依序 :

    4.1 建立新的測試專案。

    4.2 開啟現有的測試專案。

    4.3 儲存測試專案。

  5. 除錯、錄製動作相關區塊,由左到右依序 :

    5.1 可略過回放命令執行區塊內的所有中斷點設置。

    5.2 當執行回放,發生錯誤時,會立即在該指令行進入 Debug 模式。

    5.3 執行錄製動作。

  6. 執行指令區塊,可進行新增、刪除、複製、剪下、設立中斷點等指令相關動作。

  7. 指令設定區塊 :

    7.1 Command : 指令執行的動作。

    Enable / Disable command  按鈕 : 註解 / 解除註解 該行指令。

    7.2 Target : 指令執行的目標元素。

    Select target in page  按鈕 : 從測試頁面選擇元素目標。

    Find target in page  按鈕 : 顯示選擇元素在測試頁面的位置。

    7.3 Value : 指令執行的值。

    7.4 Description : 指令的描述,會直接顯示於該行指令區的位置,滑鼠移上該行時才會顯示指令設定。

  8. 執行記錄區塊 :

    8.1 Log : 測試執行的相關紀錄,並顯示是否測試成功。

    8.2 Reference : 點選任一行執行指令,可顯示該指令的相關訊息。

返回目錄

Selenium 指令

  1. 操作指令 : 用來操作瀏覽器及網頁的指令,像是輸入值、點選按鈕等動作,如果操作失敗、或是發生了錯誤,將會導致測試中止。

  2. 存取指令 : 檢查瀏覽器及網頁的狀態,並將結果儲存在變數中,例如 storeTitle (儲存網頁標題到變數中),它們也用來自動產生驗證。

  3. 驗證指令 : 用來確認應用程式的狀態是否符合預期的結果。

返回目錄

元素定位器

用來告訴 Selenium 哪些 HTML 元素將會用於指令中 (Target), Selenium 支援多種定位器寫法 :

相關網頁資訊可先參考附錄

<div id="myDivId" class="myDivCSS">
	<div>
		<label>AAA</label>
		<input type="text" id="inputId1" class="inputCSS1" name="myName1" />
	</div>
	<div>
		<label>BBB</label>
		<input type="text" id="inputId2" class="inputCSS2" name="myName2" />
	</div>
</div>

以下都以抓取第 1 個 input 元素為例。

  1. id(identifier) : 使用元素的 id 名稱作為定位。

    Target 寫法

    id=inputId1

  2. name : 使用元素的 name 名稱作為定位。

    Target 寫法

    name=myName1

  3. xpath : 使用 XPath 表示式來定位元素。

    Target 寫法

    xpath=//div[@id="myDivId"]/div[0]/input

    xpath=//input[@name='myName1']

  4. css : 使用元素的 class 作為定位。

    Target 寫法

    css=.inputCss1

    css=input[class = "inputCss1"]

使用方式另可參考 : 如何在Selenium IDE中使用Locators

返回目錄

新增測試指令

手動新增指令 :

  1. 於命令執行區塊,在要插入指令的行數點選 右鍵 -> Insert new command 新增一行指令。

  2. 點選新增的指令行,並在指令設定區塊的 Command 下拉選單輸入或選擇要執行的指令 (此處以 type 作範例)。

  3. 透過 Target 的 Select target in page 按鈕指定目標元素 (測試頁面需在開啟的狀態)。

    指定後 Target 的下拉選單會出現該元素的定位選項,可任選一個,其餘選項為當前選項失效時的備用選項。

  4. 也可透過開發者工具 (F12) 指定目標元素。

    在目標元素點選右鍵 -> 檢查即可開啟開發者工具,於 Elements 標籤頁可以看見指定的元素被選取。

    在被選取的元素點選右鍵 -> Copy -> 選擇要複製的項目 (此處以 Copy XPath 為例)。

    將複製的值搭配對應的設定填入 Target ,因為是複製 XPath 路徑,因此 Target 為 xpath=複製值。

    缺點為無備用選項可用,但可自行指定目標。

  5. 於指令設定區塊的 value 輸入框輸入值,即完成指令設定。

透過錄製新增指令 :

  1. 於命令執行區塊,在要插入指令的行數點選 Start recording 進行錄製。

  2. 錄製完要新增的指令後,點選 Stop recording 停止錄製,即完成指令新增。

返回目錄

測試的檢核驗證

與新增指令操作雷同,不同點在於 command 的設定會以檢核用的指令為主。

assert(驗證) : 檢核目標是否符合期待的值,出現錯誤就終止測試。

verify(辨識) : 檢核目標是否為設定值,出現錯誤測試仍繼續。

wait for(等待) : 檢核目標是否在指定時間內出現某狀態,出現錯誤就終止測試。

手動新增指令 :

  1. 於命令執行區塊,在要插入指令的行數點選 右鍵 -> Insert new command 新增一行指令。

  2. 點選新增的指令行,並在指令設定區塊的 Command 下拉選單輸入或選擇要執行的指令 (此處以 assert value 為例)。

  3. 同新增方法指定要驗證的元素。

  4. 於指令設定區塊的 value 輸入框輸入要測試的值,即完成指令設定。

  5. 執行結果可以於記錄區塊查看。

    檢核成功 :

    檢核失敗 :

透過錄製新增檢核指令 :

  1. 於命令執行區塊,在要插入指令的行數點選 Start recording 進行錄製。

  2. 在測試頁面要測試的元素點選右鍵 -> Selenium IDE -> 選擇要檢核的動作

  3. 錄製完要新增的檢核指令後,點選 Stop recording 停止錄製,即完成指令新增,可自行修改測試值。

  4. 執行結果可以於記錄區塊查看。

    檢核成功 :

    檢核失敗 :

返回目錄

條件判斷式指令運用

以 if else 為例

  1. 新增一個 store 的存取指令 , target 為暫存值 , value 為變數名稱。

  2. 新增 if else 的條件判斷式,結尾必須為 end 指令。

  3. 執行結果

    判斷為 true :

    判斷為 false :

返回目錄

迴圈指令運用

以 while 為例

  1. 新增一個 execute script 指令,可將此指令視為一個 JavaScript 匿名函數的身體, target 為要執行的動作, value 為變數名稱。

  2. 新增 while 迴圈指令,並設定條件。

    注意迴圈結束條件的設定,避免產生無限迴圈。

  3. 透過 echo 指令,將結果顯示於記錄區塊。

  4. 執行結果

返回目錄

select 指令運用

對 select 元素(下拉選單)操作設定如下

  • Command : 選擇 select 。

  • Target : 一樣指定該元素。

  • Value : 可以透過 3 種方式指定選單的值。

    1. label : 下拉選單的顯示文字

      使用方式為 label=xxx

    2. index : 透過下拉選單的 index 來指定,初始值為 0 。

      使用方式為 index=1 or index=1 ...

    3. id : 若下拉選單有為各個 option 設定 id ,可以透過 id 來指定選項。

      使用方式為 id=xxx

返回目錄

擷取動態來源資料進行檢核

透過一個可以自動產生亂數的網站進行動態來源資料檢核。

  1. 運用迴圈指令 do...repeat if... 包覆測試指令,直到檢核成功為止。

  2. 輸入網站所需參數,並產生亂數。

  3. 儲存產生的亂數值。

  4. 使用 excute script 進行邏輯判斷(亂數值 < 50)。

  5. 使用 verify 進行檢核。

  6. 顯示亂數值。

執行結果:

有 4 次的執行結果亂數值大於 50 ,因此顯示有 4 筆的 error(s)。

返回目錄

儲存測試專案

  1. 測試項目名稱出現 * 符號代表尚未儲存,點選介面上的 Save Project 按鈕可以進行專案儲存。

  2. 選擇儲存位置後即完成儲存。

返回目錄

開啟既有測試專案

  1. 開啟 Selenium IDE , 點選 Open an existing project ,選取既有專案進行開啟。

  2. 經由 Selenium IDE 產生儲存的 .side 檔,都可以透過 Selenium IDE 開啟,不限本機電腦。

返回目錄

測試腳本匯出

  1. 點選測試項目區塊的下拉選單,切換選項為 Tests 。

  2. 在要匯出的腳本點選右鍵 -> Export 。

  3. 選擇要匯出的腳本語言,點選 EXPORT ,選擇儲存位置即完成匯出動作。

    Include origin tracing code comments : 勾選此選項,匯出的檔案會包含測試步驟的相關註解。

    Export for use on Selenium Grid : 勾選此選項,匯出的檔案會包含遠程服務端的 URL。

返回目錄


附錄

網頁元素定位方式

使用 CSS Selector(選擇器) :

網頁前端三大要素
  • HTML : 衍生於 SGML(標準通用標記式語言)的標示語言,由開始 與 結束標籤組成,負責頁面資料與結構。

  • CSS : 負責頁面樣式呈現。

  • JavaScript : 負責頁面行為與互動。

頁面中的標籤節點就稱為 Element(元素),以下為簡單範例。

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="myDivId" class="myDivCSS">
            <div>
                <label>AAA</label>
                <input type="text" id="inputId1" class="inputCSS1" name="myName1" />
            </div>
            <div>
                <label>BBB</label>
                <input type="text" id="inputId2" class="inputCSS2" name="myName2" />
            </div>
        </div>
    </body>
</html>

 

以上的 html、head、title、body、div、label、input 都可稱為 Element(元素),可以於網頁點選 F12 開啟開發者工具,並切換到 Elements 頁面查看實際樣式。

Element 常見屬性
  1. id : 在每個頁面中都是唯一的,不可重複。

  2. class : 可以放置一或多個 CSS 樣式名。

  3. name : 與 id 相似,但在頁面中可以重複設定,較常在 input(輸入框)、select(下拉選單) 等 Element(元素)看到。

CSS Selector(選擇器)說明

都以選取上方 HTML 範例第一個 input 元素為例。

  1. id 選擇器 :

    項目 說明
    id 選擇器 透過元素的 id 屬性來選取該元素
    語法 #idname
    範例 #inputId1 ,會比對 id="inputId1" 的元素
  2. class 類別選擇器 :

    項目 說明
    class 選擇器 透過元素的 class 屬性來選取該元素
    語法 .cssName
    範例 .inputCSS1 ,會比對 class="inputCSS1" 的元素
  3. 屬性選擇器 :

    項目 說明
    屬性選擇器 透過元素的屬性來選取該元素
    語法 [屬性名稱="值"]
    範例 [name="myName1"] ,會比對 name="myName1" 的元素
  4. 標籤選擇器 :

    項目 說明
    標籤選擇器 透過元素的標籤名稱來選取該元素
    語法 element
    範例 input ,會比對所有 <input> 標籤的元素
    範例2 input[name="myName1"] 可以搭配屬性選擇器使用,會比對 <input name="myName1"> 的元素
CSS Selector 運用(Selenium IDE)

都以定位上方 HTML 範例第一個 input 元素為例。

  1. id :

    Target 語法
    直接使用 id 屬性定位 id=inputId1
    使用 CSS Selector 的 id 選擇器 css=#inputId1
  2. css :

    Target 語法
    使用 CSS Selector 的 class 選擇器 css=.inputCSS1
  3. name :

    Target 語法
    直接使用 name 屬性定位 name=myName1
    使用 CSS Selector 的標籤選擇器 css=input[name="myName1"]

使用 XPath :

XML

與 HTML 一樣衍生於 SGML(標準通用標記式語言),功能主要用來資料傳遞。

XPath (XML Path Language)

XML 的路徑語言,最初是用來搜尋 XML 文檔用,但也同樣適用於 HTML 的文檔搜尋,每一個標籤都稱為節點。

XPath 表達式
  1. @ : 選取元素的屬性

  2. // : 從當前節點選取所有子節點

  3. / : 選取當前節點

  4. .. : 選取父節點

參考圖示:

XPath 運用(Selenium IDE) :
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="myDivId" class="myDivCSS">
            <div>
                <label>AAA</label>
                <input type="text" id="inputId1" class="inputCSS1" name="myName1" />
            </div>
            <div>
                <label>BBB</label>
                <input type="text" id="inputId2" class="inputCSS2" name="myName2" />
            </div>
        </div>
    </body>
</html>

 

以定位上方 HTML 第一個 input 元素為例。

Target 語法
使用 XPath xpath=//div[@id="myDivId"]/div[0]/input

語法拆解:

  1. //div[@id="myDivId"] : 選取 <div> 標籤且 id 屬性為 myDivId 的所有子節點

  2. /div[0] : 選取子節點中第一個 <div> 標籤節點

    若有很多兄弟節點,可以透過 陣列[索引] 的方式取得節點,索引從 0 開始計算

  3. /input : 選取 input 元素

Target 語法
使用 XPath xpath=//input[@name="myName1"]

語法拆解:

  1. //input[@name="myName1"] : 取得 <input> 標籤且 name 屬性為 myName1 的節點

返回目錄


匯出腳本語法說明(javascript)

說明圖示:

Selenium WebDriver 常用類別:

  1. Builder : 用來建立 webdrive 用,可以設定測試流程中會使用到的相關屬性,如顯示視窗大小等。

  2. By : 指定要透過何種方式去定位選取頁面上的元素,如 id、css、name、xpath 等。

  3. Key : 定義鍵盤相關操作指令的類別,如按下 Enter 鍵等。

  4. until : 定義 Wait(等待) 的相關指令。

返回目錄


Selenium IDE 與 Selenium WebDriver 定位元素語法比較

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="myDivId" class="myDivCSS">
            <div>
                <label>AAA</label>
                <input type="text" id="inputId1" class="inputCSS1" name="myName1" />
            </div>
            <div>
                <label>BBB</label>
            </div>
        </div>
    </body>
</html>

 

以定位上方 HTML input 元素為例。

  1. 透過元素 id 屬性進行定位

    Selenium IDE Target 設定 Selenium WebDriver 設定
    id=inputId1 await driver.findElement(By.id("inputId1"));
  2. 透過元素 name 屬性進行定位

    Selenium IDE Target 設定 Selenium WebDriver 設定
    name=myName1 await driver.findElement(By.name("myName1"));
  3. 透過元素 class 屬性進行定位(css 選擇器)

    Selenium IDE Target 設定 Selenium WebDriver 設定
    css=.inputCSS1 await driver.findElement(By.css(".inputCSS1"));

    其他 CSS 選擇器

      Selenium IDE Target 設定 Selenium WebDriver 設定
    id 選擇器 css=#inputId1 await driver.findElement(By.css("#inputId1"));
     
    標籤選擇器 css=input await driver.findElement(By.css("input"));
     
    屬性選擇器 css=[name="myName1"] await driver.findElement(By.css("[name='myName1']"));
     
    標籤選擇器搭配屬性選擇器 css=input[name="myName1"] await driver.findElement(By.css("input[name='myName1']"));
     
  4. 透過 XPath 表達式進行定位

    Selenium IDE Target 設定 Selenium WebDriver 設定
    xpath=//div[@id="myDivId"]/div[0]/input await driver.findElement(By.xpath("//div[@id='myDivId']/div[0]/input"));
    xpath=//input[@name="myName1"] await driver.findElement(By.xpath("//input[@name='myName1']"));

返回目錄


以上為 Selenium IDE 這項工具的簡易操作介紹,有興趣的可以再做進一步的研究,如有文章內容、觀念錯誤或侵權的內容還請告知~謝謝。

馮三益