UI自动化体系建设的创新实践

摘要： 阿里资深研发工程师开风为大家带来了《分层自动化之UI自动化体系建设》分享，他主要从UI自动化之痛和UI自动化体系建设之创新实践两部分，详细讲解了云效团队在UI自动化体系建设方面的宝贵经验。

在云效持续集成持续交付专场直播中，阿里资深研发工程师开风为大家带来了《分层自动化之UI自动化体系建设》分享，他主要从UI自动化之痛和UI自动化体系建设之创新实践两部分，详细讲解了云效团队在UI自动化体系建设方面的宝贵经验。

 

 

以下内容根据讲师PPT和视频整理而成。

 

UI自动化之痛

 

 

 

上图左侧的柱状图是从2010年12月到2014年12月中国网站数量增长情况，可以看出目前中国网站的数量呈现平稳递增的局面，网页的数量也呈现出大幅度上升。如此数量的网站和网页，以及迭代速度越来越快的互联网项目和越来越多的功能，手工地进行回归、前端UI方面的测试完全不能达到要求。

 

 

 

当前主流的UI自动化框架主要分为两种模式：一是编写脚本代码；二是通过录制生成脚本代码。上图对这种两模式从创建脚本、维护调试、排错成本、手工测试四个维度进行了对比：前者在编写脚本代码上耗时较长，而后者主要时长集中在维护调试这一步骤。由于互联网行业的业务变更、页面变更较快，且人员流动性较强，脚本的交接、保持脚本的稳定性等问题，也成为UI自动化过程中的痛点。

 

并且，目前浏览器的种类越发繁多，如IE、Chrome、火狐、safari等等，如何通过写一次脚本或录制一次脚本就实现多浏览器的测试呢？这一问题也深深困扰着UI自动化的开发人员。

 

云效团队的创新理念主要包括高效、简单、质量三点：

• 高效是让自动化成为一件高效的事情，哪里不高效，就在哪里创新；
• 简单是指降低自动化技术门槛，让大妈也能玩转自动化；
• 质量是指快速维护，能持续保证产品质量。

 

UI自动化体系建设——框架模式

 

除了上文提到两种主流模式（第一种是编写脚本代码（webdriver），通过封装形成自身的脚本自动化；第二种像QTP和selenium IDE之类的录制->生成脚本->维护脚本）。目前阿里结合自身的创新实践，提出了第三种模式：录制脚本->生成数据->最终生成可维护的可视化数据，实现录制、维护双可视化，而非维护代码。

 

那么UI自动化体系建设的必备要素有哪些呢？

 

 

 

首先要具有很好的录制技术；其次维护时需要降低成本，实现维护可视化；还需要在录制过程中需要设置一些检查点，对一些数据进行参数化；其他如脚本管理系统、控件定位算法、数据驱动、公共脚本、执行调度、执行驱动、执行监控、执行框架可插拔都是UI自动化体系建设的必备要素。

 

UI自动化体系建设——关键点

 

UI自动化体系建设的关键主要有四点，分别是：（1）录制准确性（前提）；（2）维护成本；（3）执行稳定性；（4）报告和错误排查，下面来一一详解。

 

录制准确性——抓取元素

 

在录制过程中，元素的抓取是最为关键的，元素抓取的完备性决定了后续定位控件的准确性。

 

如在录入框内输入“123456”，在录制过程中需要采集基本信息，一是元素对象本身，常见的是<input>输入框；其次是在该元素上的动作，这里是set；还包括所输入的数据“123456”。根据这些采集到的元素的基本数据，就可以生成element.set(data)这一测试代码。

 

那抓取元素一定需要抓取哪些信息呢？

 

首先是元素基本的ID、class、text、tagName等属性需要抓取；其次是xpath（相对）路径，它可以通过一些工具自动生成；此外，还需要抓取相似元素在页面的索引；最后需要注意匹配度，它用于排除误定位。下面来分享一下录制过程中踩过的坑。

 

Iframe中元素抓取和定位

 

传统行业的页面经常使用iframe嵌套，当需要录制多层嵌套中元素时，需要将嵌套的层级和元素自身的信息抓取下来，形成元素信息结构化数据。由于跨层之间的iframe之间无法直接通信，当面临这种情况时，采用何种方式才能保证元素抓取的准确性呢？在UI自动化执行阶段中，遇到iframe首先需要switch到这个iframe中，然后定位该元素后，再做一些执行动作。

 

那么面对多层嵌套的iframe，如何准确的抓取并且形成稳定的元素信息结构供后面的定位呢？

 

 

 

上图描述了一种iframe中简单元素抓取和定位的机制：首先，通过JS注入的方式往各个iframe中注入代码；之后再通过window、postMessage等通信协议进行消息的发送和同步；在后台中心对iframe和top window之间的消息转发，进行循环元素定位，最终抓取出元素，抓取的元素结构包含top window->iframe->iframe->iframe->元素，这种结构阻止了在后续元素定位时出现控件定位失败的情况。

 

录制准确性——抓取元素——精确选择

 

 

另一个需要注意的坑是精确选择。在录制过程中，多个Dom树节点可以表示一个元素，这就导致录制选择框选择dom节点不定。当通过录制选择框选择的元素可用来定位的信息太少时，可能导致执行时定位元素失败。如果采用精确选择或者精确定位机制，会有效地规避此类问题，例如在选择元素时，选择元素信息丰富的div节点，进而有效提高控件定位的准确性。精确选择实现起来比较简单，通常是将当前节点的所有父节点和子节点都抓取之后，结合整体Dom树结构，选择元素信息丰富的dom树节点来表示元素。

 

