Abstract: Kaifeng, a senior R&D engineer of Alibaba, brought you the sharing of "UI Automation System Construction of Hierarchical Automation". He mainly explained the pain of UI automation and the innovative practice of UI automation system construction in detail. Valuable experience in UI automation system construction.
In the special live broadcast of continuous integration and continuous delivery of cloud effects, Kaifeng, a senior R&D engineer of Alibaba, brought you the sharing of "UI Automation System Construction of Hierarchical Automation". He mainly focused on the pain of UI automation and the innovative practice of UI automation system construction. In this section, the valuable experience of the cloud effect team in the construction of UI automation system is explained in detail.
The following content is organized according to the lecturer's PPT and video.
The Pain of UI Automation
The bar chart on the left side of the above figure shows the growth of the number of websites in China from December 2010 to December 2014. It can be seen that the number of Chinese websites has shown a steady increase, and the number of web pages has also shown a substantial increase. With such a large number of websites and web pages, as well as Internet projects with ever-faster iterations and more and more functions, manual regression and front-end UI testing cannot meet the requirements.
The current mainstream UI automation framework is mainly divided into two modes: one is to write script code; the other is to generate script code by recording. The figure above compares these two modes from four dimensions: script creation, maintenance and debugging, troubleshooting costs, and manual testing: the former takes a long time to write script code, while the latter mainly focuses on maintenance and debugging. Due to the rapid business changes and page changes in the Internet industry, and the strong personnel mobility, the handover of scripts and maintaining the stability of scripts have also become pain points in the UI automation process.
Moreover, there are more and more types of browsers, such as IE, Chrome, Firefox, safari, etc. How to achieve multi-browser testing by writing a script or recording a script? This problem also deeply plagues UI automation developers.
The innovative concept of the cloud effect team mainly includes three points: efficiency, simplicity and quality:
-
Efficiency is to make automation an efficient thing, where innovation is made where it is not efficient;
-
Simplicity refers to lowering the threshold of automation technology, so that aunts can also play automation;
-
Quality refers to fast maintenance and continuous assurance of product quality.
UI automation system construction - framework mode
除了上文提到两种主流模式（第一种是编写脚本代码（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
本文为云栖社区原创内容，未经允许不得转载，如需转载请发送邮件至[email protected]