百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

XPath 选择器

qiyuwang 2025-05-16 15:45 1 浏览 0 评论

上篇《Selenium 入门（基于 Python）》讲解 Selenium 的入门知识时，挖了几个坑，其中一个就是本文。

XPath 和 CSS 选择器在 Web 自动化测试中应用非常广泛，它们可以精准定位元素。如果精通这两个选择器中的其中一种，就可以很好地进行自动化测试脚本的编写。本文中，我将从 Web 自动化测试的角度来介绍这两个选择器（所以与其无关的功能我可能就不讲了，涉及到各自的术语的地方也不会太细，毕竟真正搞懂并不容易）。

因为篇幅太长，我就把这两个选择器分开说明。即使如此，内容还是很复杂，还请大家耐心阅读。

简介

XPath 是一门在 XML 文档中查找信息的语言，可用来在 XML 文档中对元素和属性进行遍历。

HTML 可以视为一种不严格的 XML，所以也可以用 XPath 进行元素的查询。

了解元素

在了解这两个选择器之前，我们应该了解 HTML 标签中元素之间的关系。

元素、属性和值

我们先从一段简单的 HTML 标签开始：

<div class="ding-class ding-class1 ding-class2" id="ding-id">text</div>

上面一段中，整个 div 标签是一个元素，div 是标签名。

该元素的属性有两个：

  • 属性名为 class，值为 ding-class ding-class1 ding-class2
  • 属性名为 id，值为 ding-id

该元素的文本为 text。

元素间的关系

元素间的关系，主要有自身（self）、先辈（ancestor）/后代（descendant）、父（parent）子（child）、同胞（sibling）、前（preceding）后（following）。

这些关系从字面上应该很好理解。我这边主要说明一下先辈/后代与父子关系的区别：父子关系只包括直接从属的关系；而先辈/后代关系不仅包括直接从属，而且还包含间接从属的关系。

我们看一个较为完整的简单的 HTML 代码（之后的讲解绝大多数都以这个为例）：

<!DOCTYPE html>
<html id="an_4"><head>...</head><body id="an_3">
    <div id="an_2">
        <ul id="an_1">1
            <li id="si_1">1-1</li>
            <li id="si_2">1-2</li>
            <li id="test">1-3
                <ul id="de_1">1-3-1
                    <li id="de_2">1-3-1-1</li>
                    <li id="de_3">1-3-1-2</li>
                </ul>
                <ul id="de_4">1-3-2
                    <li id="de_5">1-3-2-1</li>
                    <li id="de_6">1-3-2-2</li>
                </ul>
                <ul id="de_7">1-3-3
                    <li id="de_8">1-3-3-1</li>
                </ul>
            </li>
            <li id="si_3">1-4</li>
            <li id="si_4">1-5</li>
        </ul>
    </div>
    <div>2</div>
    <div>3</div>
</body></html>

对于 id 为 test 的 li 元素而言:

它的父元素为 id 为 an_1 的 ul 元素；

它的先辈元素，除了父元素外，还有：

  • id 为 an_2 的 div 元素
  • id 为 an_3 的 body 元素
  • id 为 an_4 的 html 元素

它的子元素有：

  • id 为 de_1 的 ul 元素
  • id 为 de_4 的 ul 元素
  • id 为 de_7 的 ul 元素

它的后代元素，除了子元素外，还有：

  • id 为 de_2 的 li 元素
  • id 为 de_3 的 li 元素
  • id 为 de_5 的 li 元素
  • id 为 de_6 的 li 元素
  • id 为 de_8 的 li 元素

它的同胞元素中，

  • 在它之前的同胞元素有：
    • id 为 si_1 的 li 元素
    • id 为 si_2 的 li 元素
  • 在它之后的同胞元素有：
    • id 为 si_3 的 li 元素
    • id 为 si_4 的 li 元素

基本选取元素方式

绝对路径与相对路径

首先，XPath 有绝对路径和相对路径之分。如果路径以 / 开头，则为绝对路径，否则为相对路径。