录制准确性——漏录

 

利用Selenium IDE录制框架录制淘宝上点击已买到宝贝这一动作时，首先需要将鼠标移动到“我的淘宝”元素上，才会触发下拉菜单，然后才能看到“已买到的宝贝”这一按钮，之后才会录制点击已买到的宝贝这一动作。面对这种情况，很多使用者都会漏录移动鼠标到“我的淘宝”这一步骤，进而使得在执行阶段丢失“已买到的宝贝”这一元素；此外，其他如漏录滚动条滚动动作，都会导致后续控件定位失败的现象。面对这些漏录动作的场景，应该如何处理呢？

 

自动生成方式可以解决这一问题，阿里内部自创了自动生成录制方式：在页面录制时，进行事件监控，当监控到鼠标移动、点击、滚动条滚动等动作时，在这些事件发生的前后分别做一个dom树快照，然后对比这两份快照，看新增了哪些元素。对于这些新增元素进行检查，如果元素上有特定标记时，说明该元素是有前置动作的，如果录制了相应的前置动作，则移除该标记；如果没有录制响应的前置动作，则会根据这一标识查找具体需要录制的哪些前置动作。

 

解决漏录问题能够有效提升了执行的成功率，降低了维护成本，使得录制完成后生成的脚本高可用。

 

录制准确性——数据和环境初始化

 

数据和环境的初始化也是录制准确性的前提。在执行录制动作的前后，发送Http请求或支持这种机制，或者进行数据库初始化以保证在录制过程中环境稳定、数据冗余正常，排除环境和数据对录制过程的干扰，进而提高脚本录制的质量。

 

维护成本

 

下面来谈一下维护成本。

 

 

 

降低维护成本主要从三个方面入手，分别是：

 

• 可视化维护，区别于常见的录制框架，可视化维护不需要维护代码，降低了技术门槛，只需维护操作界面，就可以实现UI自动化；
• 录制元素信息批量更新，例如在页面登录场景，很多脚本都需要录制登录这个动作，之后才能录制其他动作，如果一些常见的公共场景，如登陆密码框结构发生变化，可以利用录制元素的批量更新这一机制；
• 公共脚本是将如登录之类的场景提取出来做成一个公共脚本，使得录制过程中公共点可以使用公共脚本实现，实现业务脚本的可拼装，进而降低了生成、维护脚本的成本。

 

执行稳定性

 

执行稳定性的前提是元素定位，之后再对元素进行点击、下拉等操作。因此，公司需要有一套自己的空间定位算法，这套算法准确性是基于之前录制元素准确性的，录制信息越完备，算法定位越准确。这类算法一般是多种定位方式相结合，按照ID、Class、Text、TagName综合定位，直到定位到所需元素；对于相似元素，可以按照相对位置或者相对索引进行定位，以及利用Xpath进行最终定位保证，还可以利用相关的匹配度计算来排除误定位。

 

执行稳定性——脚本执行

 

在保障执行稳定性方面，首先需要有执行监控，它能够保障在执行过程中每个动作都能被良好地监控；其次要做到多执行框架可插拔，随时做好框架的可扩展性，并行保证执行稳定性；此外，需要保障一次录制，多浏览器执行。

执行完成后需要进行执行校验，来校验操作是否成功。常见的检查点包括文本检查、数值检查、元素属性检擦、页面URL检查、Cookie值检查、数据库表内容检查、弹出框检查。

 

报告和错误排查

 

执行完成之后，假设脚本执行失败之后如何帮助用户快速定位问题，这就需要完善的报告和错误排查机制了。

错误排查主要包括：

 

 

 

执行报告和执行日志，执行完成之后需要向用户提供一份完善的执行报告，让其了解执行的过程以及每次执行是否成功，如上图所示，详细罗列出各类信息。

 

 

 

步骤截图，它帮助用户进一步定位当时执行场景的信息。

 

 

 

错误分类，通过错误分类机制引导用户关注UI自动化框架的特点，更好地排查问题。

 

除了上述谈到的方式，在UI自动化体系建设中，还有一些其他措施，如脚本编译模块、报告中心、执行监控系统、执行代理、分布式执行调度系统、定时调度系统等。

 

UI自动化体系建设——扩展性

 

在扩展性方面，对于非常见的页面，需要支持自定义编码，对于特殊要求的用户，应该支持组件化开发；同时，整个自动化体系建设需要进行生命周期管理，具体可以分为脚本执行前后、动作执行前后，在执行生命周期中插入一些代码以满足执行脚本的可扩展性。

 

UI自动化体系建设——数据中心

 

最后来谈一下数据中心。无论是UI自动化还是接口自动化，都需要有很好的数据最支撑。在录制过程中，如登录账号，不可能实际地去注册，需要有完善地数据中心服务统一提供执行账号密码，以及订单号、会员ID等。

 

技术成就未来

 

目前，阿里云效团队将阿里内部的技术整合，推出了持续集成、持续交付一站式平台，通过项目管理流程和专项提效自动化工具，真正实现24小时持续集成持续交付：

 

阿里云——云效平台：  http://yunxiao.aliyun.com

原文链接：https://yq.aliyun.com/articles/142115