• Selenium Video Tutorials

Selenium IDE - 建立指令碼



Selenium IDE 可用於建立自動化測試指令碼。最新版本的 Selenium IDE 可作為 Chrome 和 Firefox 的擴充套件程式使用。為了在 Selenium IDE 上建立測試,基本前提是從各自的網路商店下載 Selenium IDE 的 Chrome 或 Firefox 擴充套件程式。

一旦我們開始在 Selenium IDE 中建立指令碼,我們就可以掌握測試指令碼編輯框,其中指令碼編輯框的每個部分都有其特定的功能。

在 Selenium IDE 中建立測試指令碼

在 Selenium IDE 中建立測試指令碼的步驟如下所示:

步驟 1 - 點選安裝後在瀏覽器上可見的 Selenium IDE 擴充套件程式。

Selenium IDE Creating Script 1

步驟 2 - Selenium IDE 應該啟動,並顯示包含工具版本的歡迎訊息。在下圖中,安裝的版本為 3.17.2。

除此之外,它還提供選擇我們想要使用該工具執行的操作的選項,例如在新專案中錄製新測試、開啟現有專案、建立新專案和關閉 Selenium IDE。

此外,還提供了一個帶有文字“Selenium IDE 專案頁面”的連結,點選該連結後,將跳轉到 Selenium 整合開發環境文件頁面。

https://www.selenium.dev/selenium-ide/

Selenium IDE Creating Script 2

步驟 3 - 我們將點選在新專案中錄製新測試選項。之後,我們需要輸入專案名稱,例如SeleniumIDE1。最後,點選確定。

Selenium IDE Creating Script 3

步驟 4 - 在開始在 Selenium IDE 中建立測試之前,我們需要指定應用程式基本 URL,我們將在其中錄製和建立測試。在下圖中,我們輸入了基本 URL:https://tutorialspoint.tw/selenium/。最後,我們需要點選開始錄製

Selenium IDE Creating Script 4

步驟 5 - 應該開啟在步驟 4 中提供基本 URL 的相應應用程式,其中顯示 Selenium IDE 徽標和紅色的 Selenium IDE 錄製訊息。此外,Selenium IDE 的頂部應該可見一個紅色圖示(在下圖中突出顯示),表示正在應用程式中進行錄製。

Selenium IDE Creating Script 5

步驟 6 - 我們將在應用程式上執行一些步驟,並且相應的步驟也會記錄在 Selenium IDE 中。

Selenium IDE Creating Script 6

步驟 7 - 一旦所有測試都已執行完畢,我們將透過點選步驟 5 中提到的紅色圖示來停止錄製。之後,我們需要輸入測試的名稱。在下圖中,我們輸入了測試名稱為 TestCase1。最後,點選確定。

Selenium IDE Creating Script 7

步驟 8 - 我們在應用程式上執行的所有步驟都將在 Selenium IDE 的命令、目標和值欄位下進行記錄。此外,測試用例名稱 - TestCase1 將顯示在左側面板中,以及右上角的REC按鈕。

下圖中突出顯示的部分描繪了 Selenium IDE 中的文字指令碼編輯器面板。它包含以測試步驟形式記錄的使用者互動,這些測試步驟在啟用錄製時記錄。文字指令碼編輯器面板還包含三列 - 命令、目標和值。

命令列包含 Selenium 命令,目標列包含定位器值、URL 等。最後,值列可用於傳遞要輸入的值。

Selenium IDE Creating Script 8

如果選擇了特定步驟(就像下圖中的步驟 3 一樣),則啟用/停用命令選項將被啟用。選擇它後,該特定步驟命令將被停用,並在左側顯示 // 符號。

觸發測試後,將執行除停用命令以外的所有步驟。我們可以透過再次點選啟用/停用命令按鈕來啟用相同的步驟,並且 // 符號也將消失。因此,啟用/停用命令是文字指令碼編輯器的另一個重要部分。

Selenium IDE Creating Script 9

在某些情況下,觀察到點選網頁上的連結/按鈕後,會彈出一個新視窗,這種情況可以使用下圖中突出顯示的新增新視窗配置按鈕來處理。

Selenium IDE Creating Script 10

