前端自动化测试

作者：貘吃馍香
链接：http://www.zhihu.com/question/29922082/answer/46128570
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

个人认为一般前端自动化测试大致包括

类库单元测试自动化
UI组件测试自动化

类库单元测试自动化
较好实现
基本思路是让不同的浏览器可以自动根据指令跑一些JS函数
结果与预期比对后返回是否通过case测试标志
其中一般有两种实现方式：

其一：

打开目标浏览器，运行测试框架站点
测试框架站点通过ajax 轮询、websocket 等方式，将待测 js 的 case 在浏览器内运行（通过eval 、createElement("script") 等方式）
比对测试结果，将结果 post 到远端
远端接受测试结果
远端等待所有浏览器返回结果完成
marge 所有浏览器数据显示最终通过与否结果。

这种方式弊端：

人工开启一次所有浏览器
需要排队测试，浏览器只能一次运行完一组测试后才能再运行下一组
如果中间某testcase导致浏览器异常，返回结果将缺失，需要人工去服务器上检查下浏览器状态

好处：

可以覆盖所有想覆盖到的浏览器

另一种方式：

将常用浏览器内核放进一个或多个相互有关联的进程内
用例通过系统消息发送到各个包装的内核中
每次开启一个新内核进程运行JS用例
用例结果发送给包装进程
包装进程汇集所有用例结果后post到远端保存
包装进程连带内核进程一起退出

优点：

无序人工开启一次浏览器
独立进程运行，无需排队
不怕内核异常，异常后包装进程可以直接恢复内核或者通知测试失败

缺点：

前端实现太困难，需要C++开发
无法覆盖到所有浏览器
常用内核覆盖更新劳心劳力

UI组件测试自动化

这是个大坑
因为 UI 涉及可视化内容
需要实现不同 testcase 的自动化界面操作
常见的如，单双击、拖拽、自动表单内容填写等

一般用 Selenium 来录操作后执行
或者使用 phantomjs 等工具写模拟操作脚本来实现

这类东西一般就不太指望能跨全平台了，一个浏览器能跑通就不错了。

======
针对这个稍微补充

比如 @张云龙 说的方法，也只能针对 phantom 之类 qtwebkit 核来作简单页面 diff 展示情况对比。
它不能解决实际复杂情况：

针对不同浏览（或不同网络情况）中断吐出内容不一致（想象wap，虽然过时了）
个人登录后吐出内容不一致（社交网络）
根据地域不同吐出内容不一致（百度搜索框计算什么的）
其他等等

大致问题了解下就好了

主要是 UI 的 testcase 写起来太烦
而且 UI 还是最善变的
一般公司不去做这种费力不讨好的自动化测试

基于 phantomjs 的自动化测试
它主要靠js脚本来模拟操作
一般流程是写代码写代码写代码

open 某个 url
监听 onload 事件
事件完成后调用 sendEvent 之类的 api 去点击某个 DOM 元素所在 point
触发交互
根据 UI 交互情况 延时 setTimeout （规避惰加载组件点不到的情况）继续 sendEvent 之类的交互
最后调用截图 api 发送操作结果到远端用于人工（或机器）审核 UI 结果是否正常。