绝对路径是相对于整个 HTML 代码而言的。

相对路径只能在特定情况下使用，如在 Selenium 中，对于 WebElement 实例使用：

a = driver.find_element(By.XPATH, '//div[@id="content_left"]')
b = a.find_elements(By.XPATH, 'div[not(@tpl="recommend_list")]//h3')

上面的代码中，a 使用的是绝对路径，b 使用的是相对路径。

标签

如果要查询某个标签名的元素，直接输入标签名即可。如 div、p。

全体

表示全体的符号为 *，为选取之前的元素下的所有元素，不管什么标签都可以。

如果使用绝对路径查询全体：

/*

一般会选择 html 元素。

属性

在标签后加上方括号 []，方括号内写这个元素的属性，表示选取符合该条件的元素。

下标

在属性中写上数字，表示选取第几个元素。

注意：XPath 中的下标从 1 开始，与绝大多数编程语言不一样！

如：

div[3]

表示选取第三个 div 元素——更确切地说，是路径下 div 元素中的第三个。

参数

在参数名前加上 @，写在属性里，表示选取具有该参数的元素。如：

div[@id]

表示选取具有 id 属性的 div 元素。

@参数名=值 表示选取参数为某个值的元素，如：

li[@id="test"]

表示选取 id 属性为 test 的 li 元素。

文本值用单引号、双引号包裹都可以，只要统一就行，看个人习惯。不过，如果你要将其应用于编程，最好用你包裹字符串用的引号不一样的引号，免去转义的麻烦：

driver.find_element(By.XPATH, '//div[@id="content_left"]')
driver.find_element(By.XPATH, "//div[@id='content_left']")

子元素与后代元素

要查询元素 a（父元素）下的子元素 b，则可以在父元素后接上 /，再接上子元素：

a/b

这种方法可以一直做下去。

如果要查询元素 a（先辈元素）下的后代元素 b，则接上 //：

a//b

// 很多情况下用在一段 XPath 语句的开头，这样可以直接定位元素，免去写元素前面的 /html/body/... 这样无用的层级，节约开发时间，增加易读性。比如示例中定位 id 为 test 的 li 元素，可以直接写：

//li[@id="test"]

而不用写成：

/html/body/div[1]/ul/li[@id="test"]

当然，前提是能够定位准确。

父元素

查询元素的父元素，可以用 .. 表示。如：

//li[@id="test"]/../li[1]

选取的是示例中 id 为 test 的 li 元素的父元素的第一个 li 子元素，也就是 id 为 si_1 的元素。

聪明的你应该发现了，XPath 和文件路径的表达方式很像——所以有时候我们就叫“XPath 路径”；也能想到， . 表示自己。

运算与常用函数

基本运算

XPath 语法中支持加减乘除（+ - * div）、取余（mod）、比较（= != < > <= >=）、逻辑（and or not()）运算。

注意，XPath 中的除法为 div 代替，取余用 mod，等于只需要写一个等号。逻辑运算的“与”和“或”分别用 and 和 or 连接，而“非”使用 not() 函数表示。

如：

//li[not(@index div @alt < 6)]

表示选取不符合“index 属性除以 alt 属性的结果小于 6”这个条件的 li 元素。如果一个 li 元素的这两个属性不能进行运算（如其中一个为文本），或者是缺少这两个属性中的任意一个，也会被选取。如果应用于下面的 HTML 代码：

<div>
  <ul>
    <li index="2" alt="1">1</li>
    <li index="12" alt="2">2</li>
    <li index="24" alt="2">3</li>
    <li index="d" alt="e">4</li>
    <li index="2" alt="f">5</li>
    <li index="e" alt="1">6</li>
    <li index="2" alt="1">7</li>
    <li index="e" alt="e">8</li>
    <li index="2">9</li>
    <li index="e">10</li>
    <li alt="1">11</li>
    <li alt="e">12</li>
    <li>13</li>
  </ul>
</div>

则文字为 1、7 的 li 元素不会被选取，其他的会被选取。

可以使用圆括号提高运算优先级，不过使用情况比较有限，基本上是包裹整个路径，或者在属性内使用。

选取第几个元素

前面我们说了如何选取第几个元素，现在说点高级的。

选取最后一个元素，在方括号中用 last()。如：

//li[@id="test"]/../li[last()]

选取的是示例中 id 为 test 的 li 元素的父元素的最后一个 li 子元素，也就是 id 为 si_4 的元素。

如果要选取倒数第几个元素，也可以如法炮制，如：

//li[@id="test"]/../li[last()-1]

选取的是示例中 id 为 test 的 li 元素的父元素的倒数第二个 li 子元素，也就是 id 为 si_3 的元素。

方括号中还可以使用 position() 函数表示被选取元素的序号，可与限定条件一起使用。如：

//li[@id="test"]/../li[position()<3]

选取的是示例中 id 为 test 的 li 元素的父元素的前两个 li 子元素，也就是 id 为 si_1、si_2 的元素。

选取多个路径

多个路径可以通过使用 | 来连接，表示选择满足任意一个路径的条件的元素。如：

//ul[@id="de_1"] | //li[@id="si_3"]

选取的是示例中 id 为 de_1 的 ul 元素，以及 id 为 si_3 的 li 元素。

文字

text() 函数表示元素的文字。该功能在 Web 自动化测试时，较常用于定义属性。如：

//li[text()="1-3-3-1"]

选取的是文本为 1-3-3-1 的 li 元素，即 id 为 de_8 的 li 元素。

注意：该函数取的文本不包括后代元素的文本，且如果有换行、空格和缩进，也会算进去。如果换行和缩进之间被其他元素隔开，也会被分隔为两个部分。比如对示例执行：

//li[@id="test"]/text()

实际上选取了四处：

> $x('//li[@id="test"]/text()')
(4) [text, text, text, text]
> $x('//li[@id="test"]/text()')[0].textContent
"1-3\n                "
> $x('//li[@id="test"]/text()')[1].textContent
"\n                "
> $x('//li[@id="test"]/text()')[2].textContent
"\n                "
> $x('//li[@id="test"]/text()')[3].textContent
"\n            "

因此，如果执行下面的语句，选取不到任何内容：

/li[@text="1-3"]

包含与连接，以及选取特定 class 的内容

contains(a, b) 函数表示在 a 中包含 b。

在选取带 class 属性的值时，会遇到一个元素的 class 属性有多个的情况：

<div class="ding-class">text</div>
<div class="ding-class bing-class">text</div>
<div class="bing-class ding-class ping-class">text</div>

现在需要选取 class 属性带有 ding-class 的 div 元素，如果使用

//div[@class="ding-class"]

只会选取第一个元素。

如果使用如下的语句，就能够选取这三个元素：

//div[contains(@class, "ding-class")]

表示 class 属性包含 ding-class 的 div 元素。

但是，这还不够，比如这种情况：

<div class="ading-class">text</div>
<div class="ding-class-1 x-class">text</div>

使用上面的语句，也会把这两个元素选中，这不是我们想要的。

我们有一个取巧的方法，在两个查询文本左右都加上空格。给 ding-class 加上空格简单，在字符串两边加空格就可以了；但是给 @class 加空格，就要用到 concat() 函数。

concat(a, b, ...) 函数表示连接括号里面的字符串。

对于上面的需求，只要把代码写为：

//div[contains(concat(" ", @class, " "), " ding-class ")]

这样就能够精确选取了。

以某字符串开头

starts-with(a, b) 函数表示 a 以 b 开头。由于和包含很像，就不赘述了。

轴

对于同胞元素、先辈元素等情况，我们可以利用一个称之为“轴”的概念。

轴的比较完整的用法如下：

  之前的元素/轴::标签[条件或下标]

表示之前的元素的轴中，符合条件或下标的标签。

对于 Web 自动化测试，相关的轴有以下：

  • parent：父元素（相当于..）
  • ancestor：先辈元素
  • ancestor-or-self：先辈元素与自身
  • child：子元素
  • descendant：后辈元素（相当于 //）
  • descendant-or-self：后辈元素与自身
  • preceding：之前的元素
  • following：之后的元素
  • preceding-sibling：之前的同胞元素
  • following-sibling：之后的同胞元素

主要是后面两个比较常用。

直接说还是比较难懂，还是看一下示例吧。

还是之前的例子，使用如下的语句：

//li[@id="test"]/preceding-sibling::*

表示选取示例中 id 为 test 的 li 元素之前的所有同胞元素，也就是 id 为 si_1 和 si_2 的 li 元素。

不过有一点需要注意，如果涉及到下标，是根据该元素的位置，从近到远排序的，而不是按照代码中的顺序排序！如：

//li[@id="test"]/preceding-sibling::*[1]

选取的是示例中 id 为 si_2 的 li 元素，因为它离 id 为 test 的 li 元素最近。

书写选择器文本的诀窍

善用工具

一般的浏览器的开发人员工具都提供了对这两个选择器的支持，可以参照之前的文章，在浏览器中调试选择器文本。

避免使用自动生成、层级过多、多处使用下标的嵌套

由于 Web 框架可能会变动层级和元素，这样的查询语句很容易查询不到想要的元素。建议使用一些标志性的特征来定位。如：

//*[@id="post-XPath"]/div[1]/main/div[2]/div/div[2]/div/p
//h3[@id="root-node"]/../div[@class="body"]/p

后者明显比前者要好。

相关推荐

你们想要的Python爬虫教程来了:从原理到实践

概述：网络世界的智能采集者Python爬虫是通过自动化程序模拟人类浏览网页行为的技术工具，其核心价值在于高效获取并解析网络数据。得益于Python丰富的第三方库（如requests、Beautiful...

你需要知道的 19 个 console 实用调试技巧

大家好，我是Echa。之前给大家介绍了《...

CSS布局必备技能

Flex是一种用于布局的CSS属性，它使得在容器中的子元素能够灵活地伸缩和排列，从而实现更加自适应和响应式的布局。使用Flex布局可以轻松地创建各种复杂的布局，而无需使用复杂的CSS或者...

我是如何使用ChatGPT和CoPilot作为编码助手的

...

jsoup Selector类学习笔记，快速提升你的HTML处理能力!

Selector类是jsoup库中的一个核心类，用于通过CSS选择器语法来查找HTML文档中的元素。选择器语法通用选择器*：匹配任何元素。标签选择器tag：匹配指定标签名的元素。...

CSS伪类选择器大全:提升网页交互与样式的神奇工具

CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...

简析JS中Document与CSS

如果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。1.Document与E...

网页世界隐藏的神秘代码语言，竟能这样改变布局

CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...

Thymeleaf 语法全面详解(史上最全)

Thymeleaf是一个现代化的服务器端Java模板引擎，支持HTML、XML、JavaScript、CSS甚至纯文本。以下是Thymeleaf语法的全面详解，包含所有属性和复杂用法。...

零基础学习HTML之CSS篇内联内部外部样式表和类型选择符

CSS简介CSS(CascadingStyleSheets)层叠样式表。CSS能做些什么？1.使用CSS样式可以有效地对页面进行布局。2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现...

css 设置盒子阴影，阴影和背景图保持一致

预览图首先查看预览图:原理采用了background属性...

CSS中的定位(postion)详解

定义CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置，z-index属性则决定了该元素所在的层级。定位类型1...

CSS selector 小知识学习分享

在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@#yen#%#yen@*T&’的玩意，那么这个“查找路径”到底是个什...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时，您是否曾经对使用开发工具感到沮丧？必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是，有一个浏览器扩展程序可以简化该过程：CSSSca...

XPath 选择器

上篇《Selenium入门（基于Python）...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表