前端测试思考

转自：http://www.chencheng.org/blog/archives/f2e-test-thinking.html

发到内部的一封邮件，一直没敢发到博客，这两天把流程跑通后才发出来。以下为邮件全文：
--
大家好：

不知大家有没有这样的经历?
1) 改了关键页面的代码，但心里没谱，担心发上去之后会出现bug。
2) 在发上去之后，因为有个点没考虑到，真出 bug 了。。
3) 或者某个浏览器的兼容性没考虑到。。

我看完这篇文章 (http://www.infoq.com/cn/news/2011/03/Ensuring-Product-Quality-Google) ，以及结合自身这段时间的一些想法和文河在新项目里的尝试，越发觉得前端也应该要能对自己的代码负责。

但是怎么负责? 怎么保障自己的代码不出 bug ? 以前一直没想到好办法，现在有点想明白了。不知有没有火星，大家给点意见哈。

bug 源于什么? HTML, CSS, JavaScript, 就这三块，不多不少。

如何避免 bug? 向测试学习，写测试用例，并通过工具让测试自动化。设想一下，有一个平台，选择“淘宝首页”，过2分钟能马上告诉你是否通过测试。

情况很理想哈！我们来看个具体的例子，比如全网的吊顶(页头)是如何写测试用例的。
1) [HTML] 元素节点是否输出完整, 比如 .site-nav, .login-info, .right-wrap 等元素是否存在
2) [HTML] 网址导航浮出层异步接口输出的内容是否符合预期
3) [CSS} 吊顶高度，颜色值等CSS属性是否符合预期，是否有被页面其他 CSS 覆盖掉
4) [JS] 登录信息是否正确输出，模拟 Cookie 值进行测试
5) [JS] 浮出层是否能浮出以及浮出后展现是否正常
6) [JS] 搜索功能是否正常
7) [JS] WebWW、TLabs 是否成功载入

用例好了，如何测试呢? 可能需要两种方法。
a) nodejs + jasmine：命令行跑
b) 浏览器环境里测试：页面后加特殊参数自动载入测试框架和测试用例

把测试方法和测试用例对应下：
a 对应：1, 2, 4, 6
b 对应：3, 5, 7

这样测试的方法就解决了，然后我们再建个平台，把两种测试方法结合起来，还可以做自动化等等。

路还很长，但走对了，就不会远。各位，我想对了吗?

PS：要写好复杂页面的前端测试用例，需要非常了解业务。文河在 twitter 上发过一句话我非常认同，“一切不按业务进行的模块化都是纸老虎”。
PS：之前发过 CSS 测试的 jasmine 扩展，见：http://www.chencheng.org/blog/archives/cut-first-release.html