Cut.JS version 0.0.1 Release (基于 jasmine 和 jQuery 的 CSS 单元测试脚本)

转自：http://www.chencheng.org/blog/archives/cut-first-release.html

Cut.JS version 0.0.1 Release (基于 jasmine 和 jQuery 的 CSS 单元测试脚本)

Cut.JS version 0.0.1 Release (基于 jasmine 和 jQuery 的 CSS 单元测试脚本)

作者：chencheng发布时间：March 14, 2011分类：默认分类

下载&源码：
Cut @ Github

DEMO：
Cut Example

背景：

这两周一直在纠结前端测试的自动化，这个脚本算是对此做的另一个努力。上周想到这个点子之后，在 google 上搜了下 “CSS Unit Test”，唯一可能对上号的是 Selenium，我没做深入研究。

此外，之前还和几位同学交流了想法，都觉得 CSS Unit Test 不可思议。确实，把页面引用相关的所有代码拼合起来分析 CSS 预发确实非常复杂，但其实可以换一种思路，按 CSS 放到页面后，自动化测试他们表现，就会容易很多。

因为依个人经验来看，CSS Bug 通常表现为布局异常、属性异常、文本溢出等。比如布局异常和文本溢出，可以通过 JS 来检测元素的宽高和位置来实现自动化；而属性异常，则直接检测样式属性是否匹配即可。

介绍：

顾名思义，Cut 是 CSS Unit Test 的缩写。说更详细点，他是基于 jasmine 和 jQuery 做的一些 CSS 测试层面的封装，比如布局、样式属性等。

jasmine 扩展：

• toBeHorizontalEqual() —— 水平相等 (top 和 height 均相等)
• toBeHorizontalTopAlign() —— 水平居顶对齐
• toBeHorizontalBottomAlign() —— 水平居底对齐
• toBeVerticalEqual() —— 垂直相等
• toBeVerticalLeftAlign() —— 垂直居左对齐
• toBeVerticalRightAlign() —— 垂直居右对齐
• isCSSProp(prop, compare, val) —— 样式属性检测，如 isCSSProp('height', '<', '100')

例子：

1. 比如我们要检测淘宝首页的左中右三栏是否错位，可以这样写：(语法和 jasmine 的一致)
   

   expect(['#left', '#middle', '#right']).toBeHorizontalEqual()

2. 比如我们要检测淘宝首页的顶部通栏是否因为没有设置容器的 overflow:hidden 导致填入大图会溢出，可以这样写：
   

   expect('#top-banner').isCSSProp('overflow', '===', 'hidden');
   expect('#top-banner').isCSSProp('height', '===', '40');

注意：

目前还是很粗的版本，发出来是希望能得到大家的建议，一起完善。另外很好奇目前其他公司是怎么做这块的自动化测试的。

PS：目前已知 CSS 测试自动化还有另一种方法是：截图, 抹黑, 对比。了解不深，对此不作评价。

标签: test