如何在Selenium IDE中使用Locators

什么是定位器？

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属性的值即可。在Target框中输入“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]