深入了解Selenium定位器｜教程

迪鲁宾
325 阅读15分钟

在基于网络的应用程序的开发过程中，有太多的测试案例需要执行。对于每个测试工程师来说，在HTML元素上执行诸如类型、点击等动作是必须的。 在执行自动化测试时，测试自动化工具应该能够在HTML元素上执行这些操作，就像我们在手动测试时的互动一样。

但是，自动化工具如何知道如何定位一个HTML元素来执行所需的操作？这就是Selenium定位器小抄派上用场的地方。

让我们在这个Selenium定位器教程中探索Selenium的定位器类型。

和我们一起深入了解我们专门为你制作的Selenium定位器小抄。

什么是Selenium定位器？

Selenium是一个广泛使用的测试自动化框架。通过Selenium，你可以自动进行任何互动，如输入、点击、双击DOM WebElements等。为了识别网页上的任何HTML元素，你必须使用定位器。这几乎是所有UI自动化工具的共同功能，包括Selenium。

Selenium WebDriver定位器采用不同的方法来识别页面上的HTML元素。Selenium对主要的网络定位器提供了多种支持。挑选一个符合你的测试要求的。我们准备了这份Selenium定位器小抄，关注我们需要涵盖的内容，以简化你的工作。

这些是Selenium中的定位器类型--ID、Name、ClassName、LinkText、Partial LinkText、TagName、CssSelector和XPath。

在这个Selenium定位器小抄的下一节，我们将详细探讨Selenium中的不同定位器。

什么是Selenium定位器类型？

在这份Selenium定位器小抄中，让我们在Selenium定位器小抄的这一部分中了解Selenium中最重要的定位器类型。

以下是该列表。

定位器说明语法（在Java中）
ID计算出使用ID属性的WebElementdriver.findElement(By.id("IdValue"))。
名称找出使用Name属性的WebElementdriver.findElement(By.name("nameValue"))。
类名利用Class属性来识别该对象driver.findElement(By.className("classValue"))。
链接文本充分利用文本超链接来定位WebElementdriver.findElement(By.linkText("textofLink"))。
部分链接文本利用超链接中的部分文本来定位所需的WebElement位置driver.findElement(By.partialLinkText("PartialTextofLink"))。
标签名利用TagName来定位任何需要的WebElementdriver.findElement(By.tagName("htmlTag"))。
CssSelector我们用来在网页中创建不同风格规则的CSS可以用来定位任何需要的WebElementdriver.findElement(By.cssSelector("cssValue"))。
XPath引入XPath作为WebElement的定位器driver.findElement(By.xpath("xpathValue"))。

用 "ID "属性定位网络元素

这是我们在Selenium定位器小抄中要讨论的第一个部分。Selenium中的ID定位器是定位不同网页元素的最常用方法。W3C希望它始终是唯一的。随着动态网页的出现，你可以动态地生成 "ID"。

下面是通过 "ID "来定位网页元素的语法。

driver.findElement(By.id(“IdValue”));
  • 驱动程序。Selenium WebDriver，在使用Selenium定位器时，我们需要从它那里定位网页元素。
  • findElement。用来查找网页元素的属性。
  • By.id。用来传递 "IdValue "属性的方法。
  • IdValue。用它的Id名称定位网页元素。

例子。

<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”):找到ID为 "food-radio-1"的网络元素。

今天就注册，在3000多种浏览器、操作系统和设备上测试网站和网络应用。现在就试试LambdaTest吧!

用 "名称 "属性定位网络元素

Selenium允许我们使用Selenium中的Name定位器来识别任何使用 "name "属性的元素。它可以有许多具有类似 "name "属性的元素。当我们想识别网络元素时，我们应该尽量使其独一无二。否则，它就会识别同一页面上存在的一些具有相同名称值的元素，并选择它首先发现的元素。

下面是通过 "名称 "来定位网页元素的语法。

