Selenium IDE - 定位策略

---

---

Selenium IDE 擁有多種定位策略，有助於自動化測試用例。但是，Selenium IDE 預設情況下無法識別網頁上的元素。為了定位元素，我們需要藉助定位器，例如 id、name、css 和 xpath。

除了上述定位器之外，舊版本的 Selenium IDE 還支援其他定位器，例如 DOM 和 identifier，但是它們在最新版本中已被棄用。

示例

讓我們以以下頁面為例，在 First Name: 標籤旁邊輸入文字 Selenium。這可以透過首先使用各種定位器定位元素來實現。

識別 Web 元素

右鍵單擊網頁，然後在 Chrome 瀏覽器中單擊“檢查”按鈕，執行此操作後，網頁的 HTML 程式碼將可訪問。要檢查頁面上的元素，請單擊下面突出顯示的向左向上箭頭。

一旦我們單擊並將箭頭指向輸入框（在下面的影像中突出顯示），它的 HTML 程式碼就會出現。

Selenium IDE 中定位元素的功能

在 Selenium IDE 中錄製後建立測試後，我們就可以透過單擊它來獲取該測試中任何特定步驟的詳細資訊。單擊“目標”欄位中的下拉列表，Selenium IDE 在錄製時成功捕獲了元素的所有定位器，例如 id、name、css、xpath 等。

單擊第 4 步，其 Command、Target 和 Value 欄位的值分別為 type、id=name 和 Selenium。該元素的其他定位器值（如 name、css 等）在“目標”下拉列表中可見。

我們在應用程式上執行的所有步驟都將在 Selenium IDE 的 Command、Target 和 Value 欄位中記錄，右上角有一個 REC 按鈕。

下面突出顯示的影像部分表示文字指令碼編輯器窗格。它包含在啟用錄製時以測試步驟形式記錄的所有使用者互動。

要在 Selenium IDE 中預設識別 Web 元素，請單擊下面影像中突出顯示的 “在頁面中選擇目標” 按鈕。

單擊 “在頁面中選擇目標” 按鈕後，使用者將在網頁上獲得 “選擇元素” 按鈕。選擇元素後，其定位器值將由 Selenium IDE 填充。

所選 Web 元素的對應定位器值已在“目標”中生成。然後，如果單擊 “在頁面中查詢目標” 按鈕，則定位器值已填充的元素將在頁面上突出顯示。

請注意，“在頁面中查詢目標” 和 “在頁面中選擇目標” 按鈕僅在 Command 欄位中存在有效值時才啟用，否則它們將保持停用狀態，如下面的影像中突出顯示的那樣。

定位器 ID

使用 id 定位器定位輸入框，然後在 Selenium IDE 中輸入文字 Selenium 的步驟如下所示：

步驟 1 - 執行儲存和訪問變數的步驟 1 到 4。

步驟 2 - 在 Command 欄位中輸入 open，在 Target 欄位中輸入Selenium 自動化實踐表單，以啟動應用程式。

步驟 3 - 在 Command 欄位中輸入 type，在 Target 欄位中輸入 id=firstname，在 Value 欄位中輸入 Selenium。請注意，id=firstname 是 id 定位器，其值為輸入框的 firstname，Selenium 是要輸入的值。

步驟 4 - 在 Command 欄位中輸入 close 以終止瀏覽器。

步驟 5 - 單擊“執行所有測試”按鈕。

在上面的示例中，我們使用 id 定位器在 First Name: 標籤旁邊的輸入框中輸入了文字 Selenium，該標籤出現在日誌下。此外，我們在頂部獲得了綠色勾號，表示測試已透過。

定位器 Name

使用 name 定位器定位輸入框，然後在 Selenium IDE 中輸入文字 Selenium 的步驟如下所示：

步驟 1 - 單擊上面示例中建立的第二步，並在 Command 欄位中輸入 type，在 Target 欄位中輸入 name=firstname，在 Value 欄位中輸入 Selenium。請注意，name=firstname 是 name 定位器，其值為輸入框的 firstname，Selenium 是要輸入的值。

步驟 2 - 單擊“執行所有測試”，並等待測試執行完成。

在上面的示例中，我們使用 name 定位器在 First Name: 標籤旁邊的輸入框中輸入了文字 Selenium，該標籤出現在日誌下。

定位器 CSS

使用 css 定位器定位輸入框，然後在 Selenium IDE 中輸入文字 Selenium 的步驟如下所示：

步驟 1 - 單擊上面示例中建立的第二步，並在 Command 欄位中輸入 type，在 Target 欄位中輸入 css=input#firstname，在 Value 欄位中輸入 Selenium。請注意，css=input#firstname 是 css 定位器，其值為輸入框的 input#firstname，Selenium 是要輸入的值。

步驟 2 - 單擊“執行所有測試”。

在上面的示例中，我們使用 css 定位器在 First Name: 標籤旁邊的輸入框中輸入了文字 Selenium，該標籤出現在日誌下。

定位器 Xpath

使用 xpath 定位器定位輸入框，然後在 Selenium IDE 中輸入文字 Selenium 的步驟如下所示：

步驟 1 - 單擊上面示例中建立的第二步，並在 Command 欄位中輸入 type，在 Target 欄位中輸入 xpath=//input[@id='firstname']，在 Value 欄位中輸入 Selenium。請注意，xpath=//input[@id='firstname'] 是 xpath 定位器，其值為輸入框的 //input[@id='firstname']，Selenium 是要輸入的值。

步驟 2 - 單擊頂部的“執行所有測試”。

在上面的示例中，我們使用 xpath 定位器在 First Name: 標籤旁邊的輸入框中輸入了文字 Selenium，該標籤出現在日誌下。

結論

本教程全面介紹了 Selenium IDE 定位策略。我們從一個示例開始，逐步講解了不同的定位策略，並演示瞭如何在 Selenium 中使用它們。這將使您深入瞭解 Selenium IDE 中的定位策略。建議您持續練習所學內容，並探索與 Selenium 相關的其他內容，以加深理解並拓寬視野。