前端精准测试调用链路分析

      精准测试在评估需求的测试范围时,需要评估一下代码的影响范围,这个范围有两部分:一是需求直接修改的代码;二是修改代码影响到的功能模块。代码影响到的功能一般是通过调用链路分析来实现的,java和kotlin代码可以由java-callgrap来分析出来调用链路,iOS 的OC和Swift可以使用clang来编译生成,前端貌似没有直接可用的工具。

一,技术调研

通过在网上进行不断的搜索和尝试,最终找到如下两个工具:

1,开源工具:dependency-cruiser

1.1 项目地址:GitHub - sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.

1.2 使用方法

(1)安装与初始化

在要生成调用关系的项目中,安装dependency-cruiser:

npm install --save-dev dependency-cruiser # or yarn add -D dependency-cruiser pnpm add -D dependency-cruiser

再初始化一下项目目录:

npx depcruise --init

(2)生成调用关系数据

  • 生成全项目文件间的调用关系图
src/API/api.ts → src/API/controller/commonCntroller/commonController.ts src/API/api.ts → src/API/controller/configurationController/Configuration.ts src/API/api.ts → src/API/controller/covController/covController.ts src/API/api.ts → src/API/controller/recommendController/recommendController.ts src/API/api.ts → src/API/controller/report/report.ts src/router/routes/caseRecommend.ts → 
src/views/CaseRecommend/CaseRecommend.vue 
src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommendList/CaseRecommendList.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/mobileCaseRecommend/mobileCaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/Layout/Layout.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/SelectSearchModel/SelectSearchModel.vue src/views/CaseRecommend/CaseRecommend.vue → node_modules/vue-property-decorator/lib/vue-property-decorator.umd.js src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue → src/API/api.ts ......
  • 生成全项目页面间的调用关系文本文件
npx depcruise src --focus "^src" --output-type text >all_pageanlys.text

生成的内容为项目中各个文件间的调用关系,如下所示:

src/API/api.ts → src/API/controller/commonCntroller/commonController.ts src/API/api.ts → src/API/controller/configurationController/Configuration.ts src/API/api.ts → src/API/controller/covController/covController.ts src/API/api.ts → src/API/controller/recommendController/recommendController.ts src/API/api.ts → src/API/controller/report/report.ts src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommendList/CaseRecommendList.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/mobileCaseRecommend/mobileCaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/Layout/Layout.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/SelectSearchModel/SelectSearchModel.vue src/views/CaseRecommend/CaseRecommend.vue → node_modules/vue-property-decorator/lib/vue-property-decorator.umd.js src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue → src/API/api.ts ......
  • 生成指定目录的调用关系
npx depcruise src --focus "^src/views" --output-type text >all_pageanlys.text

2,开源项目:ts-dependency-graph

2.1 开源地址

 URL:GitHub - PSeitz/ts-dependency-graph: prints a dependency graph in dot format for your typescript/react project

安装工具:

npm i ts_dependency_graph -g

2.2 生成调用关系数据

ts_dependency_graph --start apps > all_pagetanlys.txt

生成的数据如下所示:

在文件中有调用关系信息:

