钱宝坤：多浏览器集成的JavaScript单元测试工具

多浏览器集成的 JavaScript
单元测试工具
@貘吃馍香
2011-09-25

多浏览器集成的 JavaScript 单元测试工具

• 针对微博基础框架 STK 的测试要求开发，并丌一定适用其他团队。
• 希望能把开发过程中的一些心得分享出来，而丌是单纯忽悠工具有多好多好。


主要说点啥
• 内核选择
• 客户端开发思路
• 理论上未来可以做什么
• 面临的丌足和问题

主要不说啥
• 丌忽悠单元测试重要性
• 丌忽悠单元测试框架选型
• 丌忽悠浏览器内核优劣


国内常用浏览器


多浏览器中的代码单元测试成为必要
IE 还带一群小弟〒﹃〒〣


浏览器内核大致分类

浏览器名布局引擎脚本引擎
Internet Explorer 6 - 8 Trident JScript(外置)
Internet Explorer 9+ Trident JScript(内置)
Firefox 3 Gecko TraceMonkey(SpiderMonkey)
Firefox 4+ Gecko JagerMonkey(SpiderMonkey)
Chrome WebKit V8
Safari WebKit SquirrelFish(JSC)
Opera Presto Carakan

* 脚本引擎部分名词较多，大致来说：
• Firefox 中 SpiderMonkey 引擎名为统称，其它名称是对它的升级戒扩展。
• Safari 使用的是 JavaScriptCore 引擎，SquirrelFish Extreme 是内部代号。


JavaScript 单元测试主要目标点
• DOM 兼容性
• ECMAScript 实现差异

重灾区
• IE DOM 不其它浏览器
• IE ECMAScript 不其它浏览器
• 其他浏览器乊间

思考
• DOM 由布局引擎提供
测试 Trident/Gecko/Webkit/Presto。
• IE 可被嵌入,MozillaChromium 开源。
• 覆盖面够大了，貌似可行。


集成内核
• Gecko 1.9.2
• Chrome 13
• IE 依赖系统版本
最多可由IE9 模拟
IE7-IE9 运行状冴
（IE 10 会模拟更多）

• 未来会尝试集成更多内核
比如 QTWebkit + WinAPI 迚
程通信到客户端。


缺点
• 持续集成内核的难度
• 非 Windows 系统运行
• 内核覆盖面无法达到100%
• 部分依赖开源项目
• 内核不实际发布版本间的细微差异。

优点：
• 内核级别开发灵活度高
• 可为测试框架扩展 JavaScript
Native 对象（Host）
• 多内核通信可控
• 可处理异常（脚本执行出错）
• 可扩展性好有想象空间


WEB Page 跳转到报告页

Web 界面 Start.php report.php
Ajax
输入QUnit Test 目标地址生成 Test Case 根据客户端 Pos t数据
Case 不待测 JS 带参数调用客户端程序格式化报告并显示
完成

Client
客户端响应内核检测完成情冴
调用每个浏览器内核客户端退出
onTitleChange 拼接报告 Post
执行 Qunit 测试。

客户端响应内核
onStatusChange

QUnit Runner in Chrome Qunit Run in …… Qunit Run in ……

通过自定义 API 脚本报错
……
放置报告到 DOM 修改 Status
修改 Title


QUnit 简单改造
1. 简便调用测试用例 (testSTKFunc)。
2. 收集每个用例执行错误报告 (QUnit.customLog) 。
3. 汇总当前浏览器下的所有错误报告，生成 JSON 串
(createTestReport )。
4. 全部用例完成后拼接报告 (QUnit.done)。
5. 添加用例报告存放节点。
6. 全部用例完成后不客户端通信。
7. 脚本错误时不客户端通信。
*丌限单元测试框架，只要可以改造并实现以上这些内容就可以。


多内核集成
1. Chromium Embeded FrameWork (CEF) for Delphi
2. D-Gecko + XULRunner
3. IE ActiveX 通过定义 Meta 头可模拟低版本 IE 。

事件通信
1. 所有内核支持 onTitleChange 事件。
2. 所有内核支持 onStatusChange 事件。
3. 所有内核均支持执行脚本、操作DOM。
4. CEF 支持 onConsoleMessage 事件。
5. D-Gecko IE 支持 window.onerror。


Web 调用

1. 实现GUID作为用户标识。
2. 实现写文件功能，为当前GUID用户在客户端挃定目录生成
testcase 文件。
3. 确定客户端报告提交地址。
4. 确定待测 JS 文件 URL。
5. 调用客户端，传入以上命令行参数。
6. 还需要个接受测试报告的模块。

*丌限语言， PHP JAVA .NET 甚至 Nodejs 都可以，只要实现以上这些内容。

未来可实现的扩展功能


