多浏览器测试对比工具

 引言

各浏览器内核不同，支持的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

【本文转自 百度测试技术空间】 http://hi.baidu.com/baiduqa/blog/item/454507494a3f6deb82025c34.html

【 关注百度技术沙龙】