apps/quick-process-plus-e2e/src/e2e/app.cy.ts" -> "apps/quick-process-plus-e2e/src/support/app.po.ts" [color = "#F74B5F"] 
"apps/quick-process-plus-e2e/src/support/e2e.ts" -> "apps/quick-process-plus-e2e/src/support/commands.ts" [color = "#8D9B0D"] 
"apps/quick-process-plus/src/components/pc/select/index.ts" -> "apps/quick-process-plus/src/components/pc/select/common-select.tsx" [color = "#8B13D9"] "apps/quick-process-plus/src/components/pc/select/index.ts" -> "apps/quick-process-plus/src/components/pc/select/people-select.tsx" [color = "#8B13D9"] "apps/quick-process-plus/src/components/pc/select/index.ts" -> "apps/quick-process-plus/src/components/pc/select/dept-select.tsx" [color = "#8B13D9"] "apps/quick-process-plus/src/components/pc/select/people-select.tsx" -> "apps/quick-process-plus/src/components/pc/select/common-select.tsx" [color = "#A5F9DE"] "apps/quick-process-plus/src/components/pc/select/dept-select.tsx" -> "apps/quick-process-plus/src/components/pc/select/common-select.tsx" [color = "#44A823"] "apps/quick-process-plus/src/models/apiManage.ts" -> "apps/quick-process-plus/src/types/apiManage.ts" [color = "#6305F5"] "apps/quick-process-plus/src/models/app.ts" -> "apps/quick-process-plus/src/models/index.ts" [color = "#42F55F"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/user.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/tenant.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/auth.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/metadata.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/app.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/form.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/view.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/flow.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/corporation.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/page.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formRender.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formDesign.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formComponent.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/process.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/target.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/global.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formula.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/apiManage.ts" [color = "#D4502A"] "apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/processManagement.ts" [color = "#D4502A"]

需要使用python文件进行过滤,去掉后面的color信息,最终得到:

"apps/quick-process-plus/src/models/app.ts" -> "apps/quick-process-plus/src/models/index.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/user.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/tenant.ts""apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/auth.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/metadata.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/app.ts""apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/form.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/view.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/flow.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/corporation.ts""apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/page.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formRender.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formDesign.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/formComponent.ts" 
"apps/quick-process-plus/src/models/index.ts" -> "apps/quick-process-plus/src/models/process.ts"

再利用ccg生成调用关系数据。

二,调用关系技术方案

通过上面的两个基础工具,我们可以生成Vue和React项目文件间的调用关系,这个文件是脚本文件和页面问题,没有样式文件,在这些数据基础上,再对文件进行过滤和整理,就能生成符合要求的调用关系数据。

1,调用链路生成方案

整体方案如下:

  • 通过工具生成调用关系数据,过滤相应的文件,如果是页面文件间的调用关系,说明是组件和页面的关系,直接存储;
  • 如果是脚本文件,可以分析脚本文件被调用的页面文件,找出其调用的脚本文件中的函数以及调用行号,生成:脚本文件:函数-->页面文件:[开始行号,结束行号]的调用关系;
  • 如果是样式文件,分析样式文件的被调用页面文件,分析页面文件调用样式文件中的样式函数的行号,生成:样式文件:函数-->页面文件:[开始行号,结束行号]的调用关系;
  • 将上面三种调用关系数据入到CCG中生成调用关系数,并存储到文件中以便后续查询;
  • 根据diff文件,改动的行号等信息,查询CCG文件,生成调用关系数据,存储到数据表中。

主要功能实现介绍:

  • 生成调用关系数据在FEAgent上,下载相应的项目代码,安装工具生成调用关系数据;
  • CCG通过调用FEAgent上的接口,下载调用关系数据,解压数据并生成树型调用关系,保存到pickle文件中;
  • CCG提借查询调用关系的接口,供精准测试平台调用生成调用链路。

2,现存的问题

由于时间原因,上面的调用关系方案,只很简单地实现了文件间的调用关系,存储页面文件间的调用关系,脚本文件与页同文件间的调用关系,而且没有细化到函数级别;主要原因在于:

  • 没有细化脚本文件到页面文件间的,函数与行号的对应关系,这个没有工具直接实现,需要编码进行过滤;
  • 没有生成样式文件到页面文件间的调用关系,因为同级目录下的调用关系可以生成,跨目录的同名文件无法扫描出调用关系;
  • 没有过滤样式文件到页面文件间的函数调用与行号间的关系,功能暂时没有开发。
  • 过滤过细的调用关系,可以在后续推荐中做的更加精细,但也存在着文件过多的时候,性能较慢的问题。
  • 后面看领导的重视程度,再安排细化工作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端页面访问后台hiveserver2,阶段性报错

1、运行环境 Windows11下安装VMware,VMware下安装CentOS7 Linux系统,三台虚拟机集群部署hadoop,安装hive; 在Linux下安装Eclipse,创建maven工程,使用hive-jdbc-2.3.2访问hiveserver2 2、在windows11下&…

Python从0到100(四):Python中的运算符介绍

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

就业班 2401--3.12 Linux Day16 PXE布置——自动化装系统

什么是PXE? PXE,全名Pre-boot Execution Environment,预启动执行环境;通过网络接口启动计算机,不依赖本地存储设备(如硬盘)或本地已安装的操作系统;由Intel和Systemsoft公司于1999年…

云游戏发行是什么?云游戏发行的演进历程

云游戏发行是一系列基于云游戏技术的游戏发行策略或行为,融合云试玩、云微端、可玩广告、跨端移植等技术,从而在传统游戏发行生态的基础上实现更为卓越的发行效果。 云游戏发行出现的原因 近年来,游戏市场出现负增长。其原因一方面在于游戏版…

一套plm系统大约多少钱?彩虹PLM系统

一套PLM(产品生命周期管理)系统的价格因多个因素而异,包括企业规模、需求复杂性、系统功能、技术支持和厂商选择等。一般来说,面向小型和微型企业的PLM产品,其价位在5万元~15万元左右;面向中型企业的中端PL…

【Docker】容器的生态系统

Docker提供了一整套技术支持,包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container(容器)在host(集群、主机)上运行起来的那些技术。 1)容器规范:OCI(runt…

InnoDB和MyISAM存储引擎

InnoDB mysql默认存储引擎 支持事务,行级锁(并发量大),外键约束,容量大,支持缓存,支撑主键自增, 全文检索,不存储表的总行数,需要sql逐行统计 MyISAM 不…

沙发3d模型制作过程---模大狮模型网

制作沙发的3D模型通常需要经历以下步骤: 概念设计: 首先,根据设计师或客户的需求,进行概念设计。这包括通过手绘草图或数字绘图软件创建初始设计概念。 建模: 使用专业的3D建模软件(例如Blender、Maya、3ds Max)进行建…

ATFX汇市:美国2月CPI数据来袭,高通胀问题或进一步缓解

ATFX汇市:今日20:30,美国劳工部将公布2月未季调核心CPI年率数据,前值为3.9%,预期值3.7%,预期将下降0.2个百分点。历史数据看,美国核心CPI年率处于快速下降状态,去年3月份数据仍高达5.6%&#xf…

CSS 用 flex 布局绘制骰子

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.box {height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;display: flex;justify-content: center; // 水平居中/* alig…

基础小白快速入门web前端开发技术------->hbuilder的下载安装以及简易的网页最开始制作

工欲善其事&#xff0c;必先利其器&#xff0c; 在我们学习开发网页设计&#xff0c;我们首先需要一个良好的开发工具 这里我比较推荐hbuilder这个 只需要进入官网傻瓜下载&#xff0c;傻瓜安装 https://dcloud.io/ 点击hbuilder选择版本进行下载安装即可 hbuilder的新建文件…

01 THU大模型之基础入门

1. NLP Basics Distributed Word Representation词表示 Word representation: a process that transform the symbols to the machine understandable meanings 1.1 How to represent the meaning so that the machine can understand Compute word similarity 计算词相似度 …

高级语言讲义2018软专(仅高级语言部分)

1.编写程序输入任意一个正整数n&#xff0c;,输出由组成的最大正整数。例如输入3846,则输出8643. #include <stdio.h>void sort(int *arr,int m,int n) {for(int im; i<n-1; i)for(int jm; j<nm-i; j)if(arr[j]<arr[j1]) {int temparr[j];arr[j]arr[j1];arr[j1…

【计算机网络实践】FileZilla Server1.8.1实现局域网ftp文件传输

大二新生随便写写笔记&#xff0c;轻喷&#xff0c;鉴于本人在网络搜索中并未搜索到1.8.1版本的使用方法&#xff0c;因而瞎写一页。 一、准备 下载一个FileZilla Server1.8.1在你想作为服务器的主机上&#xff08;此处直接在官网下载即可&#xff1a;Download FileZilla Serve…

收下这份实操案例,还怕不会用Jmeter接口测试工具

一、简介 JMeter&#xff0c;一个100&#xff05;的纯Java桌面应用&#xff0c;由Apache组织的开放源代码项目&#xff0c;它是接口功能、自动化、性 能测试的工具。具有高可扩展性、支持HTTP、HTTPS、TCP、等多种协议&#xff0c;还可以自己编写Java脚本对 协议进行扩展。 官…

力扣● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划

● 1143.最长公共子序列 1.dp数组含义。 dp[i][j]&#xff1a;数组1[0,i-1]范围的子数组和数组2[0,j-1]的子数组的公共子序列最长长度。注意这里不需要一定以A[i-1]/B[j-1]结尾&#xff0c;原因在下面有说明。 动态规划求子序列的问题&#xff0c;一般都是dp的下标相对于数组…

智海Mo 平台与 Datawhale 携手浙江大学,共襄 AI+X 高校行!

2024年3月9日&#xff0c;一场以"AIX 高校行"为主题的活动在浙江大学成功举办。本次活动由 Datawhale 与杭州市人工智能学会主办&#xff0c;浙江大学人工智能研究所、浙江大学控制科学与工程学院联合主办&#xff0c;浙江大学学生人工智能协会承办&#xff0c;趋动云…

工业智能网关的网关模式和交换机模式有哪些区别

工业智能网关主要用以实现工业物联网络中不同设备和系统之间的通信&#xff0c;工业智能网关常见的两种工作模式是网关模式和交换机模式&#xff0c;在功能和应用场景上存在显著差异&#xff0c;本篇就为大家简单介绍一下两者之间的主要区别&#xff1a; 1、网关模式 工业智能…

利用百度竞价排名推广增加转化率-华媒舍

在数字营销领域&#xff0c;提高网站转化率是一个重要的目标。百度竞价排名是一种有效的推广方式&#xff0c;通过提高网站在搜索结果中的排名&#xff0c;能够吸引更多的用户点击&#xff0c;并且增加转化率。本文将介绍如何利用百度竞价排名来推广&#xff0c;并且提供一些最…

week06 day04 (数据库高级函数 procedure 、sql写函数)

一. ER模型 矩形&#xff1a; 代表实体椭圆&#xff1a;代表实体的属性菱形&#xff1a;relation 代表实体之间的关系 二. 存储过程&#xff08;procedure&#xff09; 1. 语法 语法: create procedure 存储过程名(参数,…) begin//代码 end// 注意&#xff1a; 因为在存储…