tagName locator用于使用其标签名称直接查找元素。但是，这不是识别元素的首选定位器，因为它倾向于返回重复结果，因为HTML页面结构上可能有多个特定类型的元素。例如，输入，按钮，div 等。

在此XPATH vs vs css selectors博客的上面示例中，可以使用tagName属性找到 input 类型元素。定位器表达式可以写为：

如上所述，此表达式将标识网页上可用的所有输入元素。

linkText定位器

linkText locator用于根据超链接文本找到锚元。您不需要使用锚标签的任何属性。该元素可以使用超链接的可见文本轻松定位。

partinlinkText定位器

partialLinkText locator还用于根据锚链的文本找到锚元。它与linkText不同，因为它可以匹配超链接的部分文本。

检查Web元素，以帮助开发人员和测试人员调试UI缺陷或在HTML或CSS文件中进行修改。学习 how to inspect on MacBook 。

在此XPATH vs vs CSS选择器博客的上面示例中，超链接文本为 cross浏览器测试。我们可以使用超链接的部分文本来定位此锚元素：

什么是XPath？

XPath（XML路径）是一种语法表达语言，用于在网页上查找元素。 XPath可用于查找XML和HTML文档中的元素。

Xpath与流行的automation testing frameworks（如Selenium，Cypress，Playwright等）广泛使用。

语法：

XPATH表达式可以穿过XML/HTML DOM结构的第一个节点到所需的元素。 XPath表达式的标准语法包含具有属性和属性值的元素标签名称和属性的元素标签。

xpath表达式看起来像这样：

这是XPath表达式的图形表示。

XPath的类型

有两种类型的xpath

• 绝对xpath

• 相对xpath

绝对XPATH

绝对XPATH用于通过从HTML页面的启动节点（< html > tag）到要位于页面上的元素开始遍历整个DOM结构来找到元素。绝对XPath的主要特征是它以一个前向斜杠（/).

检查Web元素，以帮助开发人员和测试人员调试UI缺陷或在HTML或CSS文件中进行修改。学习 how to inspect element on MacBook 。

如下所示是 name 文本框的绝对xpath的一个示例，如下图所示：

绝对xpath不是定位元素的首选方法，因为它的脆弱，如果DOM结构发生任何变化，则趋于破裂。

让我们在这里看到一个演示，以证明绝对XPath表达的脆弱性。在此XPATH vs vs CSS选择器博客的上面示例中，已编辑了DOM结构。

现在，相同的绝对xpath表达式无法定位该元素，因为删除了启动节点和元素之间的一个 div 元素。

相对XPATH

相对XPath不需要起始节点，并且可以从DOM结构的中间定位元素。它始于双向前斜线（//），是定位元素的首选XPath表达式，因为表达式短且稳健。

在这里，找到 name 文本框的相对XPath将是：

您在此XPATH vs vs css selectors博客的上面示例中看到的那样，即使删除了启动节点和元素之间的几个节点，相对Xpath表达式仍在定位元素。

需要在Safari上进行交叉浏览器测试的绝佳解决方案吗？忘记模拟器或模拟器 - 使用真实的在线浏览器。尝试lambdatest在 safari browser online.

写XPath表达式

在从事大型的Web项目工作时，可能会有一些情况使用基本的XPATH表达式找到元素并不理想。之所以如此，是因为该元素可能没有任何可以唯一识别的属性。

另外，在某些情况下，元素唯一属性的值随着页面刷新而不断变化。然后问题是：您将如何找到它？

好吧，XPath提供了定位这种动态元素的方法形式的灵活性。让我们深入研究。

xpath包含（）方法

contains（）方法可以在xpath表达式中使用，以找到一个属性值随着页面刷新而不断变化的元素。

此方法基于查找部分文本的原理。如果您知道动态属性值的某些部分保持恒定，那将很有用。当属性值冗长并包含多个单词（例如，占位符文本值）时，也可以使用它。

