泰安住房和城乡建设厅网站,家具网站设计方案,hph网站模板,中国物流网官方网站摘要#xff1a;本文提出一种跨平台的UI自动化测试方案#xff0c;一方面使用像素级的截图对比技术#xff0c;解决传统UI自动化测试难以验证页面样式的问题#xff1b;另一方面用统一部署在服务器端的JavaScript测试代码代替Android和iOS测试代码#xff0c;大大提高编写…摘要本文提出一种跨平台的UI自动化测试方案一方面使用像素级的截图对比技术解决传统UI自动化测试难以验证页面样式的问题另一方面用统一部署在服务器端的JavaScript测试代码代替Android和iOS测试代码大大提高编写测试代码的效率。该方案经过实际验证具有效率高、质量好、便于维护等多方面优点文中将阐述具体设计思路以及各关键步骤的实现方法为同类测试提供借鉴。
一、 背景
当前金融服务数字化、信息化和智能化趋势日益明显在遵守法律法规、行业及公司制度、业务规则等多方面要求的前提下面对瞬息万变的客户需求金融行业的移动客户端越来越多采用敏捷开发的工程实践灵活选用技术框架、平台和语言持续迭代升级优化客户体验。
日益频繁的需求变更所带来的不单是系统开发模式的变迁。质量控制方面移动客户端需要适配的屏幕尺寸和机型多种多样测试不仅要验证页面元素内容的正确性还需验证各个元素的显示效果。而传统的页面自动化测试大多以断言的形式来验证页面元素的内容无法验证视觉上的显示效果在实际应用中往往起不到实际作用反而降低了测试效率。如何利用自动化方法更高效地完成庞杂的测试工作成为敏捷开发模式下亟待解决的关键问题。
本文提出对比截图的方式进行像素级别的UI测试不仅可以验证内容的正确性还可以验证视觉效果的一致。同时为了解决iOS和Android两个平台分别编写测试代码的重复工作问题通过一个自主研发的测试工具包把测试代码以JavaScript的形式部署在服务器端通过HTTP协议下发到iOS和Android两个平台的多个测试设备分别执行再把测试结果收集到服务器大大提高了工作效率。
二、 跨平台的移动端UI自动化测试探索
一 测试思想
传统的自动化测试思想大多起源于JUnit这种单元测试框架即使是页面级别的自动化测试如Selenium等也多是通过断言语句检查页面上特定元素的属性值和推测结果是否一致。这种思想的自动化测试需要测试人员为所有待验证元素的属性值编写断言语句不仅编写测试代码花时间费精力也需要后期投入大量的维护成本。
即使拥有完整的自动化测试用例项目中也不可能完全放弃人工测试自动化测试和人工测试之间的相互关系是制定项目测试方针时必须要考虑的顶层问题。一些适合人工去做的工作例如验证页面元素的位置、颜色、线条粗细等断言语句不容易验证的内容交给人工验证并无不妥也是不可省略的步骤。而一些重复性的工作例如修改了某个业务模块之后系统中其他页面的显示效果在所有需要适配的设备上是否受到影响没有修改过的其他业务流程是否会产生错误这种回归性质的测试则要尽可能减少人工的参与。
在上述测试思想的指导下工程师在UI自动化测试中使用一种“录制-截图-对比”的方法
首先按照正常流程编写测试用例、并且进行严格的人工测试这一阶段与传统的人工测试完全一致。
然后把经过测试过的页面使用自动化脚本在所有测试设备上截图把所有截图保存到服务器这一步称为录制。
执行对比时仍然使用自动化脚本对每一个页面截图然后把截图和上一步的录制截图进行像素级的对比保证每一个像素的一致否则算作测试失败。这一步相当于传统自动化测试的断言部分当前截图是执行结果录制的截图是预期结果。
通过上述步骤每一次修改后都进行一次自动化回归测试可以保证当前时间节点上系统内所有页面在所有设备上显示时每一个像素都和上一次截图时一致即使是1个像素的偏移也可以被轻松发现。
表1 传统自动化测试和跨平台移动端UI自动化测试的对比
二 验证流程
1、 服务端部署JavaScript测试代码
每个文件是一个测试用例一个测试用例中可以有多个确认点。可以部署在Apache、Nginx等HTTP服务器上只要提供一个测试设备可以访问的HTTP地址即可往往可以把测试代码、模拟测试数据部署在一个地方。
2、 测试设备下载代码
首先在客户端配置测试用例的执行地址执行测试用例时先把测试用例的JavaScript代码下载到客户端然后交给JavaScript引擎执行。
3、 使用JavaScript引擎执行代码
除了WebView各平台都有比较成熟的JavaScript执行引擎关于JavaScript引擎的选择可以参照后面的关键点说明。
4、 JavaScript调用NativeJava以及Objective-C端插件执行命令
关于JavaScript与Native端的交互方法可以参考后面的关键点说明。
5、 根据指令运行测试业务
真正执行业务逻辑的地方根据业务特点可能会有与外部系统的交互开发人员需要为外部系统准备好模拟数据。
6、 页面截图
调用客户端的页面截图方法保存为JPEG或者PNG形式。
7、 截图回传给服务器
实际上也可以把截图直接保存在客户端日后只要在客户端进行比较即可但是为了方便进行统一的比较和分析展示更推荐把截图回传给服务器进行处理。
8、 截图对比
服务器在像素级别对比当前截图和标准截图是否一致不一致则报错。标准截图是第一次经过人工测试之后录制的截图执行测试用例时可以指定是录制模式还是验证模式如果是录制模式只进行截图和保存。验证模式时把当前的截图和上一次录制的截图进行对比。
9、 将判断结果返回移动端完成测试
将判断结果返回移动端是为了在移动端显示统一的测试报告因为移动端除了UI部分的截图对比可能还会有文件、数据库等其他验证项目的断言语句。
三 关键点说明
无论是跨平台还是截图对比在具体的技术选型上都有各种各样的组合可以选择经过各种调查和尝试对主流的开发语言、框架和中间件进行评估我们摸索出一套完整的解决方案经过两年时间在实践中不断的改善和优化已经可以在生产环境中发挥重大作用节约人力成本的同时还能提高测试质量。现在把一些最佳实践点的关键内容总结如下
1、服务端部署JavaScript测试代码测试代码结构
测试代码是一段标准的HTML代码具体的测试指令以JavaScript的形式包含在
前面引用的native.js和testcase.js中包含了通用的工具代码负责与移动端框架进行交互交互方式后面会记述。后面的
2、 测试设备下载代码代码文件的解析
标准的HTML文件也是XML文件所以我们按照XML的规则来解析代码仅提取XML中script标签的内容即可如果遇到script标签中带有src属性需要另外再下载src指定的文件最后将所有JavaScript代码拼接成一整段代码交给执行引擎。当然可以直接下载JavaScript文件来执行但是考虑到传统的Web开发中JavaScript是被包含在HTML中的故采取同样的思路事实证明这种方式大大增强了扩展能力。
文章来源网络 版权归原作者所有
上文内容不用于商业目的如涉及知识产权问题请权利人联系小编我们将立即处理
