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

• 目錄

  • 前言
  • Selenium 簡介
  • Selenium 組成
  • Selenium IDE 安裝
  • 使用 Selenium IDE 進行測試項目錄製
  • 擴充套件介面介紹
  • Selenium 指令
  • 元素定位器
  • 新增測試指令
  • 測試的檢核驗證
  • 條件判斷式指令運用
  • 迴圈指令運用
  • select 指令運用
  • 擷取動態來源資料進行檢核
  • 儲存測試專案
  • 開啟既有測試專案
  • 測試腳本匯出

• 附錄

  • 網頁元素定位方式
    • 使用 CSS Selector(選擇器)
      • 網頁前端三大要素
      • Element 常見屬性
      • CSS Selector(選擇器)說明
      • CSS Selector 運用(Selenium IDE)
    • 使用 XPath
      • XML
      • XPath (XML Path Language)
      • XPath 表達式
      • XPath 運用(Selenium IDE)
  • 匯出腳本語法說明(javascript)
  • Selenium IDE 與 Selenium WebDriver 定位元素語法比較

前言

當網頁製作完成後，都必須對頁面表單、按鈕進行手動測試，當頁面內容簡單且只有 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 元素為例。

語法拆解:

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

   

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

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

   

3. /input : 選取 input 元素

   

語法拆解:

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 這項工具的簡易操作介紹，有興趣的可以再做進一步的研究，如有文章內容、觀念錯誤或侵權的內容還請告知~謝謝。