# Selenium IDE 中的定位器：CSS 選擇器，DOM，XPath，鏈接文本，ID > 原文： [https://www.guru99.com/locators-in-selenium-ide.html](https://www.guru99.com/locators-in-selenium-ide.html) ## 什么是定位器？ Locator is a command that tells Selenium IDE which GUI elements ( say Text Box, Buttons, Check Boxes etc) its needs to operate on. ?Identification of correct GUI elements is a prerequisite to creating an automation script. But accurate identification of GUI elements is more difficult than it sounds. Sometimes, you end up working with incorrect GUI elements or no elements at all! ?Hence, Selenium provides a number of Locators to precisely locate a GUI element Selenium IDE 中不同類型的定位器 <center>**What You Will Learn:** []</center> * [ID](#1) * [名稱](#2) * [鏈接文本](#3) * [CSS 選擇器](#4) * [標簽和 ID](#5) * [標簽和類別](#6) * [標簽和屬性](#7) * [標簽，類和屬性](#8) * [內部文字](#9) * [DOM（文檔對象模型）](#10) * [getElementById](#11) * [getElementsByName](#12) * [dom：名稱](#13) * [dom：索引](#14) * [XPath](#15) 有些命令不需要定位器（例如“ open”命令）。 但是，其中大多數確實需要定位器。 **定位器的選擇在很大程度上取決于您的被測應用**。 在本教程中，我們將基于這些應用程序支持的定位器在 Facebook，新的 tour.demoaut 之間切換。 同樣，在[測試](/software-testing.html)項目中，您將根據應用程序支持選擇上面列出的任何定位器。 ## 按 ID 定位 這是最常見的元素定位方式，因為 ID 對于每個元素而言都是唯一的。 **目標格式：元素的** id = *id* 在此示例中，我們將使用 Facebook 作為測試應用程序，因為 Mercury Tours 不使用 ID 屬性。 **步驟 1。**自從創建本教程以來，Facebook 更改了其登錄頁面設計。 使用此演示頁面 [http://demo.guru99.com/test/facebook.html](http://demo.guru99.com/test/facebook.html) 進行測試。 使用 Firebug 檢查“電子郵件或電話”文本框，并記下其 ID。 在這種情況下，ID 為“電子郵件”。  **步驟 2。**啟動 Selenium IDE，然后在“目標”框中輸入“ id = email”。 單擊“查找”按鈕，注意“電子郵件或電話”文本框以黃色突出顯示，并以綠色邊框，這意味著 Selenium IDE 能夠正確找到該元素。  ## 按名稱查找 按名稱查找元素與按 ID 查找非常相似，不同之處在于，我們改用**“ name =”** 前綴。 **目標格式：**名稱= *元素的名稱* 在下面的演示中，我們現在將使用 Mercury Tours，因為所有重要元素都有名稱。 **步驟 1。**導航至 [http://demo.guru99.com/test/newtours/](http://demo.guru99.com/test/newtours/) ，然后使用 Firebug 檢查“用戶名”文本框。 注意其名稱屬性。  在這里，我們看到元素的名稱是“ userName”。 **步驟 2。**在 Selenium IDE 中，在“目標”框中輸入“名稱=用戶名”，然后單擊“查找”按鈕。 Selenium IDE 應該能夠通過突出顯示它來找到“用戶名”文本框。  ## 使用過濾器按名稱查找 當多個元素具有相同的名稱時，可以使用過濾器。 **過濾器是用于區分具有相同名稱的元素的附加屬性。** **目標格式**：名稱= *name_of_the_element* *過濾器* = *value_of_filter* 讓我們看一個例子- **步驟 1** 。 使用“教程”作為用戶名和密碼登錄到 Mercury Tours。 它應該帶您到下面顯示的 Flight Finder 頁面。  **步驟 2。**使用 Firebug，注意往返和單向單選按鈕具有相同的名稱“ tripType”。 但是，它們具有不同的 VALUE 屬性，因此我們可以將它們中的每一個用作我們的過濾器。  **步驟 3。** * 我們將首先訪問“單向”單選按鈕。 單擊編輯器上的第一行。 * 在 Selenium IDE 的“命令”框中，輸入命令“單擊”。 * 在“目標”框中，輸入“名稱= tripType 值=單向”。 “值=單向”部分是我們的過濾器。  **步驟 4** 。 單擊“查找”按鈕，注意 Selenium IDE 能夠以綠色突出顯示“單向”單選按鈕-這意味著我們能夠使用其 VALUE 屬性成功訪問該元素。  **步驟 5。**按下鍵盤上的“ X”鍵以執行此單擊命令。 請注意，單向單選按鈕已被選中。  您這次可以使用“往返”單選按鈕執行完全相同的操作，使用“名稱= tripType 值=往返”作為目標。 ## 通過鏈接文本定位 這種類型的定位器僅適用于超鏈接文本。 我們通過在目標前面添加“ link =“，然后是超鏈接文本來訪問該鏈接。 **目標格式**：鏈接= *link_text* 在此示例中，我們將訪問 Mercury Tours 主頁上的“ REGISTER”鏈接。 **步驟 1。** * 首先，請確保您已從 Mercury Tours 注銷。 * 轉到 Mercury Tours 主頁。 **步驟 2** 。 * 使用 Firebug，檢查“ REGISTER”鏈接。 鏈接文本位于和標簽之間。 * 在這種情況下，我們的鏈接文本為“ REGISTER”。 復制鏈接文本。  **步驟 3** 。 在 Firebug 中復制鏈接文本，然后將其粘貼到 Selenium IDE 的“目標”框中。 前綴“ link =“。  **步驟 4。**單擊“查找”按鈕，注意 Selenium IDE 能夠正確突出顯示 REGISTER 鏈接。  **步驟 5。**要進一步驗證，請在“命令”框中輸入“ clickAndWait”并執行它。 Selenium IDE 應該能夠成功單擊該 REGISTER 鏈接，并將您帶到下面顯示的“注冊”頁面。  ## 通過 CSS 選擇器定位 CSS 選擇器是字符串模式，用于基于 HTML 標簽，id，類和屬性的組合來標識元素。 通過 CSS Selector 進行定位比以前的方法更為復雜，但這是高級 Selenium 用戶最常用的定位策略，因為它甚至可以訪問沒有 ID 或名稱的元素。 CSS 選擇器有多種格式，但我們僅關注最常見的格式。 * 標簽和 ID * 標簽和類別 * 標簽和屬性 * 標簽，類和屬性 * 內部文字 使用此策略時，我們始終在“目標”框中添加“ css =“前綴，如以下示例所示。 ## 通過 CSS 選擇器定位-標簽和 ID 同樣，在此示例中，我們將使用 Facebook 的“電子郵件”文本框。 您可能還記得，它的 ID 為“電子郵件”，我們已經在“按 ID 定位”部分中對其進行了訪問。 這次，我們將使用具有 ID 的 CSS 選擇器來訪問相同的元素。 | **語法** | **說明** | | css = *標簽*＃ *id* | * 標簽=所訪問元素的 HTML 標簽 * ＃=哈希符號。 當使用 ID 為 * 的 CSS 選擇器時，應始終存在該標識符。 | **請記住，ID 始終以井號（＃）開頭。** **步驟 1\.** 導航至 [www.facebook.com](http://www.facebook.com/) 。 使用 Firebug，檢查“電子郵件或電話”文本框。 此時，請注意 HTML 標記為“輸入”，其 ID 為“電子郵件”。 因此，我們的語法將為“ css = input＃email”。  **步驟 2。**在 Selenium IDE 的“目標”框中輸入“ css = input＃email”，然后單擊“查找”按鈕。 Selenium IDE 應該能夠突出顯示該元素。  ## 通過 CSS 選擇器定位-標簽和類 使用 HTML 標記和類名稱通過 CSS Selector 進行定位與使用標記和 ID 相似，但是在這種情況下，使用點（。）代替了井號。 | **Syntax** | **Description** | | css = *標簽*。 *類* | * 標簽=要訪問的元素的 HTML 標簽 * 。 =點號。 當將 CSS 選擇器與類 * 一起使用時，應該始終存在該類。=所訪問元素的類 | **步驟 1。**轉到演示頁面 [http://demo.guru99.com/test/facebook.html](http://demo.guru99.com/test/facebook.html) 并使用 Firebug 檢查“電子郵件或電話”文本框。 請注意，其 HTML 標記為“ input”，其類為“ inputtext”。  **步驟 2。**在 Selenium IDE 中，在“目標”框中輸入“ css = input.inputtext”，然后單擊“查找”。 Selenium IDE 應該能夠識別“電子郵件”或“電話”文本框。  **請注意，當多個元素具有相同的 HTML 標簽和名稱時，將僅識別源代碼中的第一個元素**。 使用 Firebug，檢查 Facebook 中的“密碼”文本框，并注意它與“電子郵件”或“電話”文本框的名稱相同。  上圖中僅突出顯示“電子郵件”或“電話”文本框的原因是，它首先出現在 Facebook 的頁面源中。  ## 通過 CSS 選擇器定位-標簽和屬性 此策略使用 HTML 標記和要訪問的元素的特定屬性。 | 句法 | 描述 | | css = *標簽* [*屬性* = *值*] | * 標簽=所訪問元素的 HTML 標簽 * [和] =將在其中放置特定屬性及其對應值的方括號 * 屬性=屬性 要使用的。 建議使用元素唯一的屬性，例如名稱或 ID。 * 值=所選屬性的相應值。 | **步驟 1。**導航至 Mercury Tours 的注冊頁面（ [http://demo.guru99.com/test/newtours/register.php](http://demo.guru99.com/test/newtours/register.php) ）并檢查“姓氏”文本框 。 注意其 HTML 標記（在這種情況下為“ input”）和名稱（“ lastName”）。  **步驟 2。**在 Selenium IDE 中，在“目標”框中輸入“ css = input [name = lastName]”，然后單擊“查找”。 Selenium IDE 應該能夠成功訪問“姓氏”框。  **當多個元素具有相同的 HTML 標簽和屬性時，將僅識別第一個元素**。 此行為類似于使用具有相同標簽和類的 CSS 選擇器定位元素。 ## 通過 CSS 選擇器定位-標簽，類和屬性 | 語法 | 說明 | | css = *tag.class* [*屬性* = *值*] | * 標簽=要訪問的元素的 HTML 標簽 * 。 =點號。 當 CSS 選擇器與類 * 類=所訪問元素的類一起使用時，應始終存在 * [和] =方括號，其中將包含特定屬性及其對應值 放置的 * 屬性=要使用的屬性。 建議使用元素唯一的屬性，例如名稱或 ID。 * 值=所選屬性的相應值。 | **步驟 1。**轉到演示頁面 [http://demo.guru99.com/test/facebook.html](http://demo.guru99.com/test/facebook.html) 并使用 Firebug 檢查“電子郵件或電話”和“密碼” 輸入框。 注意它們的 HTML 標記，類和屬性。 在此示例中，我們將選擇其“ tabindex”屬性。  **步驟 2。**。我們將首先訪問“電子郵件或電話”文本框。 因此，我們將使用 tabindex 值為 1。在 Selenium IDE 的“目標”框中輸入“ css = input.inputtext [tabindex = 1]”，然后單擊“查找”。 “電子郵件或電話”輸入框應突出顯示。  **步驟 3。**要訪問密碼輸入框，只需替換 tabindex 屬性的值即可。 在“目標”框中輸入“ css = input.inputtext [tabindex = 2]”，然后單擊“查找”按鈕。 Selenium IDE 必須能夠成功識別“密碼”文本框。  ## 通過 CSS 選擇器定位-內部文本 您可能已經注意到，很少給 HTML 標簽提供 id，name 或 class 屬性。 那么，我們如何訪問它們？ 答案是通過使用其內部文本。 **內部文本是 HTML 標簽在頁面上顯示的實際字符串模式。** | **Syntax** | **Description** | | css = *標簽*：contains（“ *內部文本*”） | * 標簽=所訪問元素的 HTML 標簽 * 內部文本=元素的內部文本 | **步驟 1。**導航至 Mercury Tours 的主頁（ [http://demo.guru99.com/test/newtours/](http://demo.guru99.com/test/newtours/) ），然后使用 Firebug 來研究“密碼”標簽。 記下它的 HTML 標記（在這種情況下為“ font”），并注意它沒有類，id 或名稱屬性。  **步驟 2。**在 Selenium IDE 的“目標”框中鍵入 **css = font：contains（“ Password：”）**，然后單擊“查找”。 Selenium IDE 應該能夠訪問密碼標簽，如下圖所示。  **步驟 3。**這次，將內部文本替換為“波士頓”，這樣您的目標現在將變為“ css = font：contains（“波士頓”）“。 單擊查找。 您應注意，“波士頓到舊金山”標簽將突出顯示。 這表明即使您僅指示了其內部文本的第一個單詞，Selenium IDE 仍可以訪問長標簽。  ## 按 DOM（文檔對象模型）定位 簡而言之，文檔對象模型（DOM）是 HTML 元素的構建方式。 Selenium IDE 能夠在訪問頁面元素時使用 DOM。 如果使用此方法，則“目標”框將始終以“ dom = document ...”開頭； 但是，通常會刪除“ dom =“前綴，因為 Selenium IDE 能夠自動將以關鍵字“ document”開頭的任何內容解釋為 DOM 中的路徑。 通過 DOM 定位元素有四種基本方法： * getElementById * getElementsByName * dom：name（僅適用于命名形式中的元素） * dom：索引 ## 按 DOM 定位-getElementById 讓我們專注于第一種方法-使用 getElementById 方法。 語法為： | **Syntax** | **Description** | | document.getElementById（“ *元素的 ID* ”） | 元素的 ID =這是要訪問的元素的 ID 屬性的值。 此值應始終放在一對括號（“”）中。 | **步驟 1。**使用此演示頁 [http://demo.guru99.com/test/facebook.html](http://demo.guru99.com/test/facebook.html) 導航至該頁面并使用 Firebug 檢查“保持登錄狀態”檢查 框。 記錄其 ID。  我們可以看到我們應該使用的 ID 是“ persist_box”。 **步驟 2。**打開 Selenium IDE，然后在“目標”框中輸入“ document.getElementById（“ persist_box”）”，然后單擊“查找”。 Selenium IDE 應該能夠找到“保持登錄狀態”復選框。 盡管它無法突出顯示復選框的內部，但 Selenium IDE 仍然可以用明亮的綠色邊框圍繞元素，如下所示。  ## 按 DOM 定位-getElementsByName getElementById 方法一次只能訪問一個元素，該元素就是您指定的 ID。 getElementsByName 方法是不同的。 它收集具有指定名稱的元素數組。 您可以使用從 0 開始的索引訪問各個元素。 |  | **getElementById** * 它只會為您提供一個要素。 * 該元素帶有您在 getElementById（）括號內指定的 ID。 | |  | **的 getElementsByName** * 它將獲得名稱相同的元素的集合。 * 每個元素都以從 0 開始的數字索引，就像數組一樣 * 通過在下面的 getElementsByName 語法中將其索引號放在方括號中，可以指定要訪問的元素。 | | **Syntax** | **Description** | | document.getElementsByName（“ *名稱*”）[*索引*] | * 名稱=由其“名稱”屬性定義的元素名稱 * 索引=整數，指示將使用 getElementsByName 數組中的哪個元素。 | **步驟 1\.** 導航至 Mercury Tours 的主頁，并使用“ tutorial”作為用戶名和密碼登錄。 Firefox 應該帶您到 Flight Finder 屏幕。 **步驟 2。**使用 Firebug，檢查頁面底部的三個單選按鈕（經濟艙，商務艙和頭等艙單選按鈕）。 請注意，它們都具有相同的名稱，即“ servClass”。  **步驟 3。**首先讓我們訪問“經濟艙”單選按鈕。 在所有這三個單選按鈕中，此元素排在最前面，因此索引為 0。在 Selenium IDE 中，鍵入“ document.getElementsByName（“ servClass”）[0]“，然后單擊“查找”按鈕。 Selenium IDE 應該能夠正確識別經濟艙單選按鈕。  **步驟 4。**將索引號更改為 1，以便您的目標現在將成為 document.getElementsByName（“ servClass”）[1]。 單擊“查找”按鈕，Selenium IDE 應該能夠突出顯示“業務類別”單選按鈕，如下所示。  ## 按 DOM 定位-dom：name 如前所述，僅當您正在訪問的元素包含在命名表單中時，此方法才適用。 | **語法** | **說明** | | document.forms [“ *格式為*的名稱”] .elements [“ *元素名稱*”] | * 表單的名稱=包含要訪問的元素的表單標簽的 name 屬性的值 * 元素的名稱=您所使用元素的 name 屬性的值 希望訪問 | **步驟 1。**導航至 Mercury Tours 主頁（ [http://demo.guru99.com/test/newtours/](http://demo.guru99.com/test/newtours/) ），然后使用 Firebug 檢查“用戶名”文本框。 請注意，它包含在名為“ home”的表單中。  **步驟 2。**在 Selenium IDE 中，鍵入“ document.forms [“ home”]。elements [“ userName”]“，然后單擊“查找”按鈕。 Selenium IDE 必須能夠成功訪問元素。  ## 按 DOM 定位-dom：index 即使該元素不在命名表單中，該方法也適用，因為它使用表單的索引而不是其名稱。 | **Syntax** | **Description** | | document.forms [格式為的*索引] .elements [元素*的*索引]* | 表格的 * 索引=表單相對于整個頁面的索引號（從 0 開始） | 我們將訪問 Mercury Tours 注冊頁面中的“電話”文本框。 該頁面中的表單沒有名稱和 ID 屬性，因此這將是一個很好的例子。 **步驟 1\.** 導航到 Mercury Tours Registration 頁面，然后檢查 Phone 文本框。 請注意，包含它的表單沒有 ID 和 name 屬性。  **步驟 2。**在 Selenium IDE 的“目標”框中輸入“ document.forms [0] .elements [3]”，然后單擊“查找”按鈕。 Selenium IDE 應該能夠正確訪問“電話”文本框。  **步驟 3。**或者，您可以使用元素的名稱而不是其索引來獲得相同的結果。 在 Selenium IDE 的“目標”框中輸入“ document.forms [0] .elements [“電話”]”。 電話文本框仍應突出顯示。  ## 通過 XPath 定位 XPath 是查找 XML（可擴展標記語言）節點時使用的語言。 由于可以將 HTML 視為 XML 的實現，因此我們也可以使用 [XPath](/xpath-selenium.html) 來定位 HTML 元素。 **優點：**它幾乎可以訪問任何元素，即使沒有類，名稱或 id 屬性的元素也是如此。 **缺點：**由于太多不同的規則和考慮因素，它是識別元素的最復雜的方法。 幸運的是，Firebug 可以自動生成 XPath 定位器。 在下面的示例中，我們將訪問無法通過我們前面討論的方法訪問的圖像。 **步驟 1。**導航至 Mercury Tours 主頁，然后使用 Firebug 檢查黃色“鏈接”框右側的橙色矩形。 請參考下圖。  **步驟 2** 。 右鍵單擊元素的 HTML 代碼，然后選擇“復制 XPath”選項。  **步驟 3。**在 Selenium IDE 中，在“目標”框中鍵入一個正斜杠“ /”，然后粘貼在上一步中復制的 XPath。 **現在，“目標”框中的條目應以兩個正斜杠“ //”開頭。**  **步驟 4** 。 單擊查找按鈕。 Selenium IDE 應該能夠突出顯示橙色框，如下所示。  ## 摘要 Syntax for Locator Usage | **方法** | **目標語法** | **范例** | | 按編號 | id = *id_of_the_element* | id =電子郵件 | | 按名字 | name = *name_of_the_lement* | 名稱=用戶名 | | 按名稱使用過濾器 | name = *name_of_the_element* *過濾器* = *value_of_filter* | 名稱=行程類型值=單向 | | 通過鏈接文字 | link = *link_text* | 鏈接=注冊 | | 標簽和 ID | css = *標簽*＃ *id* | css = input＃email | | 標簽和類別 | css = *標簽*。 *類* | css = input.inputtext | | 標簽和屬性 | css = *標簽* [*屬性* = *值*] | css = input [name = lastName] | | 標簽，類和屬性 | css = *標簽*。 *類* [*屬性* = *值*] | css = input.inputtext [tabindex = 1] |