红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

前端精准测试探索:覆盖率实时统计工具

  • 2019-10-13
  • 本文字数:2788 字

    阅读完需:约 9 分钟

前端精准测试探索:覆盖率实时统计工具

背景

随着业务增长,随之而来的前端需求激增,如何在有限的时间内保证前端代码的质量。通过测试同学单方面的保障,还是免不了前端线上问题,存在回归不到位或者测试遗漏的地方,同时测试质量的高低没有客观数据可量化。


通过单测方法补充,可以提前发现一部分问题,减少问题解决的成本,但是由于业务形态的原因, 需求变更频繁,功能迭代快,补充和维护单测的成本比较高, 在业务方的大部分前端工程中暂时没有单测方法,因此开发在自测时, 感知比较薄弱,无量化数据, 在项目提测前也没有统一指标可以把关,测试对开发的自测状况也不了解。


同时前端缺少像 jacoco 这样的集成测试覆盖率统计框架,无法通过集成测试收集覆盖率,对于测试阶段的质量仍然没有数据量化。


结合上面说的几点,我们提出了前端集成测试覆盖率统计工具的需要,以此来提升开发自测质量以及项目提测质量,同时帮助补充回归不到位或测试遗漏的场景,提升上线质量。

一、技术选型

首先,覆盖率收集的前提,需要完成代码插桩工作,插桩方法来自于两个开源覆盖率统计框架,istanbul.js 以及 istanbul-middleware (以下称 im),提供了若干个插桩方法,而 im 其实也是在 istanbul.js 的基础上做了封装, 能力来自于 istanbul-lib-instrument


所有的插桩方法,大致分为两种类型:


  • 运行前插桩

  • 运行时插桩

1.1 运行前插桩

nyc instrument


针对编译之后的 JS 文件 , 进行手动插桩 , 形成插桩后的新 JS 文件。


babel-plugin-istanbul


istanbul 提供的 babel 插件 , 能够在代码编译打包阶段直接植入插桩代码。适用于使用 babel 的前端工程,基于 react 和 vue 的工程都可以。

1.2 运行时插桩

im.hookLoader:适用于服务端的文件挂载 比如 node 应用。


当应用启动时,会在 require 入口处添加 hook 方法,使得应用启动时加载到的都是插桩后的代码。


im.createClientHandler:适用于客户端的 JS 挂载,比如 react 和 vue 的 js。


通过指定 root 路径,会把所有该路径的 js 文件请求拦截,返回插桩后的代码,即浏览器请求静态资源的动作。效果与 babel-plugin-istanbul 类似,区别在于该方法是在浏览器请求 js 时才会返回插桩代码,是一个动态过程。


插桩方式功能优势劣势
nyc本地手动插桩源js文件, 生成插桩后文件编译后的js都可手动插桩, 不限工程框架手动插桩后的文件需要自己上传, 对原打包发布流程有影响; 不适用于服务端插桩
babel-plugin-istanbul在babel编译时 , 自动生成插桩代码改造成本低 , 自动插桩快捷限定于使用babel的工程
im.hookLoaderrequire入口处添加钩子方法,返回已插桩代码改造成本低 , 自动插桩快捷仅适用于服务端插桩
im.createClientHandler拦截浏览器请求静态资源文件的GET方法, 返回插桩后的JS自动插桩 , 无须改造原打包流程和脚本仅适用于客户端插桩; 该方法基于express, 限定于使用express的工程


最后我们所使用的插桩方法


App(node)—— istanbulMiddleware.hookLoader


Client(react & vue)—— babel-plugin-istanbul

二、模块设计

主要分为三个模块,先通过代码插桩获得可追踪的代码,然后实时上报用户行为产生的代码行覆盖记录,最后呈现覆盖率相关信息。


2.1 代码插桩

Client 端:使用 babel-plugin-istanbul 插件,在 babel 编译阶段即可完成。


Node 端:依赖 istanbuljs 提供的能力 - istanbul-lib-hook 、istanbul-lib-instrument