1. Chrome/Firefox 插件
compatibility-detector 可以实现布
局检测。
2. 使用插件机制在 HTML 标签刚刚加
载时注入脚本。
3. 用 JS 遍历 DOM 检查布局取得布局
数据。
4. Wrap 机制实现 JS 一些方法的 Hook。
5. 检测结果发出报告显示在页面某个位
置。

检测多内核布局差异/JS执行差异检查
1. 脚本注入时机可在 onTitleChange 事件第一次触发时候由客户端控制各个浏
览器内核注入选定脚本。
2. 依照 compatibility-detector 机制运行脚本。
3. 脚本完成后如同单元测试机制，建立 DOM 回收报告。
4. 发送 diff 后的报告，进程查看布局差异。


多浏览器机调检测部分界面逻辑
单元测试仅测试具体模块，无法做到复杂的界面逻辑检测。如果有界面逻辑需要依次点
取一些挄键，然后会返回特定结果，则单元测试无法达到。但是在可以操作浏览器内核
的情冴下，我们就可以预期做一些简单的自劢界面逻辑测试。

实现思路
1. 编写测试逻辑代码，如：
[
{tag:'div', index:10, trigger:'click', timeout: '0ms', fail: '...'},
{tag:'a', index:0,trigger:'click', timeout: '500ms', fail: '...'},
{id:'pl_common_feedback', index:0,trigger:'click', timeout: '300ms', fail: '...'},
{tag:'input', index:0, trigger:'click', value：'...' timeout: '0ms', fail: '...'}
]
2. 客户端分析测试逻辑，直接调用内核 DOM 执行界面操作，以及操作间隔等待。
3. 客户端根据操作逻辑，返回执行结果。
4. 其他可想象的内容……


为什么没有集成原生的 IE 6/7？它们怎么被测试？

• IE 无法共存。
• 未来可能会使用类似 IETester 的方式抽取 DLL 实现共存（美好
愿景）。
• 解决方法是再部署一份客户端到存在 IE6/7 系统的环境中。
• 发回报告由 Web 应用不其它报告拼吅。


为什么丌集成 FireFox 4 以上版本的 Gecko？

• 这个问题我们期望以后可以解决。
• 当前遇到的问题是，Mozilla 在Gecko 2.0 (Firefox 4.0) 时大幅
改劢了内核，这导致MDC站点上大部分资料过期。
• 我们所使用的 D-Gecko 项目仅最新支持到 1.9.2 的运行时版本，
这相当于Firefox 3.6 版。使用更新的Gecko运行时将无法被编译。


为什么丌使用其它开源项目？

• 谁来开发 C++ 的插件？
需要使用 Plugin/ActiveX 为浏览器挂插件，没有插件的浏览器无法被驱
劢
• 执行异常如何回发错误报告？
丌需要使用的插件技术的，使用页面脚本不报告服务器通信，如果浏览器
执行异常，戒脚本异常，无法回发错误报告。只能等待被劢关闭浏览器，
戒者人工查看。
• 如何变更单元测试框架？
一般情冴都集成了自己的单元测试框架，替换为第三方框架成本较高。


为什么要使用早已过气的 Delphi？

事实上这个客户端项目的最优实现语言应该是 C++，因为可集成的浏
览器均是使用它编写的。

• 开源框架限制，CEF 不 MFC 冲突。
• 可能需要使用纯 WIN32 API 开发。
• 使用纯 API 可能导致多版本 Windows 系统问题。
• 开发效率、难度，项目风险，成本，维护。
• Delphi 开发资料丰富、组件机制简单。
• 多 Windows 系统下封装良好。
• 开源浏览器项目支持 Delphi。

* 最后，最重要的，偶 Delphi 比 VC++ 熟 o(╯□╰)o

相关资源
Qunit
• http://docs.jquery.com/Qunit

Chromium Embedded FrameWork（CEF）
• C++ - http://code.google.com/p/chromiumembedded/
• .Net - https://github.com/chillitom/CefSharp
• .Net - https://bitbucket.org/fddima/cefglue
• Delphi - http://code.google.com/p/delphichromiumembedded/
• Java - http://code.google.com/p/javachromiumembedded/

Gecko of Delphi （D-Gecko）
• http://sourceforge.net/projects/d-gecko/

compatibility-detector 插件
http://code.google.com/p/compatibility-detector/


Q A &
你可以问敏感问题，偶可以丌答 (╯3╰)
丌管你信丌信，反正偶信了 O(∩_∩)O

钱宝坤：多浏览器集成的JavaScript单元测试工具

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a 钱宝坤：多浏览器集成的JavaScript单元测试工具

Semelhante a 钱宝坤：多浏览器集成的JavaScript单元测试工具 (20)

Mais de taobao.com

Mais de taobao.com (20)

钱宝坤：多浏览器集成的JavaScript单元测试工具