什麼是定位器？

Locator是一個命令，告訴Selenium IDE需要操作哪些GUI元素（比如文本框，按鈕，複選框等）。識別正確的GUI元素是創建自動化腳本的先決條件。但是，準確識別GUI元素比聽起來更困難。有時，您最終會使用不正確的GUI元素或根本沒有元素！因此，Selenium提供了許多定位器來精確定位GUI元素

 

Selenium IDE中不同類型的定位器

•  ID
•  名稱
•  鏈接文字
•  CSS選擇器
•   標籤和ID
•   標籤和類
•   標籤和屬性
•  標籤，類和屬性
•  內部文字
•   DOM（文檔對象模型）
•   的getElementById
•   getElementsByName
•   DOM：名稱
•   dom：index
•  XPath的

 

有些命令不需要定位器（例如「open」命令）。但是，他們中的大多數確實需要定位器。

定位器的選擇在很大程度上取決於您的應用程序測試。在本教程中，我們將根據這些應用程序支持的定位器在Facebook，新的tours.demoaut之間切換。同樣在您的測試項目中，您將根據您的應用程序支持選擇上面列出的任何定位器。

按ID查找

這是定位元素的最常用方法，因爲ID應該對每個元素都是唯一的。

目標格式： id = 元素的id

對於此示例，我們將使用Facebook作爲我們的測試應用程序，因爲Mercury Tours不使用ID屬性。

步驟1.自本教程創建以來，Facebook已更改其登錄頁面設計。使用此演示頁面http://demo.guru99.com/test/facebook.html進行測試。使用Firebug檢查「電子郵件或電話」文本框並記下其ID。在這種情況下，ID是「電子郵件」。

 

步驟2.啓動Selenium IDE並在Target框中輸入「id = email」。單擊「查找」按鈕，注意「電子郵件或電話」文本框突出顯示爲黃色並以綠色爲邊框，這意味着，Selenium IDE能夠正確找到該元素。

按名稱查找

按名稱定位元素與按ID定位非常相似，只是我們使用「name =」前綴。

目標格式： name = 元素的名稱

在下面的演示中，我們現在將使用Mercury Tours，因爲所有重要元素都有名稱。

步驟1.導航到http://demo.guru99.com/test/newtours/並使用Firebug檢查「用戶名」文本框。記下它的名稱屬性。

在這裏，我們看到元素的名稱是「userName」。

步驟2.在Selenium IDE中，在Target框中輸入「name = userName」，然後單擊Find按鈕。Selenium IDE應該能夠通過突出顯示「用戶名」文本框來找到它。

 

使用過濾器按名稱定位

當多個元素具有相同名稱時，可以使用過濾器。過濾器是用於區分具有相同名稱的元素的附加屬性。

目標格式：name = name_of_the_element filter = value_of_filter

我們來看一個例子 -

第1步。使用「tutorial」作爲用戶名和密碼登錄Mercury Tours。它應該帶您到下面顯示的Flight Finder頁面。

步驟2.使用Firebug，注意Round Trip和One Way單選按鈕具有相同的名稱「tripType」。但是，它們具有不同的VALUE屬性，因此我們可以將它們中的每一個用作我們的過濾器。

第3步。

• 我們將首先訪問One Way單選按鈕。單擊編輯器上的第一行。
• 在Selenium IDE的命令框中，輸入命令「click」。
• 在「目標」框中，輸入「name = tripType value = oneway」。「value = oneway」部分是我們的過濾器。

第4步。單擊「查找」按鈕，注意Selenium IDE能夠突出顯示帶綠色的單向單選按鈕 - 這意味着我們可以使用其VALUE屬性成功訪問該元素。

步驟5.按鍵盤上的「X」鍵執行此單擊命令。請注意，One Way單選按鈕已被選中。

您可以使用Round Trip單選按鈕執行完全相同的操作，這次使用「name = tripType value = roundtrip」作爲目標。

通過鏈接文本定位

這種類型的定位器僅適用於超鏈接文本。我們通過在目標前面添加「link =」然後是超鏈接文本來訪問鏈接。

目標格式：link = link_text

在此示例中，我們將訪問Mercury Tours主頁上的「REGISTER」鏈接。

步驟1。

 

• 首先，確保您已從Mercury Tours註銷。
• 轉到Mercury Tours主頁。

第2步。

• 使用Firebug，檢查「REGISTER」鏈接。鏈接文本位於和標籤之間。
• 在這種情況下，我們的鏈接文本是「REGISTER」。複製鏈接文本。

