selenium该如何定位元素？selenium定位器全面讲解

我们将通过探讨不同类型的 Selenium 网络定位器、它们的语法和属性来展示如何更方便快速的定位html元素，从而使我们的自动化测试更为精准高效。

在基于 Web 的应用程序的开发过程中，需要执行的测试用例非常多。对于每个测试工程师来说，在 HTML 元素上执行诸如键入、单击等操作是必须的。在执行自动化测试时，测试自动化工具应该能够对 HTML 元素执行这些操作，就像我们在手动测试期间进行交互一样。但是，自动化工具如何知道如何定位 HTML 元素以执行所需的操作？这就是 Selenium 定位器备忘单派上用场的地方。

什么是selenium定位器？
 

Selenium 是一种广泛使用的测试自动化框架。通过 Selenium，您可以使用 DOM WebElements 自动执行任何交互，例如键入、单击、双击等。要识别网页上的任何 HTML 元素，您必须使用定位器。它是几乎所有 UI 自动化工具（包括 Selenium）中的常见功能。

Selenium WebDriver 定位器采用不同的方法来识别页面上存在的 HTML 元素。Selenium 为主要的 Web 定位器提供多种支持。选择最符合您的测试要求的一个。我们准备了这个 Selenium 定位器备忘单，着眼于我们需要涵盖的内容，以简化您的工作。

这些是 Selenium 中的定位器类型：

• ID
• Name
• ClassName
• LinkText
• Partial LinkText
• TagName
• CSSSelector
• XPath

在这个 Selenium 定位器备忘单的下一节中，我们将详细探索 Selenium 中的不同定位器。

什么是 Selenium 定位器类型？

在这个 Selenium 定位器备忘单中，让我们在 Selenium 定位器备忘单的这一部分中了解 Selenium 中最重要的定位器类型。

这是列表：

定位器	描述	语法（在 JAVA 中）
ID	找出使用 ID 属性的 WebElement。	driver.findElement(By.id(“IdValue”))
Name	找出具有 Name 属性的 WebElement。	driver.findElement(By.name(“nameValue”))
ClassName	使用类属性来识别对象…	driver.findElement(By.className(“classValue”))
LinkText	利用文本超链接定位 WebElement。	driver.findElement(By.linkText(“textofLink”))
Partial LinkText	部分使用超链接中的文本以获得所需的 WebElement 位置。	driver.findElement(By.partialLinkText(“PartialTextofLink”))
TagName	使用 TagName 定位任何所需的 WebElement。	driver.findElement(By.tagName(“htmlTag”))
CSSSelector	我们用来在网页中创建不同样式规则的 CSS 可用于定位任何需要的 WebElement。	driver.findElement(By.cssSelector(“cssValue”))
XPath	引入 XPath 作为 WebElement 定位器。	driver.findElement(By.xpath(“xpathValue”))

使用“ID”属性定位 Web 元素

这是我们将在 Selenium 定位器备忘单中讨论的第一部分。Selenium中的 ID 定位器是定位不同网页元素的最常用方法。W3C 期望它始终是唯一的。随着动态网页的出现，您可以动态生成“ID”。

下面是通过“ID:”定位网页元素的语法

driver.findElement(By.id(“IdValue”));

 

• driver：我们需要在使用 Selenium 定位器时从中定位 Web 元素的 Selenium WebDriver。
• findElement：用于查找网页元素的属性。
• By.id：用于传递“IdValue”属性的方法。
• IdValue：使用其 ID 名称定位 Web 元素。

示例：

<input name="food" required="" type="radio" id="food-radio-1" class="custom-control-input" value="Menu">

 

• driver.findElement(By.id(“food-radio-1”))
• By.id(“food-radio-1”)food-radio-1: 定位 ID 为“ .”的网页元素

使用“名称”属性定位 Web 元素

Selenium 允许我们使用Selenium 中的名称定位器使用“名称”属性来识别任何元素。它可以有许多具有类似“名称”属性的元素。当我们要识别网页元素时，我们应该尽量使它具有唯一性。否则，它会识别同一页面上存在的多个具有相同名称值的元素，并选择最先找到的元素。

以下是通过“名称：”定位 Web 元素的语法

driver.findElement(By.name(“nameValue”));

 

• By.name: 用于传递“Name”属性的方法。
• nameValue：要定位的名字的值。

