xpath定位元素总结
基础
关于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对象。
上实例，以百度输入框为例 我们找到这个输入框，并为这个输入框赋值
好用的xpath插件
如图所示
以chrome浏览器为例，安装成功后，在这里显示
点击任何element,会自动生成好几种定位方式的表达式，大部分都能唯一标识，为了验证生成的表达式是否可用，可以安装另两款插件，两者选一个就可以
xpath finder安装好之后，在这里，我们输入刚才第一个插件生成的xpath表达式，我们可以看到在页面能够找到，并把找到的元素标识出来
xpath helper也有异曲同工之妙，安装试试看吧
(｡･v･｡)