WEB-UI自动化实践

1.设计背景

随着IT行业的发展，产品愈渐复杂，web端业务及流程更加繁琐，目前UI测试仅是针对单一页面，操做量大。为了知足多页面功能及流程的需求及节省工时，设计了这款UI 自动化测试程序。旨在提供接口，集成到蜗牛自动化测试框架，方便用例的设计。

整个程序是基于 selenium 设计的。程序对 selenium 提供的接口进行了二次封装以知足平常的用例设计，二次封装后的接口解决了元素加载，元素定位解析等问题，可让用例设计变得更加简捷。

之因此采用 Selenium 的模式。缘由一，对于用户来讲这是一个开源框架，很想窥探一二; 缘由二，Selenium 可无缝接入。这是一个用于Web应用程序测试的工具，支持多平台、多浏览器、多语言去实现自动化测试，Selenium2将浏览器原生的API封装成WebDriver API，能够直接操做浏览器页面里的元素，甚至操做浏览器自己（截屏，窗口大小，启动，关闭之类的）,因此就像真正的用户在操做同样。

目前支持：Mac、Windows操做系统，chrome、Firefox、IE浏览器。

2.工做原理

• 在蜗牛管理后台添加测试用例。

• 蜗牛管理后台测试用例执行调用任务执行接口，传送任务id及测试数据的JSON格式字符串给程序。

• 程序根据获取数据，解析并处理。

• 启动浏览器后，selenium-webdriver会将目标浏览器绑定到特定的端口，启动后的浏览器则做为webdriver的server。

• 客户端(也就是测试脚本)，借助ComandExecutor发送HTTP请求给server端（通讯协议：The WebDriver Wire Protocol，在HTTP request的body中，会以WebDriver Wire协议规定的JSON格式的字符串来告诉Selenium，咱们但愿浏览器接下来作什么事情）。

• Server端须要依赖原生的浏览器组件，转化Web Service的命令为浏览器native的调用来完成操做。

• 最后将处理结果及任务id经过JSON字符串的格式返回给蜗牛，经过蜗牛的管理后台可查看每条用例执行结果。

3.框架介绍

3.1．工程结构

 

按照实际的业务流程调用对应接口来实现 WEB-UI 自动化测试用例。case 层可调用 service 层和 pageObject 层的接口，pageObject 是对每个页面元素的一个封装，service 是对一个经常使用的业务模块功能的封装。好比一个查询企业信息的测试用例，须要依赖登入，这个业务功能就能够直接调用 service 中的接口。企业查询的建立就能够调用 pageObject 中的接口，而后按照查询的业务流程，在测试用例中把这些接口串起来就造成了一个 UI 自动化测试用例，详细细节接下去会举例说明。

如企业查询。查询以前，须要登入管理后台，登入操做已封装到业务层，直接调用 service 层的接口，不须要在乎这个步骤的细节；登入以后要指定一个路径，找到对应的空间，直接调用 model 层的接口，不须要在乎这个步骤的细节；接着是建立查询，建立查询的全部定位方法也封装到业务层，这就是个企业查询的实现，也是用例设计中最主要的环节。

整个工程基于 selenium，采用 pageObject 模式搭建。下面对工程中的几个重要模块作介绍。

 

3.1.1 driver — 接口层

对 web 页面全部元素的操做都是在driver定义接口并实现的。driver 对 selenium 提供的接口作了二次封装，对外提供封装后的接口。pageObject 实现了一些公共方法，好比给输入框赋值等，目前 pageObject封装的方法很少，大多功能均可以经过 selenium 实现。driver 层对开源工具接口作了二次封装，想要驱动一个浏览器还有一个必不可少的工具 —— 浏览器驱动，这个驱动放在 Referenced Libraries 里，驱动的版本必须与被测浏览器版本相匹配。

3.1.2 model — 数据模型

建立数据模型为了实现测试数据和测试用例分离而采起的一种方法，具体的测试数据初始化。能够对一个业务流程中须要测试数据的元素在一个 model 中定义出来，方便管理和代码阅读。

3.1.3 pageObject — 业务层

pageObject 模式，采用接口形式封装每个页面须要用到的元素，实现封装只要作两步：一、肯定元素的定位方式；二、调用 driver 中对应的操做接口。driver 的接口实现包含了必定的容错能力，但并非全面的，部分页面或者组件具备独特性，单纯调用 driver 的接口并不能保证测试用例的稳定性，此时就须要在 pageObject 的接口实现中加入一些容错算法，确保用例稳定性。

3.1.4 service — 提供业务功能

一个业务流程不少时候依赖其余业务模块功能，为了方便设计一个测试用例，也为了不重复造轮子，service 层就提供了一些经常使用的业务功能，好比登入、企业查询等。依赖方只须要在 service 层调用便可。