例子：

<input name="food" required="" type="radio" id="food-radio-1" class="custom-control-input" value="Menu">

 

• driver.findElement(By.name("food"))
• By.name("food")：定位名为“food”的网络元素。 

使用“ClassName”属性定位 Web 元素

Selenium 中的 ClassName 定位器可以帮助 Selenium 定位 DOM 类值。要执行或识别涉及“className”属性的任何形式的 Web 元素操作，我们使用 class。

以下是通过“ClassName:”定位 Web 元素的语法

driver.findElement(By.className(“classValue”));

 

• By.className：用于传递“className”定位器的方法。
• classValue：找到具有特定类名的类。

例子：

假设以下片段包含事件的整个表单：

<div class="registration-form-wrapper">

 

class 属性值可用于表单标识。为了在我们的网页上识别相同的内容，以下语法可以派上用场：

• driver.findElement(By.className("registration-form-wrapper"));
• By.className("registration-form-wrapper"): 定位类名为“ registration-form-wrapper.”的网页元素

我们需要使用唯一的类名来定位 Web 元素。如果任何其他内容包含此类名称，Selenium 将考虑它而不是您需要考虑的 Web 元素。

使用“partialLinkText”和“LinkText”属性定位 Web 元素

Selenium 中的 partialLinkText 和 LinkText 定位器具有相同的功能。它们使您可以使用超链接文本找到不同的 Web 元素。我们可以使用它们来处理带有锚< a>标签的元素。参考不同的 Selenium 定位器策略，当我们有各种超链接与网页上的确切文本时，Selenium 会继续选择最先出现的那个。

以下是使用“partialLinkText”和“LinkText”属性定位 Web 元素的语法：

driver.findElement(By.partialLinkText(“PartialTextofLink”));

 

• By.partialLinkText：部分链接文本定位器可让您使用部分链接文本来识别元素。

driver.findElement(By.LinkText(“LinkText”));

 

• By.LinkText： 仅通过链接文本识别元素。

例子：

假设锚元素包含以下属性和属性：

<a id="Link1" href="https://www.lambdatest.com" target="_blank">Landingpage</a>

 

partialLinkText要使用or标识元素LinkText，超链接文本是必须的：