第3步。複製Firebug中的鏈接文本並將其粘貼到Selenium IDE的Target框中。用「link =」作爲前綴。

步驟4.單擊Find按鈕，注意Selenium IDE能夠正確突出顯示REGISTER鏈接。

步驟5.要進一步驗證，請在「命令」框中輸入「clickAndWait」並執行它。Selenium IDE應該能夠成功點擊該REGISTER鏈接並轉到下面顯示的註冊頁面。

通過CSS Selector定位

CSS選擇器是用於基於HTML標記，id，類和屬性的組合來標識元素的字符串模式。 通過CSS Selector定位比以前的方法更復雜，但它是高級Selenium用戶最常見的定位策略，因爲它甚至可以訪問那些沒有ID或名稱的元素。

CSS選擇器有很多格式，但我們只關注最常見的格式。

• 標籤和ID
• 標籤和類
• 標籤和屬性
• 標籤，類和屬性
• 內部文字

使用此策略時，我們始終在Target框前面添加「css =」，如以下示例所示。

通過CSS Selector定位 - 標記和ID

同樣，我們將在此示例中使用Facebook的電子郵件文本框。您可以記住，它的ID爲「email」，我們已經在「按ID查找」部分中訪問了它。這次，我們將使用帶有ID的CSS Selector訪問同一個元素。

句法	描述
css = tag＃id	tag =正在訪問的元素的HTML標記 ＃=井號。使用帶有ID的CSS選擇器時，應始終存在此問題 id =正在訪問的元素的ID

請記住，ID始終以井號（＃）開頭。

步驟1.導航到www.facebook.com。使用Firebug，檢查「電子郵件或電話」文本框。

此時，請注意HTML標記是「輸入」，其ID是「電子郵件」。所以我們的語法將是「css = input＃email」。

 

步驟2.在Selenium IDE的Target框中輸入「css = input＃email」，然後單擊Find按鈕。Selenium IDE應該能夠突出顯示該元素。

 

通過CSS選擇器定位 - 標籤和類

使用HTML標記和類名稱通過CSS Selector定位類似於使用標記和ID，但在這種情況下，使用點（。）而不是井號。

句法	描述
css = 標籤。類	tag =正在訪問的元素的HTML標記 。=點符號。在使用帶有類的CSS Selector時，應始終存在此問題 class =要訪問的元素的類

 

步驟1.轉到演示頁面http://demo.guru99.com/test/facebook.html並使用Firebug檢查「電子郵件或電話」文本框。請注意，其HTML標記爲「input」，其類爲「inputtext」。

步驟2.在Selenium IDE中，在Target框中輸入「css = input.inputtext」，然後單擊Find。Selenium IDE應該能夠識別電子郵件或電話文本框。

請注意，當多個元素具有相同的HTML標記和名稱時，只會識別源代碼中的第一個元素。使用Firebug，檢查Facebook中的密碼文本框，注意它與電子郵件或電話文本框的名稱相同。

之前插圖中僅突出顯示電子郵件或電話文本框的原因是它首先出現在Facebook的頁面源中。

通過CSS選擇器定位 - 標籤和屬性

此策略使用HTML標記和要訪問的元素的特定屬性。

句法	描述
css = tag [ attribute = value ]	tag =正在訪問的元素的HTML標記 [和] =方括號，其中將放置特定屬性及其對應值 attribute =要使用的屬性。建議使用元素唯一的屬性，例如名稱或ID。 value =所選屬性的對應值。

 

步驟1.導航到Mercury Tours的註冊頁面（http://demo.guru99.com/test/newtours/register.php）並檢查「姓氏」文本框。記下它的HTML標記（本例中爲「輸入」）及其名稱（「lastName」）。

步驟2.在Selenium IDE中，在Target框中輸入「css = input [name = lastName]」，然後單擊Find。Selenium IDE應該能夠成功訪問「姓氏」框。

當多個元素具有相同的HTML標記和屬性時，只會識別第一個元素。此行爲類似於使用具有相同標記和類的CSS選擇器定位元素。

通過CSS Selector定位 - 標記，類和屬性

句法	描述
css = tag.class [ attribute = value ]	tag =正在訪問的元素的HTML標記 。=點符號。在使用帶有類的CSS Selector時，應始終存在此問題 class =要訪問的元素的類 [和] =方括號，其中將放置特定屬性及其對應值 attribute =要使用的屬性。建議使用元素唯一的屬性，例如名稱或ID。 value =所選屬性的對應值。

