转载

UI自动化测试——页面元素定位

UI自动化测试中，页面元素定位是一大难题，其方式也有不少，如通过Tag、Id、Name、CSS、XPath等。如何能优雅地定位到元素，选取何种方式定位很重要。实际应用上，页面部分变更是常有的事，元素定位选取的稳定性也有一定的讲究。

本人就以往UI自动化的经验，同化成一种方式，即 仅使用XPath进行元素定位 ，虽然本质上是结合了Id、CSS等，但实际运用上一切方法和手段都是等价的。

本文所说的 XPath 是用于 Selenium 自动化测试所使用到的，是针对XHTML网页而言的一种页面元素的定位表示法。可能会有人质疑仅用XPath定位的方式，请看完本文再做评价。

XPath 背景

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

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

XPath 表示

在说明XPath元素表示法之前，需对 HTML语言有一定了解，需了解HTML层级嵌套，HTML标签，Tag Id 及属性值等。若对上述名词陌生的，请回炉学习HTML。

属性描述

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

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

XPath1： //*[@id="su"]
XPath2： //input[@value="百度一下"]
XPath3： //input[@class="bg s_btn"]

UI自动化测试——页面元素定位

XPath1、2、3 实际上表示的均为“百度一下”这个按钮元素，只是选取的属性值的不同而已。XPath1表示找id为”su”的元素；XPath2表示找value为“百度一下”的input标签元素；而XPath3则表示找class即样式名为”bg s_btn”的input标签元素。

这就解释了开头我所说的XPath同化取Id、CSS、Name等方式的做法，即可理解为取HTML标签的属性罢了，而且该方式更具灵活性，可做多种及多层的匹配，如单取CSS为”test”，则会取出所有CSS为”test”的元素，而若写成XPath方式，如 //input[@class="test"] ,则取出的是CSS为”test”且仅为input的元素；若可知上层Id，如 //div[@id="test"]//*[@class="test"] ，则定位的是id为”test”div下所有class为”test”的元素。甚至有更灵活的模糊匹配方式，如若XPath为 //a[contains(text(),'新')] ，表示为所有包含”新”这一文字的a元素，如“新闻”a标签就会被定位出。

备注：1.开头是两个斜线（//）代表相对路径；2.使用了通配符 * 表示匹配任意

有时要定位多个元素，即需选取一组满足要求的元素组，XPath使用上也是相当方便的，示例如下：

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

UI自动化测试——页面元素定位

上图可见多个链接都符合XPath表示法； XPath5 定位了第2个符合该条件的元素，即 hao123 链接

层级定位

其实层级定位该放在XPath首要说明的，即在属性描述前，但为了突出XPath可同化甚至优化取代Id、CSS等的观点，权衡下将其先说了，所以上面部分XPath表示方式可能初学者看会有点云里雾里，没事，看完这节再看上节应该还是很好理解的。

UI自动化测试——页面元素定位

txt中为图示上的a标签元素，若对HTML代码较熟悉，则可了解到上图中该XPath是如何一层层定位下来的，其中如div[2]中[2]表示该层级结构下的第2个div。

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

XPath6： /html/body/div[1]/div[2]/div[1]/div[2]/div[1]/a
XPath7： //div[2]/div[1]/a
XPath8： //tr[1]/td[3]

如上方示例，XPath7 的元素包括 XPath6的元素（若存在），但不一定仅仅表示XPath6（可能还有符合的元素）；

XPath8 为表格元素，若该页面仅存在一个 table，就表示该表格第1行第3列（多个表格的话，你猜？）

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

XPath 选取策略

最理想的情况莫过于Id，Id唯一且开发一般不会做改动（上述例子XPath1）；
其次是某Id层级下的元素（较简单的层级）；
再次为，可确保该页面下属性值唯一且一般不做改动的，如 value=”百度一下”

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

用相对路径，不用绝对路径！

XPath 相关插件

Selenium IDE (FireFox 插件)

UI自动化测试——页面元素定位

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

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

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

Chrome 插件 XPather

UI自动化测试——页面元素定位

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

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

Chrome 插件 XPath Finder

UI自动化测试——页面元素定位

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

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

总结：实际上熟悉XPath后，基本上可以根据HTML源码结构手写XPath了，使用Chrome插件的方式更为推荐。

优化UI自动化测试框架

仅使用一种XPath定位元素的方式对于统一代码、简化测试脚本也有一定帮助，如下为笔者写的自动化测试框架代码中的一段（Selenium+Python），将元素定为一对象，初始化使用XPath定位，并定义了各种元素操作方法，如Click、Clear、Input等等。引用模块后测试脚本很简单，可读性也很高，如： element("//button[@id="test"]").click() 即为点击id为’test’的按钮。

UI自动化测试——页面元素定位