多浏览器测试对比工具-阿里云开发者社区

开发者社区> 技术小美> 正文

多浏览器测试对比工具

简介:
+关注继续查看

 引言

各浏览器内核不一样,支持的css标准不一样,因此前端开发人员对各个浏览器的兼容性很头疼。不仅如此,前端的测试人员也身受其害。同样的功能,需要在不同的浏览器中重复地操作与观察。即使已将前端的case自动化,还需要搭建不同的浏览器环境,在各浏览器中一一发起执行。既然case已经自动化运行,能否再进一步, 若case能在各个浏览器下自动的运行,则能减少测试人员搭建多浏览器环境与串行多次运行case的代价。
现状  

目前已有工具可在浏览器兼容性的测试中给出一些辅助。笔者觉得可将它们按功能可归为三类:一类是可将同一url在多个浏览器中打开并返回截图的工具,比如Browsershots、SuperPreviewIE;一类是提供一系列备选浏览器,在不需要在机器上安装各浏览器的情况下,模拟指定的浏览器操作的工具,比如Browser Sandbox、IEtester;另一类是检测js错误工具,可在不需安装多浏览器的情况下检查js是否能运行成功,比如crosscheck。此类工具的缺点都在于不能将对同一页面的操作同步到多个浏览器中,只能减少各浏览器的安装成本,测试时仍需对每个浏览器逐一检查。另外,sandbox与 ietester是否反应页面在各浏览器下的真实结果还有待确认。
多浏览器测试对比工具
笔者设计的多浏览器测试对比工具,也并不能将测试人员从浏览器兼容性测试的工作中解放出来,但是,它可以减少您在windows下安装ie6\ie7\ie8\firefox3.6\chrome的工作,自动地在各个浏览器中完成case的执行,并行执行case来节约case运行时间,它还可以返回各浏览器中运行的截图供您一次性查看,同时运用基于分块的直方图相似度对比各浏览器的截图图像,以给您查看图像时提供参考。
多浏览器测试对比工具的功能图如下: 


1. 输入数据 

工具会检查某个目录下是否有文件夹,用户只需将含有自动化case及配置文件的文件夹上传到此目录下,工具检测到用户输入后,会根据配置文件中指定的浏览器类型,将case分发到浏览器对应的机器上,并发起case的执行。
配置文件格式如下 

2. 输出结果
此工具将收集各浏览器测试的结果,如下,每个以浏览器类型命名的文件夹下是各浏览器的截图及运行日志,在server的日志中,给出各浏览器截图的相似度对比结果。

3. 关于实现

 1) 多浏览器环境的建立
每个浏览器都在windows环境下真实地安装,从而得到真正各版本浏览器下运行的结果。各浏览器安装在一台或多台机器上,由由server端记录着各个浏览器类型所对应的机器及机器提供case上传、远程调用的端口号。各浏览器所在机器部署着多浏览器工具的client,提供了查询client空闲状态、运行case、返回运行结果等接口供server端调用。
(2)case的分发
Case的分发到哪台机器,意味着case会在这台机器上执行。目前的case分发采用着最为简单的方法。每次server只运行一个应用,即当有多个case文件夹同时上传到ftp后,会依次处理每一个上传。当server端检测到case输入时,根据配置文件中选择的浏览器类型,依次查询对应浏览器所在的机器列表中,有哪台机器是空闲的,若有空间的机器,则将case部署到此机器上。对获取空闲机器的操作加锁,以保证不会出现并发时对机器的获取有误。Server建立各浏览器运行case的线程,由配置文件中,case在各个浏览器下串并行配置来确定线程的运行顺序。
采用以上方法来分发case,虽然简单方便,但存在着资源利用不充足的问题。可能出现正在运行的case在等待符合条件的空闲机器,而现在空闲的机器虽然不满足此时case的浏览器要求,却可能满足下一个输入满足的浏览器类型。笔者目前还没有想到好的算法。若所有的case全为并行,则可将解析所有的待运行case,按case\浏览器类型组成数组,当有空闲机器时,就从数组中找出能满足条件的先运行。但因case可设置为串行,此方法便不可行了。若大家有满足串并行要求、又能充分利用机器资源的算法,欢迎交流。
(3)浏览器截图
截图的时间
当case发起执行时,同时发起另一线程开始截图。当case运行完成或遇到异常结束时,截图停止。配置文件中可设置截图的时间间隔,线程中按指定的时间间隔sleep截图。


