Selenium中的Xpath——一个完整的指南

1,988 阅读8分钟

Selenium中的Xpath。一个完整的指南

在这篇文章中,我们将看到什么是XPath,XPath的类型,以及如何用例子在Selenium中编写Xpath。

在编写Selenium自动化脚本时,我们必须定位元素。如果我们不能用id、class、name等定位器来定位元素,我们就用XPath来定位网页上的一个元素。

XPath提供了选择任何定位器来支持你的条件的能力,它允许选择动态地搜索一个网页元素。然而,XPath并不是Selenium提供的发现任何元素的唯一程序。

在这篇博客中,我将描述如何使用XPath和各种XPath表达式来定位复杂的或动态的项目,这些项目的特征会随着操作或页面刷新而动态变化。

什么是Selenium中的XPath?

Selenium中最常用的定位器之一,Xpath(也被称为XML路径),支持你通过页面的HTML格式进行引导。使用HTML DOM结构,可以定位HTML和XML文档的网页中的每个元素。

下面介绍一下Xpath的语法。

在上图所示的XPath语法中:

  1. **// **:表示当前节点
  2. Tagname: 单独节点的Tagname
  3. @:选择属性。
  4. Attribute: 表示该节点的属性
  5. Value: 表示所选属性的值

为了寻找网络元素,Selenium中提供了以下各种XPath定位器:

XPath定位器查找网页上的不同元素
**ID
**通过使用元素的ID,找到该元素。
**类名
**使用元素的类名,找到该元素。
**名称(Name
**以使用其名称查找该元素。
**链接文本
**用链接的文本查找该元素。
**XPath
**寻找动态元素和在不同网页元素之间移动都需要使用XPath。
**CSS路径
**此外,CSS路径可以发现缺乏名称、类或ID的项目。

Selenium中XPath的类型

以下是Selenium中提供的两种XPath类型。

XPath Absolute

绝对Xpath是一种快速简便的技术,可以从根节点定位元素,但它有一个主要的缺点,如果元素的路径被改变了,Xpath就会失败。

Xpath的语法开头的单个正斜杠(/)表示你可以从根节点上选择一个元素。

下面是一个绝对Xpath表达式的例子。

绝对X路径。

/html/body/div/header/div/div/div[2]/div/div[2]/nav/div/ul/li[8]/a

相对的XPath

从HTML DOM结构的中间开始,相对XPath开始了。开头的双正斜杠(//)表示它可以在网站的任何地方搜索该元素。

有了相对XPath,我们就可以从HTML DOM结构的中间开始,而不需要一个冗长的XPath。

下面是一个相对XPath表达式的例子。

相对的XPath。 //*[@id="primary-menu-single"]/li[8]/a

如何在Selenium中编写XPath?

请详细阅读以下内容,如何在Selenium中编写XPath。

基本的XPath

使用基本的XPath表达式从XML文档中选择节点或节点的列表,如下图所示。

下面是另外几个直接的Xpath表达式的例子。

Xpath = //input[@type='email']

Xpath = //textarea[@class= 'wpcf7-form-control wpcf7-textarea'] 。

Xpath = //input[@value='现在提交']

Xpath = //a[@href='qacraft.com/'\]

Xpath 使用 contains()

当任何属性的值动态变化时,其中一个方法被应用,它被称为contains()。

我们试图在这种类型的Xpath中找到所提供的XPath所示的文本不完整的元素。

名字的完整值是 "your-website",但你只使用了部分值 "website"。

//input[包含(@name, 'site')]

Xpath使用OR和AND

在Xpath中,当采用OR表达式时,有两个可供选择的条件,不管是第一个条件还是第二个条件都应该是真的,或者可能两个都是。在这种情况下,任何一个条件都必须是真的,以确定该元素。

在下面的XPath中使用OR表达式来确定一个条件或两个条件是否为真。

在下面的图片中,两个基本的组件被突出显示。

Xpath。//*[@type='email' or @name='your-name']

在AND语句中采用了两个条件,这两个条件都必须为真,以便确定特定的元素。

Xpath://input[@type='text' and @name='your-name']

在下面的图片中,"姓名 "元素,它有 "类型 "和 "名称 "的属性,被突出显示。结果是,当两个要求都是真的时候,AND表达式可以找到元素。

XPath 使用 starts-with 函数

首先使用该函数来识别自上次刷新页面或在网站上的任何其他行动中已经改变的元素。如果属性的值没有变化,你也可以用这个公式来找一个静态的属性值,它与用来寻找元素的属性的起始文本相匹配。

例如,假设一个特定元素的类值经常变化。

类='wpcf7'

类='wpcf8'

类='wpcf9'

在下面的表达式中,有5个组件的 "数据-名称 "属性值以 "你的 "开头。

Xpath: //span[starts-with(@data-name ,'your')]

Xpath 使用text()

使用元素的实际文本,我们可以在这个表达式中发现元素。像姓名、用户名、电子邮件的标签,或者像 "保存 "或 "提交 "的按钮,或者表单的标签等元素的文本通常在这个元素中使用。

Xpath://span[text()='Contact us']

Xpath 使用索引

这句话是用来在一个列表中定位一个特定的元素。例如,如果你利用一个属性生成5个不同的元素,但你只需要第二个或第三个成员,你可以使用索引来定位该元素。

指示性的表达式语法。

XPath: (//*[@attribute='value'])[index] 。

因为在下面的表达式中,有许多具有相同属性值的输入标签,我们可以使用索引来定位这些元素。

Xpath: (//input[@type='text'] )[2]

下面表达式中的'type'属性找到了3个元素,然而,如果我们只想要第二个元素,我们可以通过使用索引2找到它。

在Selenium中编写Xpath的轴心方法是什么?

XPath使用以下方法

使用下面的公式可以找到当前节点的下一个元素。它被用于一些复杂的Xpaths。下面列出了Xpath的语法。

语法。//tagname[@attribute='value']//following::tagname

在下面的例子中,我试图通过利用当前节点来定位项目,例如通过使用当前节点的名称来定位一个电子邮件地址。

Xpath://input[@name='your-name']//following::input[1]。

XPath使用跟随-同胞

当寻找当前节点之后的同一层次或节点的元素时,使用following-sibling。下面给出了之后的同级元素的语法。

语法。//tagname[@attribute='value']//following-sibiling::tagname

使用前面的Xpath

使用前一个表达式来定位当前节点的正前方的元素。

你可以用前面的来定位当前节点之前的所有元素。前面的语法如下所示。

语法。//tagname[@attribute='value']//preceding::tagname

在下面的例子中,我使用当前节点的电话号码来尝试定位电子邮件地址。

Xpath://input[@name='your-phone']//preceding::input[1]。

在下面的XPath中,电话号码是当前节点,而电子邮件就在一个节点的前面,因此可以通过前移来找到它。

使用peceding-sibling的Xpath

找到紧挨着当前节点的同级节点之前的元素,需要使用preceding-sibling表达式。

语法。//tagname[@attribute='value']// preceding-sibling::tagname

在下面的例子中,我使用当前节点来尝试定位网站测试标签。

XPath使用child

正如表达式的名字所暗示的,这被用来定位特定节点的每一个子元素。

语法://tagname[@attribute='value']//child::tagname

在下面的例子中,input是父节点span的子节点,目标是使用child表达式获得name元素的XPath。

Xpath//span[@data-name='your-name']//child::input

使用父节点的XPath

使用这个短语可以找到当前节点的父节点。

语法://tagname[@attribute='value']/parent::tagname

使用子节点查找父节点的XPath的例子如下所示。这里,span是子节点,使用父节点表达式,我们可以从这个子节点确定父节点div的XPath。

Xpat://span[@data-name='你的名字']//parent::div

如何捕获加载器图像的XPath

在我们进行Selenium网站自动化时,有一些元素会短暂地显示在屏幕上。当我开始编码XPath的时候,这个元素已经从屏幕上消失了。

为了说明问题,让我们试着找出加载图像的XPath,因为它们需要一段时间才能显示在屏幕上。

为加载器寻找XPath的步骤如下。

步骤1: 当页面第一次加载时,按F12准备检查元素。接下来,选择来源标签,查看下面的图片。

第2步: 当我们在屏幕上看到一个加载元素时,只要按F8或点击下面高亮图片中的位置。

第3步:返回到元素页面,开始在那里写定位器。

第4步:当XPath完成后,返回并从来源中选择恢复选项。

上面描述的方法允许你暂停执行,把元素留在屏幕上,同时查找元素的XPath。

总结

我们在上面的selenium locator的教程中了解了所有不同种类的XPath。并利用这一点,我们能够使用contains()、Start-with()和text()创建简单的XPath,以及使用前面和后面的更复杂的XPath。

这篇文章还包括如何为动态元素定位XPath。例如,可以使用替代的XPath轴来寻找动态元素,否则使用标准XPath是不可能找到的。

我希望上述文章中的信息超出了你对今天学习XPath的期望。享受你的测试吧!