页面元素定位 XPath 简介

 页面元素定位 XPath 简介

 

　　本文所说的 Xpath 是用于 Selenium 自动化测试所使用到的，是针对XHTML网页而言的一种页面元素的定位表示法。

 

　　XPath 背景

　　　　XPath即为XML路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。

　　　　XPath基于XML的树状结构，提供在数据结构树中找寻节点的能力。起初XPath的提出的初衷是将其作为一个通用的、介于XPointer与XSL间的语法模型。但是XPath很快的被开发者采用来当作小型查询语言。

　　　　若感兴趣，可参考：https://zh.wikipedia.org/wiki/XPath ； 若不用 XML，仅需了解页面元素 XPath，下文已足够。

 

　　XPath 表示

　　　　　　在说明XPath元素表示法之前，需要对 HTML 语言有一定的了解，需了解 HTML的层级嵌套，html标签，Tag Id 及 属性值 等。

 

　　　　层级定位

　　　　　　

　　

　　　　　　若对HTML代码较熟悉，则可猜测到上图中该XPath是如何一层层定位下来的，其中如 div[2] 中 [2] 表示该层级结构下的第2个div

 

　　　　　　如果XPath的开头是一个斜线（/）代表绝对路径，元素存在一个或者不存在； 如果开头是两个斜线（//）代表相对路径，表示文件中所有符合模式的元素都会被选出来，所以可能会有多个。

　　　　　　如下方示例，　　XPath2 的元素 包括 XPath1的元素（若存在），但不一定仅仅表示XPath1（可能会有多个符合）；

　　　　　　　　　　　　　　XPath3 为表格元素，若该页面仅存在一个 table，该层级表示法就比较直观，第1行第3列

　　　　　　XPath1：     /html/body/div[1]/div[2]/div[1]/div[2]/div[1]/a 

　　　　　　XPath2：     //div[2]/div[1]/a 

　　　　　　XPath3：     //tr[1]/td[3]

 

　　　　　　若页面较复杂，显然取绝对路径会很长，而且若其中任一层级改动就会导致该XPath失效，/(ㄒoㄒ)/ ； 取相对路径可以减少 XPath 失效可能性，但可能产生多个元素匹配以致元素取错，这就需要判断该XPath是否可用了（下面会介绍使用浏览器插件来验证XPath）。

 

　　　　属性描述

XPath 语法支持节点描述，节点描述为一个逻辑真假表达式，任何真假判断表达式都可在节点后方括号里表示，这条件必须在XPath处理这个节点前先被满足。在某一步骤可有多少个描述并没有限制。

　　　　　　对于页面元素， 可用XPath 表示为 html l标签的属性值来定位，以百度首页为例，查看如下几个 XPath的表示法：

　　　　　　XPath1：     //*[@id="su"]

　　　　　　XPath2：     //*[@value="百度一下"]

　　　　　　XPath3：     //input[@class="bg s_btn"]

　　　　　　XPath4：     //*[@id="lg"]/img

　　　　　　XPath5：     //a[@class="mnav"]

　　　　　　XPath6：     //a[@class="mnav"][2]

　

　　　　　　XPath1、2、3  实际上表示的均为“百度一下” 元素，只是选取的属性值的不同； 另，这边使用了通用符 * 表示匹配任意

　　　　　　XPath4 表示符合[@id="lg"]元素的下层img标签，即下图中百度的图片

 

　　　　　　XPath5 表示为 class="mnav" （样式）的标签，下图可见多个链接都符合该表示法； XPath6 定位了第2个符合该条件的元素，即下图的 hao123 链接

 

　　　　XPath 选取策略

　　　　　　最理想的情况莫过于Id，唯一且开发一般不会做改动（上述例子XPath1）

　　　　　　其次是某Id层级下的元素（较简单的层级）（上述例子XPath4）

　　　　　　再次为，可确保该页面下属性值唯一且一般不做改动的，如 value="百度一下"（上述例子XPath2）

　　　　　　若是表格或者表单，//tr[1]/td[3]  、 //form/button  类似的表示方式也是比较可取的，但须注意页面标签的唯一性

 

　　XPath 相关插件

　　　　Selenium IDE (FireFox 插件)

　　　　　　

 　　　　　  其中 Target 输入框，可显示对应元素的 XPath 表示；可使用 Select 及 find

　　　　　　优点：1. 可自动化录制回放，显示直观，且 易用；  2. 多种可选 （属性及层级）；  3. 唯一性保证

　　　　　　缺点：1. 仅支持FireFox；  2. div[1] 类似 [1] 不显示，显示为 div （chrome webdriver 缺失[1]可能会定位不到）；  3. 多元素定位不可

 

　　　　Chrome 插件 XPather

　　　　

　　　　　　https://chrome.google.com/webstore/detail/xpather/gabekepgockchhemajjahpchlnkadiac?utm_source=chrome-app-launcher-info-dialog 

　　　　　　

　　　　　　优点：1. 使用直观，易用；  2. 可显示出所有满足该XPath表达式的所有元素；

　　　　　　缺点：1. 仅支持Chrome；  2. 需已知XPath； 3. 页面部分遮盖

     

 　　　　

　　　　　　https://chrome.google.com/webstore/detail/xpath-finder/ijaobnmmgonppmablhldddpfmgpklbfh?utm_source=chrome-app-launcher-info-dialog

 

 

　　　　　　优点：1. 使用直观，易用；  2. 可显示出所有满足该XPath表达式的所有元素； 3. 置于F12工具；  4. 有历史记录

　　　　　　缺点：1. 仅支持Chrome；  2. 需已知XPath；