截图的方法
由于此工具并不会干涉用户如何操作浏览器,因此对浏览器的截图并没有调用selenium或watinN的相关接口来截图,而是调用windows api来完成的截图。在截图时,先根据此时浏浏览器的类型来得到浏览器窗口的classname,由classname来定位浏览器的父窗口句柄,再枚举子窗口,得到浏览器渲染区的句柄。为了能将渲染区的图清晰地截取出来,在获取了父窗口的句柄后,将窗口最大化且置为HWND_TOPMOST。由winApi中的GetWindowRect根据渲染区的句柄得出渲染区的屏幕坐标区域,再对此区域进行屏幕截取。
由于chrome\firefox存在不同程度打开一个应用程序,出现多个classname相同的窗口的情况,因此在获取chrome与firefox句柄的细节方面,还加了title过滤等处理。
截图的对比
图像的对比的方法较多,领域也很深,笔者找到了一个基于图像直方图来对比相似度的方法,觉得能有一些参考价值。此方法将两个图像各切分为64个小方格,每个方格提取直方图,对比相似度后,取相似度的平均值做为总的图像相似度。
笔者将baidu上搜索hahaxixi的自动化case放入多浏览器工具中,选择在ie6\ie8\firefox3.6下运行,人眼看到的截图基本一致,得到的对比结果是,ie6.0与firefox3.6下截图的相似度为83.949%,ie6.0与ie8.0的截图相似度为82.233%。
4. 关于运用

 此工具刚开发完成,目前是在测试时使用了一些web自动化case在运行。此后准备先在创意专家项目组来实验并完善此工具。
由于工具的使用比较简单,用户只需将可执行的自动化case及配置文件传入ftp即可,由工具自动地完成case的分发、执行、截图与结果收集。若运行得比较顺畅,用户可在持续集成中采用此工具做兼容性检查的daily run。不过,此工具对用户自动化用例的要求会高一些,用例能成功运行的浏览器类型,还取决于用户自身的web case所使用的执行引擎。 

作者:pfeng

 









本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/744416,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Linux下apache服务器安装,sqlite安装,apache启动,关闭,重启,编写cig程序进行测试,浏览器访问cig程序
 1安装ubuntu 14.04 64位操作系统 2安装apache和sqllite以及依赖的sqllite开发库 3配置目录 /etc/apache2 4 html页面目录 var/www/ 5 cgi-bin目录 /usr/lib/cgi-bin 6日志文件:/var/log/apache2 7站点配
1856 0
Jash-跨浏览器的Javascript命令行调试工具
Jash是一个基于DHTML开发的命令行JavaScript调试工具,用于调试当前打开的页面。通过该调试工具,你可以快速的进行脚本调试,查看dom、当前页面对象,函数、变量,跟踪执行堆栈,执行任意脚本及为页面定义css等,可运行于IE6+ 、FF1.5+、Safari 3 +下。
659 0
java-工具-Webservice wsdl解析
原文链接:http://www.cnblogs.com/coshaho/p/5689738.html wsdl解析 首先必然是理解第三方webservice的接口描述,也就是解析wsdl文件。
1365 0
Spring Cloud Alibaba IDE 工具重大升级
最近,Spring Cloud Alibaba 官方再次对周边的工具进行了升级,和 Cloud Toolkit 深度集成,提供了工程创建、代码编写、一键部署和问题诊断等一系列开发者提效工具。
8294 0
Python自动化测试新书下载: 使用Selenium工具和Python自动化浏览器
Automatic Operation of Browser using Selenium and Python - 2018.pdf 书籍下载: https://itbooks.pipipan.com/fs/18113597-335285106 https://china-testing.github.io/ 后续将对重点内容进行翻译介绍。
8198 0
C#学习之简单浏览器
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using S
977 0
WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar)
原文:WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar)      本篇将开始介绍标签工具栏的开发内容,标签工具栏可以说是Ribbon 的核心部分,应用程序所有的功能特性都会集中在这里,一个强大的Ribbon 工具栏也是一款软件成功的关键。
979 0
阿里巴巴如何远程办公!这些工具都能帮你
为响应国家号召,大部分公司纷纷发出在家办公,延迟上班的通知,一时间“在线协同办公”成为热点。看阿里巴巴如何实现远程办公,这一篇带你一探究竟,在家也能安全高效地工作。
739 0
+关注
4435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载