7L Selenium IDE – 定位元素（续）

7L Selenium IDE – 定位元素（续）

原文： https://javabeginnerstutorial.com/selenium/7l-ide-locating-elements-contd/

嗨呀测试人员！我回来了，比赛开始了！让我们继续前进，在我们的网页上找到一些古怪的元素！！

在这篇文章中，我们将看到：

定位依据

CSS
DOM
XPath

让我们一一看一下。

通过 CSS 定位

CSS（层叠样式表）将样式添加到网页中，通常用于描述 HTML 文档的显示或呈现。为了将这些样式属性绑定到文档中的元素，使用了 CSS 选择器。这些选择器用于根据其名称，ID，类，属性等的组合来选择 HTML 元素。

通常，高级 Selenium 用户会通过这种方法在网页上定位元素。它有点复杂，但主要在元素没有 ID 或名称的情况下首选。

指定目标的格式以标签“css =”开头，后跟相应的标签名称和其他必需元素。让我们欣赏使用最常用的 CSS 选择器定位元素的巨大优势。

标签和 ID

HTML 标记和元素的 ID 与井号（#）一起使用。

格式： css = tag#id

示例：打开 Amazon 的登录页面。让我们找到“电子邮件（用于移动帐户的电话）”文本框。

标记名称为“输入”，元素的 ID 为“ap_email”。

因此，按照目标格式，输入“css = input#ap_email”并单击“查找”按钮将按预期突出显示网页上的“电子邮件”文本框。

标签和类别

此方法使用 HTML 标记和要访问的元素的类以及点（.）符号。

格式：css = tag.class

示例：打开 Indeed.com，让我们突出显示文本“what”。

标签名称为“td”，元素的类别为“npb”。

输入“css = td.npb”，然后单击“查找”按钮，将突出显示文本“what”。如果多个元素具有相同的标记和类名称，则仅会识别与条件匹配的第一个元素。在这种情况下必须使用过滤器。在之前的博客文章中对此概念进行了详细说明。

标签和属性

在此方法中使用 HTML 标记，最好使用要访问的元素的唯一属性及其对应的值。属性和值用方括号[]括起来。

格式： css = tag[prop=value]

示例：打开亚马逊登录页面，让我们找到“电子邮件”文本框。

标签名称为“input”，属性为“name”，其对应值为“email”。

为目标输入“css = input[name=email]”，然后单击“查找”按钮，将突出显示“电子邮件”文本框。

标签，类和属性

这与“标记和属性”定位策略相似，但是带有类名和点（.）符号。通常在两个 Web 元素具有相同的标记和类名称时使用。

格式： css = tag.class[prop=value]

示例：打开 facebook.com，让我们找到“电子邮件或电话”文本框。

请注意下图，“电子邮件”和“密码”文本框具有相同的标签“input”和相同的类名“inputtext”，但属性“tabindex”的值不同。

因此，标签名称为“input”，类为“inputtext”，属性为“tabindex”且其对应值为“1”的标签将突出显示“电子邮件或电话”文本框。属性值与“2”相同的组合将突出显示“密码”文本框。

输入“css = input.inputtext[tabindex=1]”以突出显示“电子邮件或电话”文本框。

内部文本

在某些情况下，ID，类或属性未用于特定元素。要找到这样的元素，可以使用网页上显示的实际文本（内部文本）。

格式： css = tag:contains("innerText")

示例：打开亚马逊登录页面，让我们突出显示文本“Password”。

这里的标签是“label”，内部文本是“Password”。输入“css = lable:contains("Password")”高亮显示文本“Password”。

通过 DOM 定位

文档对象模型是用于表示 HTML 文档中元素的约定。定位策略利用了 DOM 模型中使用的树结构。因此，使用分层的点分符号来获取元素的位置。

指定 DOM 定位器时，不需要“dom =”标签，因为只有 DOM 定位器以单词“document”开头。

示例代码：

方法 1：document.getElementById("testForm")– 使用元素的 ID。

方法 2：document.forms[0] – “表单”将返回文档中使用的所有表单的集合。因此，使用索引以唯一的方式指定被测元素。

方法 3：document.forms[0].user1 – 第一种形式，访问user1元素。

方法 4：document.getElementsByName("seatingClass")[1] – “getElementsByName”也将返回括号内指定名称相同的元素集合。因此，索引返回所需的元素。在这种情况下，可以访问业务单选按钮。如果使用索引[0]，则可以访问经济单选按钮。

方法 5：访问document.forms["testForm"].elements["user2"] – 名为“testForm”的表单的user2。

方法 6：document.forms[1].elements[2] – 这将返回“seatingClassForm”中的“第一个”单选按钮。

现在是时候使用 Selenium IDE 探索 Web 应用的 DOM 了。

通过 XPath 定位

XPath 是一种语法，用于在 XML 文档中导航和定位节点。由于 HTML 只是 XML 的实现，因此可以使用 XPath 策略来查找所需的元素。

如果找不到合适的 ID，名称或类等来查找元素，则可以使用 XPath。使用 XPath 定位元素有两种。一个是绝对路径（不建议使用），因为它会在对现有 HTML 代码进行最小改动的情况下中断。另一个选项是相对路径 – 使用 ID 或名称查找附近的元素，并使用两者之间的关系使用 XPath 查找所需的元素。因此，几乎可以使用 XPath 策略定位网页上的任何元素。

这种定位策略非常复杂，通常是高级 Selenium 用户首选的定位策略。但是不用担心！为了使整个 XPath 查找方法变得容易，我们将“Firebug”作为 Firefox 浏览器的附加组件。很快您就会遇到一篇博客文章，该文章完全致力于 Firebug 的安装和使用！欢呼！！

另外，由于仅 XPath 定位符以“//”开头，因此不需要为 XPath 定位符指定“xpath =”。

示例：打开 Amazon 登录页面，然后让我们使用 XPath 找到“电子邮件”文本框。

点击 Firebug 图标并检查所需的元素（在本例中为“电子邮件”文本框）。相应的源代码将显示在网页的下部。

右键点击突出显示的代码，然后选择“复制 XPath”，如下所示。

在目标中，输入一个正斜杠（/），然后使用 Firebug 粘贴复制的 XPath，“//html/body/div[1]/div[1]/div[3]/div/div[2]/form/div/div/div/div[1]/input”。请注意，XPath 定位符应以两个正斜杠开头。

因此，“电子邮件”文本框将按预期突出显示。

你去！我们刚刚完成了各种可用的定位策略。是的，要选择的定位器类型完全取决于要测试的应用。

在将如此多的知识融入您的大脑之后，我知道您将每年两次要求我六个月的假期。因此，在另一篇文章中再见。

祝你今天愉快！