示例：

在此示例中，使用 button 类型元素使用 class 属性。但是为此按钮定义了多个类。因此，它不能使用 className 定位器直接定位。

要使用 class 属性找到此元素，我使用了 contains（）方法，xpath表达式看起来像这样：

xpath starting-with（）方法

starting-with（）方法也适用于查找部分文本的相同原理。它与contains（）方法不同，因为它倾向于在属性值的开头找到静态文本。

我也使用了按钮元素的相同示例来演示此方法。要使用类属性找到此元素，我在此XPath vs vs vs css selectors博客中使用了starter-with（）方法，xpath表达式看起来像这样：

您可以在此XPath vs vs css selectors博客的上面示例中看到，类属性值以类名称为MT-20开始。因此，此表达式能够成功地定位此元素。

可以在下面的示例的帮助下更好地解释。

就像上面的示例一样，如果要从找到的所有元素中找到特定元素，则可以使用索引或任何属性值。

祖先

它选择当前节点的所有祖先元素（父，祖父母等）。

祖先方法的语法是祖先::标签名称

可以在下面的示例的帮助下更好地解释。

在这里，祖先关键字找到了所有是当前节点的祖先，即文本框。此示例的XPath表达式是：

再次，此表达式发现了8 em> div 元素，这些元素是当前节点的祖先（即父母，祖父母）。如果要选择特定元素，则可以使用索引或相关属性值。

父母

它选择当前节点的父元素。

父方法的语法为 parent :: tag name

可以在下面的示例的帮助下更好地解释。

在这里， parent 关键字找到当前节点的父元素的parent div 元素，即 company 文本框。此示例的XPath表达式是：

孩子

它选择了当前节点的所有子元素。

儿童方法的语法是 child :: tag name

可以在下面的示例的帮助下更好地解释。

在这里， child 关键字选择所有输入元素，即当前 div 元素的子女。此示例的XPath表达式是：

使用XPath的优点

• xpath可以在DOM结构的任意级别定位一个元素，并且不需要从根节点的开头到达所需元素

• x path表达式是双向的，可以从上到下，从底部到顶部（即，从父母到子节点，从子节点到父母节点）

• XPath与XML和HTML文档一起使用，并由多种编程语言支持

• xpath表达式支持多种方法，以找到由于动态属性值或有限的属性而难以找到的元素。例如，如果您需要找到一个没有任何唯一属性的元素，则可以使用XPath轴方法来建立与另一个唯一元素的亲子关系。通过这种方式，所需的元素可以很容易地找到。

发现17键 benefits of automation testing ，这将帮助您确定这是否是适合您的SDLC的正确呼吁。了解更多。

使用XPath的缺点

• xpath表达式可能会变得难以写或理解，以定位具有动态属性值的元素。

• XPath如果页面结构发生变化，则往往会破裂。尽管使用相对XPath基本上解决了此问题，但仍然有可能导致XPath失败的页面结构变化。

• xpath不支持具有多值属性的元素。

什么是CSS选择器？

CSS (Cascading Style Sheets) Selector是一种定位器，使用字符序列模式来识别基于HTML结构的元素。

对于初学者，CSS选择器的语法似乎比其他定位器（例如ID，名称，className等）更为复杂。但是，它是具有动态属性值的元素。<<<<<<<< /p>

语法：

CSS选择器语法与XPath的语法非常相似。可以表示如下：

这是CSS语法的图形表示：

编写CSS选择器表达式

A CSS选择器表达式可以用元素的多个属性编写。编写CSS选择器表达式的最常见方法是：

• css选择器带有 id 属性

• css选择器带有 class 属性

• css选择器带有其他属性

• CSS选择器通过组合不同的属性

具有ID的CSS选择器

元素的ID属性可用于编写CSS选择器表达式。我将再次以LambdaTest Selenium Playground网站的示例以使用其ID属性找到一个元素。