多浏览器对比测试工具介绍

　　引言

　　各浏览器内核不一样，支持的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运行时间，它还可以返回各浏览器中运行的截图供您一次性查看，同时运用基于分块的直方图相似度对比各浏览器的截图图像，以给您查看图像时提供参考。

　　多浏览器测试对比工具的功能图如下：

　　使用多浏览器工具，用户只需将可执行的自动化case及配置文件传入ftp即可，由工具会自动地检查ftp目录是否有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%。

原文转自：http://www.ltesting.net