重写 istanbulMiddleware.hookLoader 方法,node 启动前挂载文件,会在 require 方法前增加钩子函数,增加代码插桩。


插桩结果举例




被插桩的 JS 会新增一个 coverage 方法,维护并指向覆盖率信息归属,并用来获取该文件的覆盖率信息。


同时该 JS 中的方法在执行过程的路径上会留下标记,被执行到之后实时更新覆盖率信息中相对应的行或者块信息。

2.2 数据上报

Node 端:应用发布时,写入对应的工程和分支信息,创建定时器,实时上传_global.coverage 变量,即覆盖率信息。


Client 端:客户端的上报比较特殊,客户端不像服务端,在发布后可以全局保持 coverage 变量以及定时器方法,client 端所有的数据生成和消耗都跟随页面的生命周期,所以不太可控,因此需要一个额外容器进行处理,我们选择了通过 chrome 插件来上报,通过全局管理覆盖率信息对象,以及通知下发来实现上报流程。该插件详细的工作流程如下:




覆盖率服务端


  • 继承 istanbul middleware 的功能

  • 支持分支维度接收和查询覆盖率

  • 代码变更时覆盖率替换, 支持存储和查看历史版本


主要基于 istanbul-middleware 做了二次开发,扩展了 istanbulMiddleware.createHandler 方法:



/:ns/:repo /:ns/:repo/show


两个覆盖率展示接口,新增了 ns、repo、branch 三个入参,用来区别不同的覆盖率


同时增加额外参数 history 传入该变量,标志获取的是历史覆盖率。


/client/:ns/:repo?branch={}&source={} body


携带覆盖率信息,根据应用和分支信息上报,接收到上报信息之后,会先获取该分支下的已有覆盖率,然后和此次上报的信息做合并。


合并是根据文件名字遍历合并的。如果发现某个文件新旧两份覆盖率结构不同,即发生了代码变更,则会丢弃旧的覆盖率,以新覆盖率为准,同时把旧的覆盖率存储到历史版本中。

2.3 页面展示

全量覆盖率展示:使用 istanbulmiddle 原生报告生成。


增量覆盖率展示:通过 gitlab 接口对比 master 差异,分文件展示各自的覆盖率,同全量覆盖率,只是细化了,整体页面用 vue + muse-ui 完成。



以 master 分支为基准, 增量文件覆盖率



全量文件覆盖率目录结构

三、工作流程


主要分为 3 部分:对应上一节说的接入 、上报 、展示。


通过 babel 插件完成客户端代码插桩,提供给 node 端使用的插桩插件,可以一步完成服务端的代码插桩以及定时上报功能。


配合提供的 chrome 插件,完成客户端的覆盖率上报任务。


覆盖率服务端负责信息的接收和存储,并返回给前端数据信息。


前端负责数据信息展示。

四、业务实践

接入测试环境发布平台,实现以应用和分支维度的多版本实时覆盖率收集和展示功能,无缝对接项目测试环境,项目中各应用发布后,自动开启覆盖率上报,在项目测试过程中实时记录,可实时查看。在项目提测前,给予开发量化指标,项目测试结束后可以给出最终覆盖率数据,帮助测试同学检查以及完善未覆盖的功能。


目前在电商教育和行业两条业务线中已有接入,由于该工具限制在 qa 环境使用,仅限收集在 qa 环境测试的项目数据。 在功能测试阶段,从使用数据上来看,增量行代码覆盖率达到 80%以上(目前的增量只到文件维度 ,未到行维度),未覆盖的行主要包括四种: 异常捕获、防御性编码、非本次新增无需关心的代码以冗余代码,属于可允许的范围。


本文转载自公众号有赞 coder(ID:youzan_coder)


原文链接


