多语言 网站源码,小型网站开发,做旅游网站推广,中国建设银行网站的机构在 Web 自动化测试、数据采集、前端调试中#xff0c;XPath 仍然是不可或缺的技能。虽然 CSS 选择器越来越强大#xff0c;但面对复杂 DOM 结构时#xff0c;XPath 仍然更具灵活性。因此#xff0c;掌握 XPath#xff0c;不仅能提高自动化测试的稳定性#xff0c;还能在爬…在 Web 自动化测试、数据采集、前端调试中XPath 仍然是不可或缺的技能。虽然 CSS 选择器越来越强大但面对复杂 DOM 结构时XPath 仍然更具灵活性。因此掌握 XPath不仅能提高自动化测试的稳定性还能在爬虫开发、前端调试中提升效率。
在 Web 自动化测试、爬虫开发、前端调试等场景中XPath 作为一种强大的元素定位方式常常被用来精准地获取页面元素。你是否在写 XPath 时遇到过
元素定位失败 路径过长且不稳定 层级太多维护困难
如果你也有这些烦恼那这篇文章一定对你有帮助今天我们就来总结 XPath 的常用写法并推荐几款超好用的 XPath 插件让你的元素定位更简单高效 那么XPath 到底该怎么写才能又短又准有哪些 XPath 插件可以提高定位效率 今天我们一起来聊聊 XPath 语法总结 1. 绝对路径 vs 相对路径
绝对路径不推荐/html/body/div[1]/div[2]/span路径长结构变动就失效相对路径推荐//div[classcontent]//span更灵活适应性强 关于xpath定位网上有好多资料我推荐在MDN上查看个人感觉上面讲的比较全面 https://developer.mozilla.org/en-US/docs/Web/XML/XPath xpath是一门在xml文档中查找信息的语言它使用路径表达式来选取xml文档中的节点或节点集。同样也可以用于html文件元素的查找 xpath节点的关系术语
以下几个术语看字面意思就能明白
父亲Parent子Children同胞、同级sibling祖先Ancestor后代Descendant xpath基础语法
选取节点
XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。 下面列出了最有用的路径表达式
表达式描述nodename选取此节点的所有子节点。/从根节点选取。//从匹配选择的当前节点选择文档中的节点而不考虑它们的位置。.选取当前节点。..选取当前节点的父节点。选取属性。
例子
路径表达式结果div选取 div 元素的所有子节点。/div选取根元素 div。注释假如路径起始于正斜杠( / )则此路径始终代表到某元素的绝对路径div/span选取属于 div 的子元素的所有 span 元素。//span选取所有 span子元素而不管它们在文档中的位置。div//span选择属于 div 元素的后代的所有 span 元素而不管它们位于 div 之下的什么位置。//aria-label选取名为 aria-label 的所有属性。 谓语
谓语被嵌在方括号中查找元素加上一些特定的限定条件 常用的几种方式
//tag[attribute”Value”]//input[classbut1]找到classbut1的input标签//tag[attribute1”Value1” and attribute2”Value2” ]//input[classbut1 and namekey]布尔逻辑运算; and/or属性与逻辑结合解决多个属性重名问题//tag[contains(attribute1, ”Value1” )]//input[contains(placeholder,请输入)]模糊匹配 1存在属性值一部分是一直不变另一部分是随机生成的 2整体属性太长//tag[starts-with(attribute1, ”Value1” )]//a[starts-with(class,abc123)] //tag[text()”value”]//p[text()”你好”]text匹配 text也可以用模糊匹配//tag[contains(text(), “value“)]//tag1/tag2[index]//form/input[2]父节点定位子节点层级与属性结合解决没有属性的问题//tag1[attribute”Value”]/tag2//input[classbut1]/span//*[attribute”value”]/tag2//*[classr]/a通过*匹配//tag1//parent::tag2//span[icon-nameerror-line]/parent::button由子节点查找父节点//tag1//preceding-sibling::tag2//span[icon-nameerror-line]/preceding-sibing::input由弟弟节点查找哥哥节点//tag1//following-sibling::tag2//input[aria-labelEmail]/following-sibling::div由哥哥节点查找弟弟节点 js执行xpath
有时在页面控制台想立刻验证定位的元素是否正确是否可以对它进行一些操作可以使用js,当然也可以使用jquery,抱歉我还没学到先不讲了
document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result )
第一个参数是符合xpath语法规则的表达式
contextNode应评估 xpathExpression 的文档中的节点包括其任何和所有子节点。document 节点是最常用的 namespaceResolver将传递包含在 xpathExpression 中的任何命名空间前缀的函数它返回一个表示与该前缀关联的命名空间 URI 的字符串。这使得能够在 XPath 表达式中使用的前缀和文档中使用的可能不同的前缀之间进行转换。该转换函数可以是 使用 [XPathEvaluator] 对象的 [createNSResolver]方法[创建]。null。其可以用于 HTML 文档或者当不使用命名空间前缀时。注意如果 xpathExpression 包含命名空间前缀这将导致一个带有 NAMESPACE_ERR 的 DOMException 抛出。用户定义的函数。有关详细信息请参阅附录中的 [使用一个用户定义的命名空间解析器] 部分。 resultType指定作为评估结果返回的所需结果类型的[常数]。最常传递的常量是 XPathResult.ANY_TYPE它将返回 XPath 表达式的结果作为最自然的类型。附录中有一个部分其中包含[可用常数]的完整列表。它们在下面“[指定返回类型]部分中进行解释。 result如果指定了现有的 XPathResult 对象它将被重用以返回结果。指定 null 将创建一个新的 XPathResult 对象。
上实例以百度输入框为例 我们找到这个输入框并为这个输入框赋值 好用的xpath插件 定位 XPath 规则时借助浏览器插件可以大大提高效率。以下是几款超实用的插件推荐 1. XPath HelperChrome Edge
✅ 直接在浏览器中测试 XPath 表达式✅ 实时高亮匹配的 HTML 元素✅ 快速复制 XPath 路径 2. ChroPathChrome Firefox
✅ 支持自动生成 XPath 和 CSS 选择器✅ 支持对 XPath 进行验证和优化✅ 直观的 UI 界面适合新手 3. SelectorsHubChrome Edge
✅ 比 ChroPath 功能更强支持 Shadow DOM 定位✅ 支持智能推荐最优 XPath✅ 可以进行 XPath 教程学习 4. FirePathFirefox 专用
✅ 适用于 Selenium 相关测试✅ 在 Firebug 插件中直接获取 XPath 如图所示 以chrome浏览器为例安装成功后在这里显示 点击任何element,会自动生成好几种定位方式的表达式大部分都能唯一标识为了验证生成的表达式是否可用可以安装另两款插件两者选一个就可以 xpath finder安装好之后在这里我们输入刚才第一个插件生成的xpath表达式我们可以看到在页面能够找到并把找到的元素标识出来 xpath helper也有异曲同工之妙安装试试看吧 总结 XPath 看似复杂但掌握常用语法后你就能写出高效、稳定、易维护的定位方式。同时合理使用 XPath 插件可以极大提高开发和测试效率让元素定位变得更简单
每次碰到需要定位的元素简单我就直接写代码运行即可如果碰到复杂的我就会结合xpath插件生成xpath,验证元素是否能找到然后在控制台验证它是否可操作会比直接写代码反复调试节省不少时间 大家有更好效率更高的方法请在评论区进行探讨 学会 XPath测试开发效率翻倍选对 XPath 插件让你快人一步