3.2．功能优化

对selenium 作二次封装的同时也对接口作了优化，框架的初衷是使UI 用例的设计尽量的易设计、易读、易维护。

3.2.1 接口优化

直接调用 selenium 的接口常常会遇到些使人头疼的问题，好比网络问题使页面 loading 太慢，须要操做的元素还没展现出来，这种状况就会常常报元素找不到的 error，致使用例执行失败，但实际上这种报错并非一个 bug，其测试结果是无效的。为了减小误报率 driver 层接口设计了等待元素加载的功能，使用的关键方法：cf.searchForElementVisibleXpath(TestStartQuitwd.wd, "//*[text()='运营平台登陆']", id, 200, 100L)。参考代码：

 

在 click、input 等操做接口中加入循环查找的判断可最大限度的等待一个元素的加载从而提升测试用例的稳定性。

3.2.2 元素定位统一入口

接触过 UI 自动化用例设计的测试人员会比较清楚，想经过 selenium 操做一个元素，其中必不可少的就是对元素定位的描述，通俗的讲就是要通知接口在当前页面操做哪一个位置上的元素。定位一个元素的方法不少，经常使用的有 id，name，css，xpath 等，对应不一样的定位方法selenium 在处理上也给出了不一样接口，这从维护角度上来考虑显然不是最好的。最好的作法就是用例设计者只管元素定位和操做事件的调用，而事件在实现上走了哪一种渠道最好是无感知，无需维护的。对此框架封装了一个方法供 driver 调用，主要功能就是解析描述元素的字符串自动判断是 id、css 仍是 xpath。

3.3．元素定位

UI自动化用例其实能够分红两部分，1. 定位元素；2. 调用接口操做该元素。其中定位一个元素的方法不少，经常使用的有 id，name，css，xpath。实际设计中选择哪一种定位方法通常会在维护角度上考虑的会多一些，由于如今的服务器性能配置等都很优秀，因此跑一个WEB-UI用例能够不用考虑性能问题。从维护成本上考虑会优先选择 id、name，其次 css，最后用 xpath。

咱们不能保证每个 web 系统的全部元素都能提供一个惟一 id 或 name，固然若是能和前端开发达成合做，这就是一件很美好的事情了。通常状况下咱们都须要面对没有 id 和 name 这两个属性的状况。这时咱们就可使用 css 样式，不少时候 css 样式是能知足咱们的定位需求。固然在这些都不提供给咱们的状况下就只能选择 xpath，使用 xpath 的优势 1. 易获取，主流浏览器只要打开“查看”就能够经过 copy 轻松获取到；2. 页面上的元素均可以用 xpath 来描述；缺点，不稳定，大量使用会给用例维护产生很大的负担。

xpath 通常只要前端在页面上作一下小调整，用例就必须从新维护，在不得不使用 xpath 的状况下，为了减小从此的维护量，可对 xpath 作一些优化，能够减小 xpath 的路径长度提升稳定性。如下是实践过程当中最长用到的几种类型：

• 依靠本身的属性文本定位，如 //input[@value=‘XXXXX’]
• 包含指示性字符，如 //input[contains(text(),’指示性字符’)]
• 巧妙使用content，如 //*[@id=‘app-container']

4.常见报错

使用过程当中常常会遇到问题，这里作下总结方便 debug。

1.某些页面弹窗，有时候定位不到弹窗元素。理论上 selenium 在一个页面中查找一个元素是能够定位到，但有些时候出现弹窗，此时就须要在从新定位弹窗。解决方法：

 

2．有些输入框不能被 input 接口正常操做。实践过程当中在日历控件中遇到过，元素定位什么的都对，但就是不能正常被操做。解决方法：判断元素是不是select类型，以后再赋值。解决代码：

 

3.发现 selenium 的某些接口不能 work 了，此时最大的可能就是浏览器升级了。解决方法：从新下载低版本浏览器。

4.元素不可见。有一种元素能在页面上正常展现，但对于工具来讲它是不可见的，这是由于在通常状况下，元素可见须要知足如下几个条件：visibility!=hidden ; display!=none; opacity!=0; height、width都大于0;对于 input 标签，没有 hidden 属性。如截图就是只读的实例。

 

解决方法：调用接口 TestStartQuitwd.js.executeScript("var txtN = document.getElementsByName("timeRange"); txtN[0].readOnly = false;");

5.结束语

UI自动化是在开源工具的基础上作了些优化，在 driver 层，数据层、业务层以及用例层的解决方案还有很大的提高空间。WEB-UI自动化还不完美，后期还需继续努力。感谢一直以来支持研究的小伙伴。

-来源：宜信技术学院官网：http://college.creditease.cn/#/index

做者：颜博莲