前端精准测试实践 | 京东云技术团队

背景

随着前端技术发展,已经转变为数据绑定为主流的框架方式,与后端服务一样,前端代码实现也会涉及相互依赖,引用这些场景,那么应该如何准确的评估前端代码改动的影响范围?依赖开发评估?依靠经验评估?或者直接前端自动化全回归?手工测试全回归?显然以上的策略都不是最优策略,本文叙述了通过对前端代码进行静态分析,找到改动文件影响的功能范围,从实现了一种前端精准测试的思路。

如何进行精准分析

前端对外可直接感知的就是页面,最终目标是要确定影响哪个功能。整个前端精准测试划分为4步:

第一步,确定影响的页面。

第二步,确定影响的功能。

第三步,根据分析结果,找到对应的自动化用例集合,并触发运行

第四步,对比前端代码增量覆盖率,确认改动覆盖完成

前端页面与路由直接相关,从路由入手,建立路由与展示页面的关系,再依据入口文件的import关系,建立前端代码文件依赖树,再通过git diff对比找到改动的文件,从而反查到影响的前端页面。

精准分析实现

设计思路

解析路由文件,建立路由文件中每个菜单的依赖树,从而根据改动文件反查影响页面

实现逻辑

鉴于上述设计思路,结合目前技术支撑现状及快速实验的目标,开发了前端精准分析的第一版方案。

(路由文件分析暂时未找到规律,且实际场景中,路由文件变更不会频繁,维护成本不高,所以此步骤暂由人工维护)

关键逻辑:文件依赖树的分析及存储

应用

webhook自动触发分析

在代码平台上配置webhook触发分析接口,即可实现代码提交,自动触发分析

平台手动触发分析

规划

目前平台仅仅实现了前端精准测试4步中第一步的80%(路由与入口文件的关联还未实现自动分析),推荐仅仅到了页面级别,还未达到按钮级别,此处还需要再研究一下前端开发的相关技术,找到自动解析路由的方法。第二步计划尝试借助istanbul前端覆盖率工具,做一下增量覆盖率对比,保证手动回归可覆盖改动。

作者:京东云质量部

来源:京东云开发者社区

相关推荐
weixin_382395238 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__8 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.9 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~10 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华11 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子13 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅13 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni14 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学15 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端