• driver.findElement(By.linkText("Landingpage"))
• By.linkText("Landingpage"：用于标识元素的超链接文本。

使用partialLinkText，您可以仅使用链接文本的一部分来识别元素：

• driver.findElement(By.partialLinkText("Land"))
• By.partialLinkText（“土地”）：链接文本的一部分Landingpage。

使用“TagName”属性定位 Web 元素

Selenium 中的TagName定位器可以使用 、div、button、***input等HTML 标记名称anchor tag来标识网页元素。

下面是查找带有“tagName:”的元素的语法

driver.findElement(By.tagName(“htmlTag”));

 

• By.tagName：tagName定位器用于查找具有特定标签名称的网络元素。
• htmlTag：用于标识元素的标签名称。

例子：

• By.tagName("a");
• ("a"):tagName定位器返回页面中包含指定标记“a”的所有元素。

使用“CSS 选择器”属性定位 Web 元素

层叠样式表 (CSS) 可广泛用于设置不同网页的样式。大多数网页都是动态设计的。因此，很难获得用于定位不同元素的名称、类或唯一 ID。Selenium 中的 CSS 选择器可以作为最佳选择，因为与 Selenium 中不同类型的定位器相比，它们的速度要快得多。阅读完我们的 Selenium 定位器备忘单后，您可以通过 CSS 选择器备忘单进一步深入研究它。

以下是使用 CSS 选择器识别 Web 元素的语法：

driver.findElement(By.cssSelector(“cssValue”));

 

• By.cssSelector: CSS 选择器定位器用于使用 CSS 选择器查找元素。
• cssValue: 用于定义 CSS 选择器值的属性。

例子：

让我们考虑输入元素包含以下内容：

<input autocomplete="off" placeholder="Name" type="text" id="userName" class=" registration-form">

 

要使用 CSS 选择器查找元素，代码如下：

By.cssSelector("input[id= ‘userName’]")

• By.cssSelector：用于使用 CSS 选择器定位 Web 元素的方法。
• input[id= ‘userName’]: CSS 选择器的值。
• Input: 属性用于定义 CSS 选择器的 ID 值。
• Id: 用于输入定义各种 CSS 定位器的 ID 值的属性。
• userName：CSS 定位器的名称。

让我们看看我们的 Selenium 定位器备忘单中的各种 CSS 选择器属性类型。

CSS 选择器属性类型

CSS 选择器中的标记和 ID

ID要通过and定位元素Tag，您必须在 Selenium 定位器中使用以下组件：

句法：

css=(Html tag)(#)(ID attribute value)

 

• HTML tag：获取要定位的标签（例如，输入标签）。
• #：获取ID属性。我们专门使用它来通过 ID 定位任何元素。
• ID 属性值：定位元素时输入ID属性值。

这与 CSS 定位器中的 和 类似Tag，ID只是您使用点 (.) 来表示类属性值而不是散列 (#)。

句法：

css=(HTML tag)(.)(Class attribute value)

 

• 类属性值：属性类的值。

CSS 选择器中的标记和属性

这是 Selenium 中的定位器类型之一，您可以在其中通过标记名称定位元素并使用其值定义属性。当多个元素具有相同的属性和标记时，Selenium 驱动程序将选择第一个。

句法：

css=(HTML Page)[Attribute=Value]

 

• Attribute=Value：通过提供属性值来定义属性。

CSS 选择器中的标记、属性和类

通过 Selenium 中的这些类型的定位器，您可以通过类名和不同的属性值来定位元素。

句法：

css=(HTML tag>)(. )(Class attribute value)([attribute=Value of attribute])

 

• HTML Tag：用于定义标签名称。
• 类属性值：用于定义类属性的值。
• attribute=Value of attribute：用于提及属性的确切值。

类的 CSS 中的通配符（*、^ 和 $）

Selenium CSS 选择器可以帮助您通过不同的模式匹配多个字符串，例如^, *, 和$. 我们使用 CSS 通配符选择器同时选择不同的元素。

让我们在我们的 Selenium 定位器备忘单中带您了解如何通过 Selenium CSS 选择器使用通配符：

CSS 选择器中的开头

在 Selenium 的许多类型的定位器中，当您尝试使用以任何指定值开头的字符串匹配不同元素时，此 Selenium 定位器可帮助您定位元素。

句法：

css=(HTML tag)([attribute^=value])

 

• [attribute^=value]：用于使用以指定值开头的字符串选择或定位任何所需的 WebElement。

CSS 选择器中的结尾

当您尝试使用以任何指定值结尾的字符串匹配不同元素时，此 Selenium 定位器可帮助您定位元素。

语法：

css=(HTML tag)([attribute$=end of the string])

 

• [attribute$=end of the string]: 用于通过CSS Selector 根据字符串的结束值定义属性值来定位元素。

包含在 CSS 选择器中

当您要将各种元素与由设置值组成的字符串匹配时，定位不同的元素。

句法：

css=(HTML tag)([attribute*=partial string])

 

• [attribute*=partial string]: 用于通过CSS Selector中的Contains定位元素，通过根据字符串的部分值定义属性值。

CSS 选择器中的子元素

我们使用这个 Selenium 定位器来定位存在于另一个元素中的元素。

句法：

css= tagname.class name li:nth-of-child

 

• Li:nth-of-child: CSS 选择器中引用的子元素的索引。

Selenium 相对定位器

如果不讨论 Selenium 相对定位器，我们的 Selenium 定位器备忘单将是不完整的。Selenium 4 的一个主要特性是相对定位器。这有助于您搜索不同的 WebElements，您可以将它们与不同的元素相关联。这是Selenium 4 相对定位器的列表：

硒 4 定位器	描述	语法（在 JAVA 中）
above	发现所需的 WebElement 位于上述元素之上。	driver.findElement(with(By.tagName(“TagName”)) .above(ElementName))
below	发现所需的 WebElement 位于上述元素下方。	driver.findElement(with(By.tagName(“TagName”)) .below(ElementName))
toLeftOf	发现所需的 WebElement 位于特定元素的左侧。	driver.findElement(with(By.tagName(“TagName”)) .toLeftOf(ElementName))
toRightOf	所需的 WebElement 出现在特定元素的右侧。	driver.findElement(with(By.tagName(“TagName”)) .toRightOf(ElementName))
near	所需的 WebElement（或项目）与所提及的元素的距离不超过 50 像素。	driver.findElement(with(By.tagName(“TagName”)) .near(ElementName))

使用“XPath”属性定位 Web 元素

让我们在这个 Selenium 定位器备忘单中探索 XPath，一个重要的属性。Selenium 中的 XPath 定位器在用于查找 Web 元素的定位器类型中是独一无二的。XPath 使用 XML 表达式来定位网页元素。定位动态网页元素是必须的，就像 CSS 选择器一样。当属性是动态的时，XPath 对其进行了简化。

以下是使用 XPath 定位器识别 Web 元素的语法：

driver.findElement(By.xpath(“htmlTag”));

 

• XPath：XPath（XML Expression）属于DOM结构。
• htmlTag：目标元素所需的属性，用于标识任何唯一的 Web 元素。

例子：

By.xpath("By.id(“userName”));

• By.xpath: 用于定位网页元素的 XML 表达式。
• id: 标识值
• By.id(“userName”)：用于标识“用户名”下的 Web 元素的属性。

有许多类型的 XPath 定位器：

• 标准 XPath：这是编写 XPath 定位器的标准方式。
• XPath 包含：XPath 使用 CSS 选择器“包含”来定位值动态变化的 WebElements。

XPath 的语法包含：

//tagname[contains(@attribute, ‘partial value of attribute’)]

 

• XPath 使用ANDandOR：在 Selenium 中的这些类型的定位器中，当我们想要根据一组特定条件定位 WebElement 时，我们使用ORand运算符作为 Selenium XPath 选择器的一部分。AND对于 ，这两个条件都必须为真AND。

XPathOR运算符的语法：

//input[@id='login_1' OR @name='login’]

 

XPathAND运算符的语法：

//input[@id='login_1' AND @name='login’]

 

• starts-with() XPath 中的方法：XPath Selenium 定位器starts-with()方法提供类似于 Selenium CSS 选择器的功能。这可以帮助您定位不同的元素，从特定的属性值开始。我们可以使用 XPathstarts-with()方法来定位 WebElements，当我们刷新页面时，值会发生变化。

方法的语法starts-with()：

//tagname[starts-with(@attribute,'starting name of the attribute value')]

 

• XPath 文本：Selenium XPath 文本定位器在使用精确文本匹配时可以帮助我们通过 XPath 定位 WebElements。当我们查看包含特定级别文本的所有标签时，我们可以使用它来定位元素。

句法：

//div[text()='Logged In']

 

识别不同 Web 元素的不同定位器策略

在起草我们的 Selenium 定位器备忘单时，我们不能跳过这部分，因为必须确定哪种策略最适合您。

• findBy：提及为任何 WebElement 或一组 WebElement 定位对象的策略。它有两种类型：findElement和findElements。

Web 应用程序交互需要 Selenium 驱动程序来定位页面上的不同 Web 元素。当它无法正确识别元​​素时，您无法触发不同的事件，如输入、发送或单击。这些是查找一个或多个 Web 元素的方法：

• findElement：根据定位器的搜索需要，查找单个网页元素并返回。
• findElements：找到每一个网页元素，并根据定位器的搜索需要返回。

使用 Selenium 定位器的最佳实践

在有关 Selenium 定位器备忘单的本节中，让我们看一下当您想通过 Selenium 定位器识别元素时的以下几点：

• 选择正确的 Selenium 定位器以识别 Selenium 中的 Web 元素。
• 避免使用动态属性值在 Selenium 定位器中定位不同的元素。
• 当您的网页包含唯一集而不是 XPath 时，使用 ID 和名称属性来加快处理速度。
• 使用定位器时，请确保定位器直接指向所需的元素。
• 避免任何会导致脚本中断的事情，例如使用自动生成的元素，因为我们是在动态 Web 环境中运行时生成元素属性的。
• 使用 CSS 或 XPath 定位器时，请避免使用由 Chrome 开发工具生成的定位器。这会导致代码损坏、维护和可靠性问题
• 始终让您的定位器易于识别。

结论

在执行 Selenium 自动化测试时，这个 Selenium 定位器备忘单可以派上用场。

使用此 Selenium 定位器备忘单，使用正确的定位器和相对定位器快速识别 Web 元素。在 Selenium 的不同类型的定位器中，您需要选择适合您的场景的定位器。

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。