Link http://www.ltesting.net/ceshi/ceshijishu/gncs/jrxcs/2012/1031/205662.html

　　引言

　　各浏览器内核不一样，支持的 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%。#p# 分页标题 #e#

　　4. 关于运用

　　此工具刚开发完成，目前是在测试时使用了一些 web 自动化 case 在运行。此后准备先在创意专家项目组来实验并完善此工具。

　　由于工具的使用比较简单，用户只需将可执行的自动化 case 及配置文件传入 ftp 即可，由工具自动地完成 case 的分发、执行、截图与结果收集。若运行得比较顺畅，用户可在持续集成中采用此工具做兼容性检查的 daily run。不过，此工具对用户自动化用例的要求会高一些，用例能成功运行的浏览器类型，还取决于用户自身的 web case 所使用的执行引擎。
文章分类:兼容性测试

Link http://www.ltesting.net/ceshi/ceshijishu/gncs/jrxcs/2012/1031/205662.html