定位器位于 Selenium

什么是定位器？

定位器是一个命令，它告诉 Selenium IDE 中的 GUI 元素（例如文本 Box、按钮、检查 Boxes 等）需要操作。识别正确的 GUI 元素是创建自动化脚本的先决条件。但准确识别 GUI 元素比听起来更困难。有时，您最终会使用错误的 GUI 元素或根本没有元素！因此， Selenium 提供多个定位器来精确定位 GUI 元素

有些命令不需要定位器（例如“打开”命令）。但是，它们中的大多数都需要元素定位器 Selenium 网络驱动程序。

定位器的选择很大程度上取决于被测应用程序在本教程中，我们将根据这些应用程序支持的定位器在 Facebook、new tours.demoaut 之间切换。同样在你的 测试 项目，您将选择上面列出的任何元素定位器 Selenium webdriver，根据您的应用程序支持。

通过 ID 定位

这是定位元素的最常用方法，因为每个元素的 ID 都应该是唯一的。

Target 格式： id=元素的id

在此示例中，我们将使用 Facebook 作为测试应用程序，因为 Mercury 旅游不使用 ID 属性。

步骤1） 自本教程创建以来，Facebook 已更改了其登录页面设计。使用此演示页面 http://demo.guru99.com/test/facebook.html 进行测试。使用 Firebug 检查“电子邮件或电话”文本框并记下其 ID。在本例中，ID 为“电子邮件”。

步骤2） 正式上线 Selenium IDE 中输入“id=email” Target 框。单击“查找”按钮，您会注意到“电子邮件或电话”文本框将以黄色突出显示，并以绿色边框显示，这意味着， Selenium IDE 能够正确定位该元素。

按名称定位

通过名称定位元素与通过 ID 定位非常相似，只不过我们使用 “名称=” 前缀。

Target 格式： name=元素的名称

在下面的演示中，我们将使用 Mercury 游览，因为所有重要元素都有名字。

步骤1） 导航 http://demo.guru99.com/test/newtours/ 并使用 Firebug 检查“用户名”文本框。记下其 name 属性。

这里，我们看到元素的名称是“userName”。

步骤2） In Selenium IDE中输入“name=userName” Target 框并单击“查找”按钮。 Selenium IDE 应该能够通过突出显示来找到用户名文本框。

如何使用过滤器按名称定位元素

当多个元素具有相同名称时可以使用过滤器。 过滤器是用于区分同名元素的附加属性。

Target 格式：名称=元素名称过滤器=过滤器值

让我们看一个例子——

步骤1） 登录到 Mercury 游览。

登录到 Mercury 使用“tutorial”作为用户名和密码的游览。它将带您进入如下所示的航班查找器页面。

步骤2） 使用 firebug 使用 VALUE 属性。

使用 Firebug，请注意“往返”和“单程”单选按钮具有相同的名称“tripType”。但是，它们具有不同的 VALUE 属性，因此我们可以将它们分别用作过滤器。

步骤3） 单击第一行。

• 我们首先要访问单向单选按钮。单击编辑器上的第一行。
• 在命令框中 Selenium IDE中输入命令“click”。
• 在 Target 框中输入“name=tripType value=oneway”。 “value=oneway”部分是我们的过滤器。

步骤4） 单击查找按钮。

注意到 Selenium IDE 能够用绿色突出显示单向单选按钮 - 这意味着我们能够使用其 VALUE 属性成功访问该元素。

步骤5） 选择“单向”单选按钮。

按键盘上的“X”键执行此点击命令。请注意，单向单选按钮已被选中。

您可以使用“往返”单选按钮执行完全相同的操作，这次使用“name=tripType value=roundtrip”作为目标。

通过链接文本定位

这种类型的 CSS 定位器 Selenium 仅适用于超链接文本。我们通过在目标前加上“link=”来访问链接，然后跟上超链接文本。

Target 格式：链接=link_text

在此示例中，我们将访问 Mercury 旅游主页。

步骤1）

• 首先，确保您已从 Mercury 游览。
• 在MyCAD中点击 软件更新 Mercury 旅游主页。

步骤2）

• 使用 Firebug 检查“REGISTER”链接。链接文本位于和标签之间。
• 在本例中，我们的链接文本是“REGISTER”。复制链接文本。

步骤3） 复制 Firebug 中的链接文本并将其粘贴到 Selenium IDE的 Target 框。在其前面加上“link=”。

步骤4） 单击“查找”按钮，然后注意 Selenium IDE 能够正确突出显示 REGISTER 链接。

步骤5） 为了进一步验证，在命令框中输入“clickAndWait”并执行它。 Selenium IDE 应该能够成功点击该 REGISTER 链接并带您进入下面显示的注册页面。

通过 DOM（文档对象模型）定位

- 文档对象模型（DOM），简单来说，就是 HTML 元素的结构方式。 Selenium IDE 能够使用 DOM 来访问页面元素。如果我们使用这种方法，我们的 Target 框总是以“dom=document…”开头；但是，“dom=”前缀通常会被删除，因为 Selenium IDE 能够自动将以关键字“document”开头的任何内容解释为 DOM 中的路径 Selenium 反正。

通过 DOM 定位元素有四种基本方法 Selenium:

• 的getElementById
• 通过名称获取元素
• dom:name（仅适用于命名表单内的元素）
• dom:索引

