首页 » 前端

xpath定位元素总结

   发表于:前端评论 (0)   热度:523

基础

关于xpath定位网上有好多资料,我推荐在MDN上查看,我感觉上面讲的比较全面 developer.mozilla.org/en-US/docs/… 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[@class='but1']" 找到class=but1的input标签
//tag[@attribute1="Value1" and @attribute2="Value2" ] //input[@class='but1' and @name='key'] 布尔逻辑运算; 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[@class='but1']"/span  
//*[@attribute="value"]/tag2 //*[@class='r']/a 通过*匹配
//tag1//parent::tag2 //span[@icon-name="error-line"]/parent::button 由子节点查找父节点
//tag1//preceding-sibling::tag2 //span[@icon-name="error-line"]/preceding-sibing::input 由弟弟节点查找哥哥节点
//tag1//following-sibling::tag2 //input[@aria-label="Email"]/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 对象。

上实例,以百度输入框为例 我们找到这个输入框,并为这个输入框赋值

图片.png

好用的xpath插件

如图所示

图片.png

以chrome浏览器为例,安装成功后,在这里显示

图片.png 点击任何element,会自动生成好几种定位方式的表达式,大部分都能唯一标识,为了验证生成的表达式是否可用,可以安装另两款插件,两者选一个就可以

图片.png

图片.png

xpath finder安装好之后,在这里,我们输入刚才第一个插件生成的xpath表达式,我们可以看到在页面能够找到,并把找到的元素标识出来

图片.png

xpath helper也有异曲同工之妙,安装试试看吧

(。・v・。)
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。