如何进行前端自动化测试?
关注者
2,150被浏览
387,671登录后你可以
不限量看优质回答私信答主深度交流精彩内容一键收藏
泻药
还有 Selenium 神马的吧
当然 berserkJS 兴许也能凑合干干这事儿(类似phantomjs )
个人认为一般前端自动化测试大致包括
- 类库单元测试自动化
- 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 结果是否正常。