在对Web应用进行End to End测试或者功能测试的过程中，经常需要定位页面上的元素，为此，每一个框架都提供了种类多样的API。
例如，使用webdriver类库【1】【2】，可以通过CSS，tag，id，xpath等多种方式定位页面元素。其中使用id的方式最为准确高效，但是实际的工作中并不是每个页面元素都有自己独一无二的id。主要原因有三。首先，前端开发人员由于经验欠缺或者疏忽，可能会忘记了给关键元素添加id。这种情况下，最好通过有效的沟通，请求开发人员添加id，并协调制定相应的coding规约。然而，即使规约得到了切实的贯彻执行，还是会出现无法用Id定位的情况。比如，一些元素的id是由框架随机生成的。再比如，列表中的item的id，通常是以“id_prefix_$index”的形式出现的。在这三种情况下，id定位并不可行。而如果用CSS，tag去定位元素，多数情况下都只能取到一个元素的集合，之后还要通过某种方式找到目的元素，效率低下，且容易出错。以Xpath定位的方式可以兼顾二者的优点，因此也就成为了实际项目中最常用的元素定位手段。本文根据实际经验，整理了xpath的一些常见用法，希望能给刚刚投入UI自动化测试的战友们提供一个小小的帮助。
从本质上说，xpath并不是包括webdriver在内的任何一个自动化测试框架或工具的一部分，它是一种独立的语言，即XML Path Language【3】。 它使用非XML的语法提供了一种弹性的方式来定位XML文档的不同部分，是XSLT标准【4】的主要成员。只能说webdriver及其他自动化测试框架或工具实现了接口，通过xpath定位页面元素。
首先，xpath【5】可以表示为绝对路径和相对路径：
绝对路径：/html/body/form/input。从根节点开始查找，body下，form下的input元素。这种方式一般写起来比较麻烦，可读性差，不易维护。所以并不常用。
相对路径：//form/a[1]，from节点下的第一个超链接元素。这种方式较为简洁，但是如果设计不得当，会影响定位速度。
其次，xpath支持集合查找并以index的方式定位元素。
//bookstore/book[1]：选取bookstore节点的第一个book子节点。
//bookstore/book[last()]：选取bookstore节点的最后一个book子节点。
再其次，xpath支持以filter的方式定位元素。
//input[@type=’button’]：[]表示filter，@表示属性类型。
//input[@type=’button’][@title=’submit’]：还可以设置filter的交集
//[@type=’button’]：表示任意元素。
//[contains(@class, ‘text_class’)]：使用函数，定位class属性包含‘text_class’字符串的元素。
//[text()=’logout’]：使用函数，定位text值为‘logout’的元素。
最后，是一些高级的用法，称为axes【6】。
//book/ancestor:: bookstore：在book节点的所有祖先节点中，选择bookstore节点。
//bookstore/child::book：在bookstore节点的所有child节点中，选择book节点。
//bookstore/descendant:: book：在bookstore节点的所有后辈节点中，选择book节点。
//bookstore/following::grocery：选择排在bookstore之后的grocery节点。
//bookstore/preceding::station：选择排在bookstore之前的station节点。
//bookstore/following-sibling::grocery：在所有bookstore的兄弟节点中，选择排在bookstore之后的grocery节点。
//bookstore/preceding-sibling::station：在所有bookstore的兄弟节点中，选择排在bookstore之前的station节点。
在使用xpath之前，可以在浏览器中验证xpath是否正确。例如，在chrome中可以使用developer tools->console：
$x(“//bookstore/preceding-sibling::station”)
【1】selenium-webdriver-api-commands-and-operations
【2】webdriver.io selectors
【3】XPath
【4】XSLT Introduction
【5】xpath
【6】axes
网友评论