# 自动检测页面缺失依赖及自动测试页面是否报错
# 背景
因做首页优化时,去除了许多非首页的依赖文件,导致单独打开某些页面时会报错。原因是以前首页加载了其需要的依赖,而该组件自己并没有写上所有需要的依赖文件到deps
中,所以导致的报错。
于是通过两种方式来解决这类问题:
- 扫描所有文件需要的依赖,并补上
- 自动测试打开页面是否报错
# 扫描所有文件需要的依赖
那么怎么扫描组件需要的依赖呢?
# 思路
这里通过node.js
扫描页面、业务组件文件夹中的所有js文件,
通过正则:
/((B|SFX)(\.[a-zA-Z1-9]+)+)/g
匹配出B.xx.xx
以及SFX.xx.xx
的依赖名字,
排除掉无需新写的依赖(首页加载过、是注释了的等情况),(其中通过gulp打包压缩去掉了注释后再扫描)。
且该依赖文件实际存在,
通过这一系列排除,剩下的就是需要添加的。
# 问题
做完就来实验,通过node.js
自动将依赖写入到deps
文件中后,发现存在组件相互引用的,导致需要的依赖被提前加载。
该问题因时间有限,所以暂时没做处理,采用折中的办法:
只添加未写入依赖的公共组件,讲道理业务组件应该是有写的。
# 结果
通过扫描并添加缺失的公共组件依赖,解决了一部分页面报错。
源码见附件。
# 自动测试页面是否报错
因为还是存在页面报错,于是诞生了自动测试的想法。
# 思路
# 获取需要测试的页面路径
最开始是通过遍历导航栏的路由来获取所有页面,但是需要区分不同页面(控制器、交换机等)来获取路由。测试需要打开不同页面去测试。
后来发现在控制器中,搜索栏功能有记录所有能访问的页面,于是可以实现执行一次测试命令即跑完所有页面。
# 打开测试页面
最开始是照着项目中已有的打开页面逻辑,通过window.open
来打开新页面,但是这种方法存在不少缺陷:
- 浏览器自动获取焦点到新开tab上,测试期间无法处理别的事务。
- 同时测试多个页面效果不佳。因为浏览器对非活动的tab页面有限制,导致加载缓慢。
于是改用iframe
的方式。
通过js
在当前页面动态创建出iframe
,并将页面路径赋予它,即可解决上面所说的问题。
# 如何记录报错页面
通过翻看源码,知道了页面加载都是在
SF.framework.DeferPageWrap.prototype.delayLoadPage
SF.framework.DeferPageWrap.prototype.compositePage
这两函数处理。
通过重写,判断当前在执行测试时,就记录报错。
# 如何自动跑起来
初始化测试命令的时候,会记录所有需要跑的页面(对搜索栏的数据加了去重),以及跑了的页面的数量索引。
然后还是在上面两个函数中,加载完页面后,取出下一个页面,并移除上一个页面的iframe
。
在判断都跑完后,弹窗显示耗时以及错误页面的名字、链接,方便打开。
# 使用
# 步骤
思路讲完了,说说如何使用。
- 打开控制器首页
- f12打开控制台
- 输入
SF.invoke('testPages')
- 如果碰到意外停止的情况,可以通过控制台找到对应的iframe,改下它的src再改回来即可。
# 一些配置项
可以通过SF.invoke('testPages', options)
改变一些配置。
options为对象{}
配置项 | 类型 | 说明 |
---|---|---|
debugMode | boolean | 是否开始debug模式,开启则用debug模式打开页面 |
maxFrameNum | number | 同时打开多少个iframe窗口,默认2,不建议太多,实测2个与4个耗时一样,且越多会导致页面加载意外报错 |
storeKey | string | 存储报错数据的key,一般无需修改 |
# 对报错的修改方法
一般就是以下几种问题:
提示 “加载页面出错,请检查网络连接是否正常。”
这种是catjs返回的组件在执行时报错了,可以将返回的代码复制出来在控制台中执行,查看VMxxx的报错,就能看到是哪个文件报错了。补上依赖一般就好了。
提示 “页面初始化及布局出错!”
这种一般是页面报错了,通过在
SF.framework.DeferPageWrap.prototype.compositePage
函数中打断点,查看报错信息进行解决。提示 xtype ...报错
表格用的xtype的组件没写入到依赖,在报错调用栈中打断点,找出出错的xtype,然后通过
ext.reg('某个xtype')
(找不到时切换单双引号)找出该文件,写入依赖即可。
# 总结
通过以上两种方法,解决了首次打开页面报错的问题。
并且是自动化的,大大缩短了测试时间(两百多个页面,手工测一遍起码需要一小时,通过自动测试,几分钟就能跑完一遍,并给出报错页面名单)。