步驟1.轉到演示頁面http://demo.guru99.com/test/facebook.html並使用Firebug檢查「電子郵件或電話」和「密碼」輸入框。記下他們的HTML標記，類和屬性。對於此示例，我們將選擇其「tabindex」屬性。

第2步。  我們將首先訪問「電子郵件或電話」文本框。因此，我們將使用tabindex值1.在Selenium IDE的Target框中輸入「css = input.inputtext [tabindex = 1]」，然後單擊Find。應突出顯示「電子郵件或電話」輸入框。

步驟3.要訪問密碼輸入框，只需替換tabindex屬性的值即可。在Tar​​get框中輸入「css = input.inputtext [tabindex = 2]」，然後單擊Find按鈕。Selenium IDE必須能夠成功識別密碼文本框。

通過CSS選擇器定位 - 內部文本

您可能已經注意到，HTML標籤很少被賦予id，name或class屬性。那麼，我們如何訪問它們？答案是通過使用他們的內在文本。內部文本是HTML標籤在頁面上顯示的實際字符串模式。

句法	描述
css = tag：contains（「 內部文本 」）	tag =正在訪問的元素的HTML標記 內部文本=元素的內部文本

 

步驟1.導航到Mercury Tours的主頁（http://demo.guru99.com/test/newtours/）並使用Firebug調查「密碼」標籤。記下它的HTML標記（在這種情況下是「font」）並注意它沒有class，id或name屬性。

步驟2.在Selenium IDE的Target框中鍵入css = font：contains（「Password：」），然後單擊Find。Selenium IDE應該能夠訪問密碼標籤，如下圖所示。

第3步。這一次，用「波士頓」替換內部文本，這樣你的目標就會變成「css = font：contains（」Boston「）」。單擊查找。您應該注意到「波士頓到舊金山」標籤會突出顯示。這表明即使您剛剛指出其內部文本的第一個單詞，Selenium IDE也可以訪問長標籤。

按DOM定位（文檔對象模型）

簡單來說，文檔對象模型（DOM）就是HTML元素結構的方式。Selenium IDE能夠使用DOM訪問頁面元素。如果我們使用這種方法，我們的目標框將始終以「dom = document ...」開頭; 但是，通常會刪除「dom =」前綴，因爲Selenium IDE能夠自動將以關鍵字「document」開頭的任何內容解釋爲DOM中的路徑。

通過DOM定位元素有四種基本方法：

• 的getElementById
• getElementsByName
• dom：name（僅適用於命名錶單中的元素）
• DOM：指數

按DOM定位 - getElementById

讓我們專注於第一種方法 - 使用getElementById方法。語法是：

句法	描述
document.getElementById（「 元素的id 」）	element的id =這是要訪問的元素的ID屬性的值。該值應始終括在一對括號（「」）中。

 

步驟1.使用此演示頁面http://demo.guru99.com/test/facebook.html導航到它並使用Firebug檢查「保持登錄狀態」複選框。記下它的ID。

我們可以看到我們應該使用的ID是「persist_box」。

步驟2.打開Selenium IDE，在Target框中輸入「document.getElementById（」persist_box「）」，然後單擊Find。Selenium IDE應該能夠找到「保持登錄狀態」複選框。雖然它無法突出顯示覆選框的內部，但Selenium IDE仍然可以用明亮的綠色邊框環繞元素，如下所示。

按DOM定位 - getElementsByName

getElementById方法一次只能訪問一個元素，這是具有您指定的ID的元素。getElementsByName方法不同。它收集具有您指定名稱的元素數組。您可以使用從0開始的索引訪問各個元素。

	的getElementById 它只會爲您提供一個元素。 該元素帶有您在getElementById（）括號內指定的ID。
		getElementsByName 它將獲得名稱完全相同的元素集合。 每個元素都使用從0開始的數字索引，就像數組一樣 您可以通過在下面的getElementsByName語法中將其索引號放入方括號中來指定要訪問的元素。

 

句法	描述
document.getElementsByName（「 name 」）[ index ]	name =由'name'屬性定義的元素的名稱 index =一個整數，指示將使用getElementsByName數組中的哪個元素。

 

步驟1.導航到Mercury Tours的主頁並使用「tutorial」作爲用戶名和密碼登錄。Firefox應該帶您進入Flight Finder屏幕。