https://mp.weixin.qq.com/s?__biz=MzAxOTY5MDMxNA==&mid=2455760043&idx=1&sn=cc6884ff2b87637e8d22369e6a9974b7&chksm=8c686a8ebb1fe39891cc3abe94dfb7fb2ffb74c7d3d13df45f7e9114e5ba92bde37a088ad96f&scene=27#wechat_redirect


2019-10-13 08:004633

评论

发布
暂无评论
发现更多内容

架构实战营- 模块二作业

危险游戏

架构实战营

解析分布式应用框架Ray架构源,java技术面试常见问题

Java 程序员 后端

解密阿里亿级流量核心架构:5个技术+200案例 —阿里P8

Java 程序员 后端

若依集成 WebSocket,linux学习步骤

Java 程序员 后端

蓦然回首,十余年的程序员生涯最后就只剩下了这些!希望我犯过的错误你不要再犯

Java 程序员 后端

蚂蚁金服Java开发岗面试挂了以后,流泪总结了这份大厂常问面试题!

Java 程序员 后端

被 boss 直聘转发过多而“封杀”的 2021 年全套 高级面试题有多牛

Java 程序员 后端

膜拜!京东T9大牛沉淀三年终于整理出了这份架构核心修炼之道

Java 程序员 后端

获12w+星标的神仙文档再度上榜,简直是一套活生生自学Java的福星

Java 程序员 后端

被Netty搞昏了头,先学一下幂等性压压惊吧,java程序员面试宝典pdf

Java 程序员 后端

解放双手!IDEA常用代码一键补全,你学会了吗,最新阿里+头条+腾讯大厂Java笔试真题

Java 程序员 后端

腾讯技术大牛带你玩转Spring全家桶,赠三本Spring实战篇电子文档

Java 程序员 后端

蘑菇街Java大牛纯手打肛出的一份多线程文档,请别丢进收藏夹吃灰

Java 程序员 后端

蚂蚁金服+拼多多+抖音,java从入门到精通第四版视频

Java 程序员 后端

计算机系统可靠性分析评测技术【全讲解】,深入理解linux内核百度网盘

Java 程序员 后端

腾讯T4架构师:刷3遍以下面试题,你也能从小公司成功跳到大厂

Java 程序员 后端

蚂蚁金服面试经验分享,阿里的offer真的不难,初面蚂蚁金服

Java 程序员 后端

血赚!阿里P9整理出内部500多页最全双十一顶级秒杀方案笔记

Java 程序员 后端

被Netty搞昏了头,先学一下幂等性压压惊吧(1),只需一篇文章吃透Java多线程技术

Java 程序员 后端

自己搭建电商平台初期,原来“超卖,java书籍百度网盘

Java 程序员 后端

腾讯五面、快手三面已拿offer(Java岗位,linux基础教程第二版pdf

Java 程序员 后端

膜拜!华为内部都在强推的783页大数据处理系统:Hadoop源代码pdf

Java 程序员 后端

脑筋急转弯:如何用两个栈实现一个队列?用两个队列实现一个栈

Java 程序员 后端

腾讯T4:结合我多年工作经验给程序员的几点忠告,别再埋头苦干了

Java 程序员 后端

腾讯T8纯手写66个微服务架构设计模式,全部学会真的“变强

Java 程序员 后端

腾讯、美团等六家大厂收到offer,浅谈大数据面试经历,2021Java面经

Java 程序员 后端

计算机网络学习笔记第一章(概述) 超详细整理,springboot注解的工作原理

Java 程序员 后端

腾讯启动有史以来最大校招:苦逼程序猿,拿头发换了高质量生活

Java 程序员 后端

蘑菇街大牛熬夜整理的Java多线程知识点总结(思维导图+源码笔记

Java 程序员 后端

蚂蚁金服二面被血虐,spring-并发-JVM把我直接问懵,我经历了什么-

Java 程序员 后端

解开疑惑之:全面解析腾讯会议的视频前处理算法,java搭建分布式架构

Java 程序员 后端

前端精准测试探索:覆盖率实时统计工具_语言 & 开发_郑凌峰_InfoQ精选文章