Open Genluo opened 3 years ago
对于一次性的项目,建议不用接入单测的,但只要是需要维护和反复迭代半年以上的项目,这绝对是一个去测试化,减少代码review,减少手动回归的好方式。可以极大效率的提升代码质量和稳定性。如果已经产生问题,尽快补充相关问题代码的测试用例,修复后防止下次发生。前端层面的代码测试分为四个阶段,每个阶段都有不同解决方案,但是对于业务项目而言的前端测试都很“尴尬”。如果是开发工具库,那可以通过单元测试来保证质量,如果是开发 UI 组件库,可以通过 Storybook 来进行视觉与快照测试。所以之前每每想到业务项目如何集成自动化测试都感觉无从下手,具体可以了解下前端测试四部分,我们可以在业务开发过程接入部分测试方法:
静态代码扫描主要在写代码的过程中发挥作用,由于 JavaScript 是动态语言,静态代码扫描功能无法像在 Java 等静态语言上一样发挥100%的作用,但是对于一些基础的语法问题,静态代码扫描还是能准确的识别出来。常用的静态类型检查有两种:
单元测试是指为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证,并最终得出特定的结果,对于前端开发过程来说,这里的特定目标就是指我们写的代码,而工具就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告,这样才能方便问题的排查和后期的修正,目前来看前端的的单元测试的意义主要在于下面几点:
除了这些单元测试带来的好处,为什么我们开发还需要花费时间去编写单元测试:
// TODO: 介绍如何编写一个前端的单元测试
前端UI需求变化快,很多时候单元测试还没有写好,需求就变了,所有的测试代码都不能继续使用。这还是好的,更恐怖的是需求变了代码变了测试没变,重新跑一边全是报错,还不如不写测试!不是特别稳定的业务不需要接入UI测试,在UI测试部分,包括了兼容性测试、性能测试、质量测试、界面样式测试
但是什么样的前端项目适合UI测试:
// TODO: 介绍如何做UI测试,内网中存在的技术框架
线上监控可以让我们方便的了解到业务产品的真实指标,如访问量、用户交互数据、页面错误、性能等关键信息。对于应用的体验优化和用户精细化运营至关重要。
线上监控是个比较复杂的体系,包括数据采集、处理计算、可视化等方面。这里篇幅和知识所限,只说端上的数据采集方面。
目前集团里面中有三种前端线上监控系统:
目前JSTracker平台已经覆盖了前端全链路监控, 包含WEEX,H5,三方小程序场景,并和搭建端(方舟、斑马)、DEF发布链路完成打通。支持自定义报警规则,报警消息多端同步等功能,覆盖权益资损、性能、报错、接口成功率等一系列场景,日志数据聚合、模式挖掘以及源码定位等分析功能。
jstracker 能够帮你记录用户浏览器中的各种报错,并记录当前用户的旺旺名、操作系统、浏览器、页面加载完成到错误出现的总耗时、屏幕滚动的 offset 甚至是报错文件的名称及行号。有了这么详细的信息,你就可以很方便的定位并找出问题了。
retcode http://retcode.alibaba-inc.com 主打用户端体验数据的监控,通过页面打开速度(测速)&页面稳定性(Js Error)&外部服务调用成功率(API)三叉戟组合来监测前端页面的健康度,发生异常的时候及时推送预警。同时平台不仅仅是技术质量监控,还提供轻量级对用户交互行为进行分钟级别实时统计功能,可辅助发现业务问题,并为业务决策提供数据支持。
// TODO: 集团中平台监控的对比
持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。
持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。
目前做的比较出名的持续集成平台是Travis ,并且只支持GITHUB,aone基本不支持前端的持续集成,感觉这是一个缺口,如果集团中项目开始接入相关测试,那么肯定需要一个平台来持续集成前端项目
// TODO: 持续集成的了解
前端测试调研
对于一次性的项目,建议不用接入单测的,但只要是需要维护和反复迭代半年以上的项目,这绝对是一个去测试化,减少代码review,减少手动回归的好方式。可以极大效率的提升代码质量和稳定性。如果已经产生问题,尽快补充相关问题代码的测试用例,修复后防止下次发生。前端层面的代码测试分为四个阶段,每个阶段都有不同解决方案,但是对于业务项目而言的前端测试都很“尴尬”。如果是开发工具库,那可以通过单元测试来保证质量,如果是开发 UI 组件库,可以通过 Storybook 来进行视觉与快照测试。所以之前每每想到业务项目如何集成自动化测试都感觉无从下手,具体可以了解下前端测试四部分,我们可以在业务开发过程接入部分测试方法:
静态代码扫描
静态代码扫描主要在写代码的过程中发挥作用,由于 JavaScript 是动态语言,静态代码扫描功能无法像在 Java 等静态语言上一样发挥100%的作用,但是对于一些基础的语法问题,静态代码扫描还是能准确的识别出来。常用的静态类型检查有两种:
功能测试/单元测试
单元测试是指为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证,并最终得出特定的结果,对于前端开发过程来说,这里的特定目标就是指我们写的代码,而工具就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告,这样才能方便问题的排查和后期的修正,目前来看前端的的单元测试的意义主要在于下面几点:
除了这些单元测试带来的好处,为什么我们开发还需要花费时间去编写单元测试:
// TODO: 介绍如何编写一个前端的单元测试
UI测试
前端UI需求变化快,很多时候单元测试还没有写好,需求就变了,所有的测试代码都不能继续使用。这还是好的,更恐怖的是需求变了代码变了测试没变,重新跑一边全是报错,还不如不写测试!不是特别稳定的业务不需要接入UI测试,在UI测试部分,包括了兼容性测试、性能测试、质量测试、界面样式测试
但是什么样的前端项目适合UI测试:
// TODO: 介绍如何做UI测试,内网中存在的技术框架
线上监控
线上监控可以让我们方便的了解到业务产品的真实指标,如访问量、用户交互数据、页面错误、性能等关键信息。对于应用的体验优化和用户精细化运营至关重要。
线上监控是个比较复杂的体系,包括数据采集、处理计算、可视化等方面。这里篇幅和知识所限,只说端上的数据采集方面。
目前集团里面中有三种前端线上监控系统:
目前JSTracker平台已经覆盖了前端全链路监控, 包含WEEX,H5,三方小程序场景,并和搭建端(方舟、斑马)、DEF发布链路完成打通。支持自定义报警规则,报警消息多端同步等功能,覆盖权益资损、性能、报错、接口成功率等一系列场景,日志数据聚合、模式挖掘以及源码定位等分析功能。
jstracker 能够帮你记录用户浏览器中的各种报错,并记录当前用户的旺旺名、操作系统、浏览器、页面加载完成到错误出现的总耗时、屏幕滚动的 offset 甚至是报错文件的名称及行号。有了这么详细的信息,你就可以很方便的定位并找出问题了。
retcode http://retcode.alibaba-inc.com 主打用户端体验数据的监控,通过页面打开速度(测速)&页面稳定性(Js Error)&外部服务调用成功率(API)三叉戟组合来监测前端页面的健康度,发生异常的时候及时推送预警。同时平台不仅仅是技术质量监控,还提供轻量级对用户交互行为进行分钟级别实时统计功能,可辅助发现业务问题,并为业务决策提供数据支持。
// TODO: 集团中平台监控的对比
前端自动化测试&持续集成
持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。
持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。
目前做的比较出名的持续集成平台是Travis ,并且只支持GITHUB,aone基本不支持前端的持续集成,感觉这是一个缺口,如果集团中项目开始接入相关测试,那么肯定需要一个平台来持续集成前端项目
// TODO: 持续集成的了解
参考