通过 DOM 定位 – getElementById

让我们重点介绍第一种方法 - 使用 DOM 的 getElementById 方法 Selenium语法如下：

句法

document.getElementById("id of the element")

• 元素的 id = 这是要访问的元素的 ID 属性的值。该值应始终括在一对括号（“”）中。

步骤1） 使用此演示页面 http://demo.guru99.com/test/facebook.html 导航到它并使用 Firebug 检查“保持登录状态”复选框。记下它的 ID。

我们可以看到我们应该使用的ID是“persist_box”。

步骤2） 可选 Selenium IDE 中 Target 框中输入“document.getElementById(“persist_box”)”，点击查找。 Selenium IDE 应该能够找到“保持登录状态”复选框。虽然它无法突出显示复选框的内部， Selenium IDE 仍然可以用明亮的绿色边框围绕元素，如下所示。

通过 DOM 定位 – getElementsByName

getElementById 方法一次只能访问一个元素，即具有您指定的 ID 的元素。 getElementsByName 方法有所不同。它收集具有您指定名称的元素数组。您可以使用从 0 开始的索引访问各个元素。

	的getElementById 它只会为您获取一个元素。 该元素带有您在 getElementById() 的括号内指定的 ID。
	通过名称获取元素 它将得到一个名称全部相同的元素集合。 每个元素都用从 0 开始的数字进行索引，就像数组一样 您可以通过将其索引号放入下面 getElementsByName 语法的方括号中来指定想要访问的元素。

句法

document.getElementsByName(“name“)[index]

• name = 元素的名称，由其“name”属性定义
• index = 一个整数，指示将使用 getElementsByName 数组中的哪个元素。

步骤1） 导航 Mercury Tours 的主页并使用“tutorial”作为用户名和密码登录。 Firefox 将会带您进入航班查找器屏幕。

步骤2） 使用 Firebug 检查页面底部的三个单选按钮（经济舱、商务舱和头等舱单选按钮）。请注意，它们都具有相同的名称，即“servClass”。

步骤3） 让我们首先访问“经济舱”单选按钮。在这三个单选按钮中，这个元素排在第一位，所以它的索引是 0。在 Selenium IDE，输入“document.getElementsByName(“servClass”)[0]”，然后单击“查找”按钮。 Selenium IDE 应该能够正确识别经济舱单选按钮。

步骤4） 将索引号更改为 1，以便您的 Target 现在将变为 document.getElementsByName(“servClass”)[1]。单击“查找”按钮，然后 Selenium IDE 应该能够突出显示“Business class”单选按钮，如下所示。

通过 DOM 定位 – dom:name

如前所述，仅当您访问的元素包含在命名表单中时，此方法才适用。

句法

document.forms[“name of the form“].elements[“name of the element“]

• 表单名称 = 包含要访问的元素的表单标签的 name 属性的值
• 元素的名称 = 您希望访问的元素的名称属性的值

步骤1） 导航 Mercury 旅游主页 http://demo.guru99.com/test/newtours/ 并使用 Firebug 检查用户名文本框。请注意，它包含在名为“home”的表单中。

步骤2） In Selenium IDE，输入“document.forms[“home”].elements[“userName”]”，然后单击“查找”按钮。 Selenium IDE 必须能够成功访问该元素。

通过 DOM 定位 – dom:index

即使元素不在命名表单内，此方法也适用，因为它使用表单的索引而不是其名称。

句法

document.forms[index of the form].elements[index of the element]

• 表单索引 = 表单相对于整个页面的索引号（从 0 开始）
• 元素的索引 = 元素相对于包含它的整个表单的索引号（从 0 开始）

我们将访问“电话”文本框 Mercury 旅游注册页面。该页面中的表单没有名称和 ID 属性，因此这将是一个很好的例子。

步骤1） 导航 Mercury 旅游注册页面并检查电话文本框。请注意，包含它的表单没有 ID 和名称属性。

步骤2） 在 Selenium IDE的 Target 框并单击“查找”按钮。 Selenium IDE 应该能够正确访问电话文本框。

步骤3） 或者，您可以使用元素的名称而不是其索引并获得相同的结果。在 Selenium IDE的 Target 框。电话文本框仍应突出显示。

通过 XPath 定位

XPath 是定位 XML（可扩展标记语言）节点时使用的语言。由于 HTML 可以看作是 XML 的一种实现，因此我们也可以使用 XPath的 定位 HTML 元素。

• 优势： 它可以访问几乎任何元素，即使是那些没有 class、name 或 id 属性的元素。
• 缺点： 由于涉及太多不同的规则和考虑因素，它是最复杂的识别元素的方法。

幸运的是，Firebug 可以自动生成 XPath Selenium 定位器。在下面的例子中，我们将访问一个无法通过我们之前讨论的方法访问的图像。

步骤1） 导航 Mercury Tours Homepage 并使用 Firebug 检查黄色“链接”框右侧的橙色矩形。请参阅下图。

步骤2） 右键单击元素的 HTML 代码，然后选择“复制 XPath”选项。

步骤3） In Selenium IDE，在 Target 框，然后粘贴我们在上一步复制的 XPath。 您的 Target 框现在应该以两个正斜杠“//”开头。

步骤4） 单击“查找”按钮。 Selenium IDE 应该能够突出显示橙色框，如下所示。