Question

如何进行前端自动化测试

Answer 1

类库单元测试自动化

UI组件测试自动化

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

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

这种方式弊端：

人工开启一次所有浏览器

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

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

另一种方式：

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

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

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

UI组件测试自动化
这是个大坑
因为 UI 涉及可视化内容
需要实现不同 testcase 的自动化界面操作
常见的如，单双击、拖拽、自动表单内容填写等
一般用 Selenium 来录操作后执行
或者使用 phantomjs 等工具写模拟操作脚本来实现
这类东西一般就不太指望能跨全平台了，一个浏览器能跑通就不错了。