driver.findElement(By.name(“nameValue”));
  • By.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") 。定位名称为 "食物 "的网络元素

在你阅读了我们的Selenium定位器小抄后，请观看我们的最新教程，了解如何与Selenium WebDriver的网络元素互动。

用 "ClassName "属性定位Web元素

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

下面是通过 "ClassName "来定位网页元素的语法。

driver.findElement(By.className(“classValue”));
  • By.className。用来传递 "className "定位器的方法。
  • classValue。用具体的类名来定位类。

例子。

比方说，下面的片段由一个事件的整个表单组成。

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

类属性值可用于表单识别。为了在我们的网页上识别同样的东西，下面的语法可以派上用场。

driver.findElement(By.className("registration-form-wrapper"));

By.className("registration-form-wrapper"):找到类名为 "registration-form-wrapper" 的网页元素

我们需要使用一个独特的类名来定位网页元素。如果有其他东西由这个类名组成，Selenium会考虑它而不是你需要考虑的web元素。

用 "partialLinkText "和 "LinkText "属性定位网络元素

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

下面是定位带有 "partialLinkText "和 "LinkText "属性的网络元素的语法。

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或LinkText识别元素，超链接文本是必须的。

driver.findElement(By.linkText("Landingpage"));

By.linkText("Landingpage"): 用来识别元素的超链接文本。

使用partialLinkText，你可以只使用链接文本的一部分来识别元素。

driver.findElement(By.partialLinkText("Land"));

By.partialLinkText("Land"): Part of the link text “Landingpage”.

用 "TagName "属性定位网络元素

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

以下是查找带有tagName的元素的语法。

driver.findElement(By.tagName(“htmlTag”));
  • By.tagName。tagName定位器用于查找具有特定标签名称的网页元素。
  • htmlTag。用来识别元素的标签名称。

例子。

By.tagName("a");

("a"): tagName定位器返回包含指定标签 "a "的页面中的所有元素。

用 "CssSelector "属性定位网页元素

层叠样式表（CSS）可以广泛用于不同网页的样式。大多数的网页都是动态设计的。因此，要获得一个名称、类别或唯一的ID来定位不同的元素是相当困难的。Selenium中的CSS选择器可以作为最佳选择，因为与Selenium中不同类型的定位器相比，它们的速度相当快。当你读完我们的Selenium定位器小抄后，你可以通过CSS选择器小抄来进一步深入了解它。

下面是用CssSelector来识别一个网页元素的语法。

driver.findElement(By.cssSelector(“cssValue”));
  • By.cssSelector:CssSelector定位器是用来使用CSS选择器寻找元素的。
  • cssValue。用来定义CSS选择器的值的属性。

例子。

css=(HTML Page)[Attribute=Value]

让我们考虑一下，输入元素由以下内容组成。

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

为了用CSS选择器找到该元素，下面是代码。

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

  • By.cssSelector:用于用CSS选择器定位网页元素的方法。
  • input[id= 'userName']。CSS选择器的值。
  • 输入。用来定义CSS选择器的属性。
  • Id。用来输入标签的方法，用于定义各种CSS定位器
  • userName。CSS定位器的名称。

让我们来看看我们的Selenium定位器小抄中的各种CSS选择器属性类型。

CSS选择器中的标签和ID

要通过ID和Tag来定位元素，你必须在Selenium定位器中使用以下组件。

语法。