步驟2.使用Firebug，檢查頁面底部的三個單選按鈕（經濟艙，商務艙和頭等艙單選按鈕）。請注意，它們都具有相同的名稱，即「servClass」。

第3步。讓我們先訪問「經濟艙」單選按鈕。在所有這三個單選按鈕中，此元素首先出現，因此它的索引爲0.在Selenium IDE中，鍵入「document.getElementsByName（」servClass「）[0]」並單擊「查找」按鈕。Selenium IDE應該能夠正確識別經濟艙單選按鈕。

步驟4.將索引號更改爲1，以便您的Target現在變爲document.getElementsByName（「servClass」）[1]。單擊Find按鈕，Selenium IDE應該能夠突出顯示「Business class」單選按鈕，如下所示。

按DOM定位 - dom：name

如前所述，此方法僅在您訪問的元素包含在命名錶單中時才適用。

句法	描述
document.forms [「 表格名稱 」] .elements [「 元素名稱 」]	表單的名稱=包含要訪問的元素的表單標記的name屬性的值 element的名稱=您要訪問的元素的name屬性的值

 

步驟1.導航到Mercury Tours主頁（http://demo.guru99.com/test/newtours/）並使用Firebug檢查「用戶名」文本框。請注意，它包含在名爲「home」的表單中。

步驟2.在Selenium IDE中，鍵入「document.forms [」home「]。elements [」userName「]」並單擊「查找」按鈕。Selenium IDE必須能夠成功訪問該元素。

按DOM定位 - dom：index

即使元素不在命名錶單中，此方法也適用，因爲它使用表單的索引而不是其名稱。

句法	描述
document.forms [ 表格的索引 ] .elements [ 元素的索引 ]	表單的索引=表單相對於整個頁面的索引號（從0開始） 元素的索引=元素相對於包含它的整個表單的索引號（從0開始）

 

我們將訪問Mercury Tours註冊頁面中的「電話」文本框。該頁面中的表單沒有名稱和ID屬性，因此這將是一個很好的例子。

步驟1.導航到Mercury Tours Registration頁面並檢查Phone文本框。請注意，包含它的表單沒有ID和name屬性。

步驟2.在Selenium IDE的Target框中輸入「document.forms [0] .elements [3]」，然後單擊Find按鈕。Selenium IDE應該能夠正確訪問Phone文本框。

步驟3.或者，您可以使用元素的名稱而不是其索引，並獲得相同的結果。在Selenium IDE的Target框中輸入「document.forms [0] .elements [」phone「]」。電話文本框仍應突出顯示。

通過XPath定位

XPath是定位XML（可擴展標記語言）節點時使用的語言。由於HTML可以被認爲是XML的實現，我們也可以使用XPath來定位HTML元素。

        優點：它幾乎可以訪問任何元素，甚至是那些沒有class，name或id屬性的元素。

        缺點：由於太多不同的規則和考慮因素，這是識別元素的最複雜方法。

幸運的是，Firebug可以自動生成XPath定位器。在下面的示例中，我們將訪問通過前面討論的方法無法訪問的圖像。

步驟1.導航到Mercury Tours主頁並使用Firebug檢查黃色「鏈接」框右側的橙色矩形。請參閱下圖。

第2步。右鍵單擊元素的HTML代碼，然後選擇「複製XPath」選項。

步驟3.在Selenium IDE中，在Target框中鍵入一個正斜槓「/」，然後粘貼我們在上一步中複製的XPath。現在，目標框中的條目應以兩個正斜槓「//」開頭。

第4步。單擊「查找」按鈕。Selenium IDE應該能夠突出顯示橙色框，如下所示。

概要

定位器用法的語法    軟件測試交流學習羣 5199  70686

方法	目標語法	例
按ID	id = id_of_the_element	ID =電子郵件
按名字	name = name_of_the_element	名稱=用戶名
按名稱使用過濾器	name = name_of_the_element filter =value_of_filter	name = tripType value = oneway
通過鏈接文本	link = link_text	鏈接= REGISTER
標籤和ID	css = tag＃id	CSS =輸入＃電子郵件
標籤和類	css = 標籤。類	CSS = input.inputtext
標籤和屬性	css = tag [ attribute = value ]	CSS =輸入[名稱=姓氏]
標籤，類和屬性	css = 標籤。class [ attribute = value ]	CSS = input.inputtext [的tabindex = 1]