點選它後,將出現一條帶有訊息新視窗配置的彈出視窗。我們需要選中啟用新視窗配置複選框,輸入視窗名稱,然後點選確認

Selenium IDE Creating Script 11

為了讓 Selenium IDE 自動定位元素,我們可以使用在頁面中選擇目標按鈕。

Selenium IDE Creating Script 12

點選後,它將為使用者提供選擇元素的選項,並根據該選項,Selenium IDE 將自動生成其定位器值。

Selenium IDE Creating Script 13

目標頁面中會生成相應的定位器值。之後,如果選擇了在頁面中查詢目標,則會高亮顯示已生成定位器值的元素。

Selenium IDE Creating Script 14

請注意,只有在命令欄位中有內容的情況下,在頁面中查詢目標、在頁面中選擇目標、新增新視窗配置啟用/停用命令按鈕才會啟用,否則它們將保持停用狀態,如下圖所示。

Selenium IDE Creating Script 15

步驟 9 − 建立測試後,可以透過點選測試步驟來檢視該步驟的詳細資訊。完成後,這些資訊將顯示在底部的命令、目標和值欄位中。在下面的示例中,我們點選了第四步,其中命令、目標欄位的值分別為type、id=nameSelenium。在此步驟中,我們基本上在一個輸入框中輸入了文字 Selenium,該輸入框透過 id 定位器標識,其值為 name。

文字指令碼編輯器面板中,可以選擇一個步驟來編輯命令、目標和值。

Selenium IDE Creating Script 16

步驟 10 − 如果點選目標欄位中的下拉選單,我們會發現 Selenium IDE 在錄製過程中成功捕獲了元素的所有其他定位器值。在下面的示例中,我們點選了第四步,其中命令、目標欄位的值分別為type、id=nameSelenium。在此步驟中,該元素的其他定位器值(如 name、css 等)都顯示在目標下拉選單中。

Selenium IDE Creating Script 17

步驟 11 − 點選我們建立的測試中的任何步驟後,可以透過導航到下面的參考選項卡來檢視命令的詳細資訊和執行的操作。

Selenium IDE Creating Script 18

步驟 12 − 可以右鍵點選任何步驟,獲得手動插入新命令(新增新步驟)、剪下、複製、清除、切換斷點(用於除錯)等選項。

Selenium IDE Creating Script 19

步驟 13 − 要執行建立的測試,請點選頂部運行當前測試按鈕,如下圖所示。

Selenium IDE Creating Script 20

如果有多個測試,則需要點選如下圖所示的執行所有測試按鈕。

Selenium IDE Creating Script 21

如果步驟中添加了斷點,則需要點選如下圖所示的單步執行當前命令按鈕,其中步驟 2 和 4 有斷點。

Selenium IDE Creating Script 22

步驟 14 − 可以使用如下圖所示的測試執行速度按鈕來控制測試執行的速度。

Selenium IDE Creating Script 23

預設情況下,Selenium IDE 的速度設定為快速。

Selenium IDE Creating Script 24

步驟 15 − Selenium IDE 提供了使用右上角的圖示建立、開啟和儲存專案的選項,如下圖所示。

Selenium IDE Creating Script 25

我們將儲存我們的專案並繼續。儲存後,需要指定專案名稱和儲存位置。

Selenium IDE Creating Script 26

步驟 16 − 我們將使用運行當前測試按鈕執行測試 - TestCase1。

步驟 17 − 執行完成後,我們將收到結果訊息。如果測試透過,我們將在 Selenium IDE 底部的“日誌”選項卡下收到訊息 - <測試名稱> 完成成功。這裡,我們的測試名稱是 TestCase1,因此收到了訊息 - TestCase1 完成成功

除此之外,所有測試步驟以及測試用例名稱都變為綠色,反映所有步驟均透過。在“日誌”選項卡下顯示的所有步驟都顯示為綠色的“OK”。

因此,在 Selenium IDE 中,我們可以獲得測試結果資訊,包括測試步驟級別,並且只有當所有步驟都成功執行後,我們才能在測試用例級別獲得 PASS。

Selenium IDE Creating Script 27

因此,在本教程中,我們討論瞭如何使用 Selenium IDE 建立指令碼。

廣告