整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Html 如何查找 xPath

Html 如何查找 xPath

Path 是我们在 HMTL 中定位元素的最常用办法。

在浏览器中打开 F12 调试窗口,然后右键找到你需要定位的 td 标签。

在代码中,找到 Copy,在 Copy 下面有一个 xPath。

粘贴到记事本中。

例如,我们上面拷贝的 xPath 为: //*[@id="ember160"]/td[1]

这个就是你需要的的 xPath 路径了。

Path(XML Path Language)是一种用于定位 XML 文档中节点的语言,同时也广泛应用于 HTML 页面元素的定位。在 UI 自动化测试中,XPath 是非常强大且灵活的元素定位方式,可以根据元素的层级结构、属性值、文本内容等特征来准确定位元素。以下是一些常用的 XPath 定位方式及示例:

  1. 绝对路径定位
  2. 使用元素的绝对路径(从根节点开始)来定位元素。
  3. 例:/html/body/div[1]/form/input[2]
  4. 相对路径定位
  5. 使用元素的相对路径(相对于当前节点)来定位元素。
  6. 例://div[@class='container']//input[@id='username']
  7. 使用元素属性定位
  8. 根据元素的属性值来定位元素。
  9. 例://input[@name='password']
  10. 使用文本内容定位
  11. 根据元素的文本内容来定位元素。
  12. 例://button[text()='Submit']
  13. 使用逻辑运算符
  14. 可以使用逻辑运算符(and、or、not)结合多个条件来定位元素。
  15. 例://input[@id='username' and @name='username']
  16. 使用通配符定位
  17. 使用通配符(*)来匹配任意节点或任意属性值。
  18. 例://*[@id='loginForm']
  19. 使用索引定位
  20. 使用索引来定位元素,索引从 1 开始。
  21. 例://ul/li[2]
  22. 使用轴定位
  23. 使用轴(ancestor、descendant、preceding-sibling 等)来定位元素。
  24. 例://div[@class='container']/preceding-sibling::label

XPath 定位方式非常灵活,可以根据需要选择合适的定位方式。在编写复杂的 XPath 表达式时,建议先在浏览器的开发者工具中验证 XPath 表达式是否能够准确地定位到目标元素。同时,避免使用过于复杂或易变的 XPath 表达式,以确保定位的稳定性和可维护性。希望以上内容能够帮助你更好地理解和应用 XPath 定位方法。如果有任何问题或需要进一步的帮助,请随时告诉我。祝你在 UI 自动化测试中取得成功!

信很多小伙伴已经听说过Xpath,之前小编也写过一篇关于Xpath的文章,感兴趣的小伙伴可以戳这篇文章如何利用Xpath抓取京东网商品信息以及Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结。今天小编继续给大家介绍一些Xpath知识点,希望对大家的学习有帮助。

1、Xpath让我们可以使用一种类似于Windows下的文件路径的方式,让我们可以定位到HTML或者XML结构中的具体元素。Xpath本身包含标一些准函数库,可以让我们的Xpath语法更加强大。

2、在HTML结构中,有一定的层级关系,主要的关系包括:父节点、子节点、同胞节点(兄弟节点)、先辈节点、后代节点。

一般的,像类似于<head>这种结构,称之为一个节点。如上图,根据层次关系,我们可以知道<body>节点是<nav>的父节点,相应的,<nav>节点是<body>节点的子节点。同胞节点又叫兄弟节点,一般的处于同级层次的节点叫同胞节点,如上图中的<nav>节点和第一个<div>节点、177~181行的<li>标签都是属于同胞节点。先辈节点又叫祖先节点,一般的,一个节点的上层以上的节点均称为先辈节点,所以父节点也是属于先辈节点的一种。基于此,我们又可以称<body>节点是<nav>的先辈节点。相对应的,一个节点的下层以下的节点均称为后代节点,所以子节点也是属于后代节点的一种。基于此,我们又可以称<nav>节点是<body>节点的后代节点。

3、理解这些节点之间的关系之后,可以方便我们更好的理解Xpath语法,下表是部分常用的Xpath语法。

表达式

详解

//@class

选取所有名为class的属性

/article

选取根元素article

//div

选取所有div子元素

article

选取所有article元素的所有子节点

article/a

选取所有属于article的子元素的a元素

article//div

选取所有属于article元素的后代的div元素

这里特别强调“/”和“//”的区别,“/”一般代表的某个元素的子节点,而不是全部的后代节点;而“//”一般代表的某个元素的后代节点,范围比“/”代表的要更加广泛一些。@符号后边时常跟着class,代表选取名为class属性的节点,比较常见。

4、下面针对具体的网页源码,让大家了解一下网页结构。

如上图中的红色框框中,class为属性,而等于号后边的“grid-5”即为属性值,有的时候节点内不只是一个属性,如上图中的196行中,就有两个属性。

5、为了更加方便的定位到div或者其他节点下的标签,我们需要继续进一步的进行定位锁定,下表是部分常用的Xpath语法。

表达式

详解

//div[@lang]

选取所有拥有lang属性的div元素

//div[@lang='eng']

选取所有拥有lang属性为eng的div元素

/article/div[1]

选取属于article子元素的第一个div元素

/article/div[last()]

选取属于article子元素的最后一个div元素

/div/*

选取属于div元素的所有子节点

//*

选取所有元素

//div/a | //div/p

选取所有div元素的a和p元素

掌握了Xpath语法知识之后,我们就可以通过Xpath语法来进行编写Xpath表达式,以提取网页上的目标数据。

千里之行,始于足下。如果想学好Xpath,更是需要勤加使用。