css=(Html tag)(#)(ID attribute value)
  • Html标题。获取你要定位的标签（例如，输入标签）。
  • #：获取ID属性。我们专门用它来通过ID定位任何元素。
  • ID属性值。当你想定位该元素时，输入ID属性值。

这与CSS定位器中的Tag和ID类似，只是你用一个点（.）来表示类属性值，而不是哈希（#）。

语法。

css=(HTML tag)(.)(Class attribute value)
  • 类属性值。属性类的值

CSS选择器中的标签和属性

这是Selenium中的一种定位器，你可以通过标签名来定位元素，并通过其值来定义属性。当多个元素具有相同的属性和标签时，Selenium驱动程序会选择第一个。

语法。

css=(HTML Page)[Attribute=Value]
  • Attribute=Value。通过提供它的值来定义属性。

CSS选择器中的Tag、Attribute和Class

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

语法。

css=(HTML tag>)(. )(Class attribute value)([attribute=Value of attribute])
  • HTML标签。用于定义标签名称。
  • 类属性值。用来定义类属性的值。
  • attribute=属性值。用于提及属性的确切值。

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

Selenium CSS选择器可以帮助你通过不同的模式（如^、*和$）匹配多个字符串。我们使用CSS通配符选择器来同时选择不同的元素。

让我们在Selenium定位器小抄中带你了解如何使用Selenium CSS选择器的通配符。

a.CSS选择器中的 "开始"(Starts-With)

在Selenium的许多类型的定位器中，当你试图用一个以任何指定值开始的字符串来匹配不同的元素时，这个Selenium定位器可以帮助你定位元素。

语法。

css=(HTML tag)([attribute^=value])
  • [attribute^=value]。用于选择或定位任何需要的WebElement。

b.CSS选择器中的Ends-With

当你试图用一个以任何指定值结尾的字符串来匹配不同的元素时，这个Selenium定位器可以帮助你定位元素。

语法。

css=(HTML tag)([attribute$=end of the string])
  • [attribute$=字符串的结尾]。用于通过CSS选择器根据字符串的结束值定义属性值来定位元素。

c.CSS选择器中的包含

当你想用一个由设定值组成的字符串来匹配不同的元素时，可以定位不同的元素。

语法。

css=(HTML tag)([attribute*=partial string])
  • [属性*=部分字符串]。用于通过CSS选择器中的包含，根据字符串的部分值来定义属性值，从而定位该元素。

d.CSS选择器中的子元素

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

语法。

css= tagname.class name li:nth-of-child
  • Li:nth-of-child。被引用的子元素的索引

Selenium相对定位器

如果不谈Selenium相对定位器，我们的Selenium定位器小抄就不完整了。Selenium 4的一个主要功能是相对定位器。这有助于你搜索不同的WebElements，你可以将其与不同的元素联系起来。下面是Selenium 4相对定位器的列表。

用 "XPath "属性定位网络元素

让我们在这份Selenium定位器小抄中探讨XPath这个重要的属性。在Selenium中的XPath定位器在寻找网络元素的定位器类型中是独一无二的。XPath利用XML表达式来定位网页元素。它是定位动态网页元素的必备工具，就像CSS选择器一样。当属性是动态的时候，XPath简化了它。

下面是用XPath定位器来识别网页元素的语法。

driver.findElement(By.xpath(“htmlTag”));
  • XPath。属于DOM结构的XPath（XML表达式）。
  • htmlTag。目标元素的所需属性，用于识别任何独特的网络元素。

例如。

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

  • By.xpath。XML表达式，用于定位网页的元素。
  • id。标签名称
  • By.id("userName")。用于识别 "userName "下的网页元素的属性。

有许多类型的XPath定位器。

  • 标准XPath。这是标准的方式，你可以通过它来写XPath定位器。
  • XPath Contains。XPath使用CSS选择器 "包含 "来定位值动态变化的WebElements。

XPath Contains的语法。

//tagname[contains(@attribute, ‘partial value of attribute’)]
  • **XPath使用'AND'和'OR'。**在Selenium的这些类型的定位器中，当我们想根据一组条件来定位一个Web元素时，我们使用'OR'和'AND'操作符作为Selenium XPath选择器的一部分。对于 "和"，两个条件都必须是真。

XPath OR操作符的语法。

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

XPath AND操作符的语法。

//input[@id='login_1' AND @name='login’]
  • XPath中的 starts-with() 方法。XPath Selenium定位器的starts-with()方法提供了与Selenium CSS选择器类似的功能。这可以帮助你定位不同的元素，从一个特定的属性值开始。我们可以使用XPath starts-with()方法来定位WebElements，当我们刷新页面时，这些元素的值会改变。

starts-with()方法的语法。

//tagname[starts-with(@attribute,'starting name of the attribute value')]
  • XPath文本。Selenium XPath文本定位器可以帮助我们通过XPath定位WebElements，当它使用一个精确的文本匹配。当我们查看所有包含某一级文本的标签时，我们可以用它来定位元素。

语法。

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

不同的定位器策略来识别不同的网络元素

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

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

网络应用的交互将需要Selenium驱动来定位页面上的不同网络元素。当它不能正确识别元素时，你就不能触发不同的事件，如输入、发送或点击。这些是寻找一个或多个网络元素的方法。

  • findElement。找到一个单一的网页元素，并根据定位器的搜索需求将其返回。
  • findElements:找到每一个网络元素，并根据定位器的搜索需求将其返回。

一旦你完成了我们的Selenium定位器小抄，就可以通过我们的XPath定位器小抄来了解Selenium中的XPath基础知识。

使用Selenium定位器的最佳实践

在本节Selenium定位器小抄中，当你想通过Selenium定位器来识别元素时，让我们看看以下几点。

  • 选择正确的Selenium定位器来识别Selenium中的网络元素。
  • 避免使用动态属性值来定位Selenium定位器中的不同元素。
  • 当你的网页包含一个独特的集合时，使用ID和名称属性，而不是XPath，以实现快速的过程。
  • 当使用定位器时，确保定位器直接指向需要的元素。
  • 避免任何会导致脚本中断的东西，比如使用自动生成的元素，因为我们在动态网页环境中的运行时间会生成元素的属性。
  • 当使用CSS或XPath定位器时，避免使用Chrome开发工具生成的定位器。这将导致代码破坏、维护和可靠性问题
  • 始终保持你的定位器很短，便于识别。

你可以随时回到我们的Selenium定位器小抄和LambdaTest学习中心中提到的其他关于Selenium的资源材料，以便更好地更新与响应式测试、跨浏览器兼容性等相关的不同主题。

总结

在进行Selenium自动化测试时，Selenium定位器作弊表会很方便。像LambdaTest这样的自动化测试平台提供了一个在线Selenium网格，让你在3000多个真实浏览器和操作系统的浏览器群中执行端到端的自动化测试。

使用这个Selenium定位器小抄，使用正确的定位器和相对定位器快速识别一个网络元素。在Selenium的不同类型的定位器中，你需要选择适合你情况的定位器。

希望你觉得我们的Selenium定位器小抄很有用

常见问题(FAQ)

在Selenium中哪个是最好的定位器？

尽管Selenium中有不同类型的定位器，但许多用户更喜欢用Selenium ID定位器来定位任何页面上需要的WebElements，因为这是最快的方法。Selenium ID定位器对每个DOM元素都是唯一的。

什么是不同类型的网络定位器？

在Selenium中有八种类型的定位器。

  • 元素ID
  • 文本
  • 字段名称
  • 链接文本
  • 部分链接文本
  • CSS类
  • CSS选择器
  • XPath

findElement和findElements的区别是什么？

正如我们的Selenium locators cheat sheet中提到的，findElements方法将返回每个匹配的元素的列表。当没有元素可用时，它将返回一个空列表，或者它在你的页面上不再存在。另一方面，当你无法在页面上找到该元素时，findElement方法会抛出一个NoSuchElementException异常。

CSS和XPath哪个定位器更快？

与XPath相比，CSS选择器在大多数浏览器中的表现更快、更可靠。它们相当短，当你阅读它们时更容易。

什么是Selenium中的XPath？

XPath是一种方法，Selenium通过HTML页面结构进行导航。它让测试人员通过XML文档结构，你可以在XML和HTML文档上使用它。

avatar
文章
阅读
粉丝