在构建现代 Web 自动化测试脚本（如使用 Selenium）或处理复杂的 XML 数据提取时，你可能会遇到这样一个挑战：如何精准、稳定地定位到页面中的某个特定元素？虽然 CSS 选择器在处理样式时非常强大，但在面对复杂的层级关系，或者我们需要根据特定的文本内容、动态生成的属性进行定位时，它往往显得力不从心。这时，我们就需要掌握一种更为强大的查询语言——XPath。
在这篇文章中，我们将深入探讨 XPath（XML Path Language）的核心概念，并结合 2026 年最新的开发趋势，特别是 AI 辅助编程 与 Vibe Coding 的理念，重新审视这门经典技术。我们将从它是什么开始，了解它的基本语法结构，进而学习如何编写绝对路径和相对路径，最后掌握高级函数（如 contains, starts-with）以及逻辑运算符的使用。通过这篇指南，你将学会如何像专家一样编写健壮的 XPath 表达式，大幅提升你的自动化测试效率，并利用 AI 工具实现“氛围编程”的最佳实践。
什么是 XPath？
XPath 的全称是 XML Path Language（XML 路径语言）。正如其名，它最初被设计为一种在 XML 文档中导航和查询节点（元素、属性、文本等）的语言。由于 HTML 本质上是 XML 的一种应用，因此 XPath 在 Web 开发和自动化测试领域扮演着至关重要的角色。
简单来说，XPath 是一种用于在 XML/HTML 文档结构树中定位信息的语言。我们可以把它想象成文件系统中的路径，只不过这里的“文件夹”是 HTML 标签，“文件”是标签内的文本或属性。
#### 我们使用 XPath 主要为了：
- 精确查询：在复杂的 DOM 树中查找特定的元素或属性，尤其是在元素缺乏唯一 ID 或 Class 名称时。
- 遍历文档：灵活地在元素的父子、兄弟或祖先节点之间进行跳转和遍历。
- 数据验证：在自动化测试中，验证页面是否包含特定的文本内容或元素结构。
- 提取信息：从 XML 或 HTML 文档的任何部分提取特定的数据片段。
XPath 基础语法与结构
在编写代码之前，我们需要先掌握 XPath 的“语法糖”。理解这些基础符号是构建复杂查询的基石。随着前端框架（如 React, Vue）的普及，DOM 结构变得越来越动态，因此理解这些底层逻辑比以往任何时候都重要。
#### 核心组件表
描述
—
选择匹配的当前节点（无论它们位于文档的何处）
从根节点选择（绝对路径）
节点的标签名称
选择属性
谓语（条件表达式）
#### 基础语法示例
让我们来看一个最基础的表达式结构：
//tagname[@attribute = ‘value’]
解读：
-
//：告诉引擎在整个文档中搜索，不限制层级。 - INLINECODEd424614b：我们要找的标签类型（例如 INLINECODE61d7be4f, INLINECODE2077711d, INLINECODEc2561845）。
- INLINECODEb32d5e8d：筛选条件。方括号 INLINECODE6edd0e2f 内部表示过滤条件，
@后面跟属性名，等号后面是期望的值。
实战案例：
假设我们想定位一个搜索框，它的标签是 INLINECODE030eb79d，且 INLINECODE38e0a99a 属性的值为 fakebox-input。
//input[@id = ‘fakebox-input‘]
这意味着：“请在文档中找到所有的 INLINECODEa16d16c1 元素，然后筛选出那些 INLINECODE90b0bf77 属性等于 fakebox-input 的元素。”
深入理解：XML 树结构与路径定位
为了更好地理解 XPath 的工作原理，我们需要将 HTML 或 XML 代码视为一棵节点树。在 2026 年的现代 Web 应用中，这棵树通常是由 JavaScript 动态渲染的，但这并不改变 XPath 的导航逻辑。
让我们看一个具体的 XML 代码片段（这也代表了 HTML 的结构）：
IIT Mathematics
A Das Gupta
Inorganic chemistry for JEE
V K Jaiswal
在这个结构中：
- 根节点是
。 - 它有两个子节点
。 - 每个 INLINECODE5fa45fbe 节点都有一个属性 INLINECODE3f46cd76（Math 或 Chemistry）。
- INLINECODE085ce34e 下面又有 INLINECODE66074d08 和
等子节点。
场景挑战：如果我们想选择“化学书籍”的作者元素，我们该如何编写 XPath？
我们不仅需要定位到 INLINECODE194740c6，还要确保它是属于 INLINECODE6155b316 的那个 book 下的。这时我们可以利用层级路径：
/bookstore/book[@category=‘Chemistry‘]/author
解析：
-
/bookstore：从根节点 bookstore 开始。 -
/book：进入 bookstore 下的 book 节点。 -
[@category=‘Chemistry‘]：但我们只对 category 为 Chemistry 的 book 感兴趣。 -
/author：在该 book 节点下，选择 author 子节点。
2026 年视角：AI 辅助与 XPath 的深度融合
随着 Agentic AI（自主 AI 代理）和 LLM 驱动的开发工具（如 Cursor, Windsurf, GitHub Copilot）的普及，编写 XPath 的方式正在发生革命性的变化。我们不再仅仅是手写正则表达式般的字符串，而是开始与 AI 结对编程。
#### Vibe Coding（氛围编程）实践
在现代开发流程中，我们可以利用 AI 的“多模态”能力来辅助 XPath 的编写。你可能会遇到这样的情况：页面结构极其复杂，肉眼难以分辨层级。
我们可以通过以下方式解决这个问题：
- 截图与语境结合：在 Cursor 或 Windsurf 等 IDE 中，你可以直接截图目标元素，并输入提示词：“请为这个高亮的按钮生成一个相对 XPath，要求使用 data-testid 属性，并且包含容错处理。”
- AI 生成与审查：AI 会根据 DOM 结构生成 XPath。但作为专家，我们需要审查它是否过于脆弱（例如是否包含了动态 ID）。我们可以要求 AI：“重写这个 XPath，移除动态部分，使用
contains()函数。”
这种“自然语言编程”的实践，将我们的重点从记忆语法转移到了逻辑设计和架构稳定性上。
XPath 的两大类型：绝对与相对
在编写定位策略时，我们通常会面临两种选择：绝对路径或相对路径。理解它们的区别对于编写“抗老化”的自动化脚本至关重要。
#### 1. 绝对 XPath
绝对 XPath 是从文档的根节点（INLINECODEe011d168）开始，一级一级地写下完整的路径，直到目标元素。它总是以单斜杠 INLINECODE5c063bdb 开头。
示例：
/html[1]/body[1]/div[6]/div[1]/div[3]/div[1]/div[1]/div[1]/div[3]/ul[1]/li[2]/a[1]
绝对路径的特点：
- 优点：定位极其精确，逻辑简单，就是目录结构。
- 缺点（致命）：极其脆弱。只要页面结构发生微调（例如插入了一个新的
div，或者调整了排序），整个路径就会失效。在自动化测试中，通常不推荐使用绝对路径。
#### 2. 相对 XPath
相对 XPath 是从文档的中间节点开始匹配，它以双斜杠 // 开头。这意味着“只要符合这个条件，无论你在文档的哪个角落，我都能找到你”。
示例：
//input[@id = ‘fakebox-input‘]
或者基于属性的查找：
//a[@href=‘/login‘]
相对路径的特点：
- 优点：灵活且健壮。它不依赖于从根节点开始的完整链条，即使页面上方布局变了，只要目标元素的属性特征没变，定位依然成功。
- 最佳实践：在 Selenium 或爬虫开发中，始终优先使用相对 XPath。
企业级实战：高级技巧与容灾策略
在现代 Web 应用中，我们经常面对动态属性（如 id="submit_168293"）和复杂的 Shadow DOM。仅仅依靠基础语法往往不足够。在 2026 年，为了应对高复杂度的单页应用（SPA），我们需要更高级的定位策略。
#### 1. 处理动态属性的智慧：contains() 与 starts-with()
这是最常用且最实用的函数组合。它用于选择属性值包含或以特定字符串开头的节点。
应用场景：处理基于时间戳或会话 ID 的动态属性。
语法：
//tagname[contains(@attribute, ‘value‘)]
//tagname[starts-with(@attribute, ‘value‘)]
示例：假设有一个提交按钮，它的 INLINECODE866b517f 是 INLINECODE41ef84e2，其中数字部分是动态生成的。
// 包含匹配
//button[contains(@id, ‘submit-btn‘)]
// 前缀匹配（更加严格）
//button[starts-with(@id, ‘submit-btn-‘)]
解析：这表示“找到所有 INLINECODEd9dc0e0c 标签，只要它们的 INLINECODE38bacee5 属性中包含了 ‘submit-btn‘ 这几个字符”。这大大增强了脚本的抗干扰能力。
#### 2. 逻辑运算符 (AND/OR) 的组合力量
当我们需要同时满足多个条件，或者满足多个条件中的任意一个时，可以使用逻辑运算符。这是提高脚本稳定性、减少误报的关键。
示例 1 (AND)：找到 type 为 ‘submit‘ 且 name 为 ‘login‘ 的按钮。
//input[@type = ‘submit‘ and @name = ‘login‘]
示例 2 (OR)：找到 value 为 ‘Log In‘ 或者 class 包含 ‘btn-primary‘ 的元素（常用于兼容多版本页面或 A/B 测试场景）。
//input[@value = ‘Log In‘ or contains(@class, ‘btn-primary‘)]
#### 3. 利用 Axes（轴）突破层级限制
除了父子关系，XPath 还有强大的“轴”功能，允许你查找兄弟节点、祖先节点等。这在没有唯一 ID 的列表项中定位特定元素时非常有用。
实战案例：
假设我们有一个商品列表，我们需要找到标题为“iPhone 15”的商品旁边的“加入购物车”按钮。
iPhone 15
$999
策略：先通过文本定位到 INLINECODEc4f190f9，然后找它的兄弟节点 INLINECODE67a528a2。
XPath 表达式：
//h3[text()=‘iPhone 15‘]/following-sibling::button
解析：
-
//h3[text()=‘iPhone 15‘]：锁定标题文本。 -
/following-sibling::：告诉引擎在 DOM 树中向同级下方查找。 -
button：目标节点类型。
面向未来的进阶策略：标准化与可维护性
在 2026 年，随着“测试左移”理念的深入，我们编写选择器时不仅要考虑“能跑通”，还要考虑“可维护性”和“与 AI 的协作效率”。
#### 1. 拥抱语义化属性
现代框架鼓励我们使用 INLINECODEe8c31aa9、INLINECODE2cbf6bd7 等自定义属性来专门服务于自动化测试。这些属性不会因样式改变或 CSS 重构而变化，是连接业务逻辑与测试代码的最佳桥梁。
推荐做法：
在代码开发阶段，我们就应该建议开发人员为关键 UI 元素添加测试 ID。
对应的 XPath：
//button[@data-testid=‘checkout-submit-btn‘]
这种选择器是“未来证明”的，无论前端样式如何炫酷地更新，只要业务逻辑不变，测试脚本就能通过。
#### 2. 性能优化：比以往任何时候都重要
在大型微前端架构中，DOM 节点数动辄数万。低效的 XPath 会导致明显的页面卡顿。
优化原则：
- 避免通配符 INLINECODEc12288b4 的滥用：尽量避免在长路径的开头直接使用 INLINECODE895b26e3，这会遍历整个 DOM 树。
* Bad: //div//span//a
* Good: //div[@id=‘container‘]/ul/li/a
- 善用谓语过滤：尽早使用
[...]过滤掉不需要的节点，减少后续查找的数据集。
常见陷阱与故障排查
在我们最近的一个金融科技项目中，我们发现 30% 的测试失败是由不当的定位策略引起的。以下是我们的经验总结：
- 索引陷阱：尽量避免使用 INLINECODEcec40bec 或 INLINECODE1ce23f94。表格或列表中的数据顺序一旦变化，脚本就会点错行。应该基于内容定位，如
//td[text()=‘User A‘]/..。 - 文本匹配的敏感性：
text()函数是完全匹配的，且对空格敏感。如果文本包含换行符，直接匹配可能会失败。
* 建议：使用 normalize-space() 函数来处理文本前后的空格。
* //button[normalize-space()=‘Submit‘]
总结
XPath 并没有在 2026 年过时，反而随着 AI 工具的普及变得更加强大。我们不再需要死记硬背复杂的语法，而是专注于理解 DOM 结构的逻辑，并利用 AI 生成健壮的查询语句。
通过结合 Vibe Coding 理念，我们可以让 AI 帮助我们快速生成、验证和优化 XPath。同时，掌握 contains()、逻辑运算符和 Axes 定位法，依然是构建高可靠性自动化测试框架的基石。
接下来的步骤：
我们建议你打开一个真实的网站（比如电商网站），尝试在浏览器控制台中使用 $x("//your-xpath-here") 函数来测试你的表达式。然后，尝试在你喜欢的 AI IDE 中描述一个元素，看看 AI 生成的 XPath 是否比你自己写的更简洁、更稳定。熟练掌握这一技能，将使你的自动化测试之路事半功倍。