操作轨迹可视化方法、装置、设备及存储介质与流程

本发明涉及软件测试领域，尤其涉及一种操作轨迹可视化方法、装置、设备及存储介质。

背景技术：

目前，随着用户需求的不断增加，现有前端应用通常都会涉及到多个系统间的交互，其中涉及到的信息获取过程更为复杂，在这样的情况下，前端测试难免会出现环境阻塞，造成测试人员需要发费大量的时间和精力去了解系统交互逻辑，以及逐级的排查是哪个步骤、系统出现的问题，进而耗费大量的测试时间，降低了测试效率。

技术实现要素：

本发明的主要目的在于提供一种操作轨迹可视化方法、装置、设备及存储介质，旨在解决现有前端测试不能够直观而难以进行问题定位的技术问题。

为实现上述目的，本发明提供一种操作轨迹可视化方法，所述操作轨迹可视化方法包括以下步骤：

在进行前端测试时，基于前端预置埋点，收集与所述埋点关联的前端用户操作信息，并生成对应的埋点记录；

检测所述埋点记录中是否存在前端测试时产生的系统报错；

若存在，则基于预设关键字，对所述埋点记录进行整合并存入数据库中；

从所述数据库中提取埋点记录并进行可视化处理，以展示前端用户操作轨迹。

可选地，所述若存在，则基于预设关键字，对所述埋点记录进行整合并存入数据库中包括：

若所述埋点记录中存在前端测试时产生的系统报错，则从所述埋点记录中获取与前端用户操作相关的页面参数信息和/或接口参数信息；

以所述页面参数信息和/或所述接口参数信息为查询参数，遍历预置系统报错详情数据库，输出与所述查询参数匹配的系统报错详情；

按照时间顺序将所述系统报错详情、所述埋点记录与所述预设关键字进行关联，形成所述预设关键字对应的埋点记录和系统报错详情并存入所述数据库中，其中，所述预设关键字用于区分前端不同用户操作。

可选地，所述从所述数据库中提取埋点记录并进行可视化处理，以展示前端用户操作轨迹包括：

从所述数据库中提取前端用户操作对应的埋点记录；

根据所述埋点记录中记录的前端测试所处页面信息，打开测试页面并在所述测试页面内生成div分区；

在所述div分区内，调用预置画图脚本标识出所述测试页面中前端用户操作的历史操作点以及历史操作轨迹；

对所述历史操作点与所述历史操作轨迹进行渲染，以展示前端用户操作轨迹。

可选地，所述在所述div分区内，调用预置画图脚本标识出所述测试页面中前端用户操作的历史操作点以及历史操作轨迹包括：

在所述div分区内，根据所述埋点记录中记录的前端用户操作对应的历史坐标，调用所述预置画图脚本，以热点图形形式标识出所述测试页面中前端用户操作的历史操作点，以线条图形形式标识出所述测试页面中由前端用户操作的历史操作点串联形成的历史操作轨迹。

可选地，在所述从所述数据库中提取前端用户操作对应的埋点记录的步骤之后，还包括：

根据所述埋点记录中记录的各接口调用信息，按照接口调用顺序展示前端用户操作的接口调用轨迹。

可选地，在所述若存在，则基于预设关键字，对所述埋点记录进行整合并存入数据库中的步骤之后，还包括：

基于所述埋点记录中记录的接口报错信息中的参数值，对接口报错信息进行分类，生成各接口报错信息对应的问题类别。

可选地，在所述若存在，则基于预设关键字，对所述埋点记录进行整合并存入数据库中的步骤之后，还包括：

当接收到查询请求时，获取查询关键字；

基于所述查询关键字，查找所述数据库中与所述查询关键字匹配的相关测试信息并输出；

其中，所述相关测试信息包括：前端测试用户的基本信息、前端操作事件信息、前端操作事件的接口调用信息、前端测试所处页面信息、前端测试所处流程信息、前端测试报错信息中的一种或多种。

进一步地，为实现上述目的，本发明还提供一种操作轨迹可视化装置，所述操作轨迹可视化装置包括：

收集模块，用于在进行前端测试时，基于前端预置埋点，收集与所述埋点关联的前端用户操作信息，并生成对应的埋点记录；

检测模块，用于检测所述埋点记录中是否存在前端测试时产生的系统报错；

整合模块，用于若所述埋点记录中存在前端测试时产生的系统报错，则基于预设关键字，对所述埋点记录进行整合并存入数据库中；

可视化模块，用于从所述数据库中提取埋点记录并进行可视化处理，以展示前端用户操作轨迹。

可选地，所述整合模块包括：

获取单元，用于若所述埋点记录中存在前端测试时产生的系统报错，则从所述埋点记录中获取与前端用户操作相关的页面参数信息和/或接口参数信息；

分析单元，用于以所述页面参数信息和/或所述接口参数信息为查询参数，遍历预置系统报错详情数据库，输出与所述查询参数匹配的系统报错详情；

整合单元，用于按照时间顺序将所述系统报错详情、所述埋点记录与所述预设关键字进行关联，形成所述预设关键字对应的埋点记录和系统报错详情并存入所述数据库中，其中，所述预设关键字用于区分前端不同用户操作。

可选地，所述可视化模块包括：

提取单元，用于从所述数据库中提取前端用户操作对应的埋点记录；

预处理单元，用于根据所述埋点记录中记录的前端测试所处页面信息，打开测试页面并在所述测试页面内生成div分区；

画图单元，用于在所述div分区内，调用预置画图脚本标识出所述测试页面中前端用户操作的历史操作点以及历史操作轨迹；

渲染单元，用于对所述历史操作点与所述历史操作轨迹进行渲染，以展示前端用户操作轨迹。

可选地，所述画图单元具体用于：

在所述div分区内，根据所述埋点记录中记录的前端用户操作对应的历史坐标，调用所述预置画图脚本，以热点图形形式标识出所述测试页面中前端用户操作的历史操作点，以线条图形形式标识出所述测试页面中由前端用户操作的历史操作点串联形成的历史操作轨迹。

可选地，所述可视化模块还用于：

根据所述埋点记录中记录的各接口调用信息，按照接口调用顺序展示前端用户操作的接口调用轨迹。

可选地，所述操作轨迹可视化装置还包括：

分类模块，用于基于所述埋点记录中记录的接口报错信息中的参数值，对接口报错信息进行分类，生成各接口报错信息对应的问题类别。

可选地，所述操作轨迹可视化装置还包括：

查询模块，用于当接收到查询请求时，获取查询关键字；基于所述查询关键字，查找所述数据库中与所述查询关键字匹配的相关测试信息并输出；

其中，所述相关测试信息包括：前端测试用户的基本信息、前端操作事件信息、前端操作事件的接口调用信息、前端测试所处页面信息、前端测试所处流程信息、前端测试报错信息中的一种或多种。

进一步地，为实现上述目的，本发明还提供一种操作轨迹可视化设备，所述操作轨迹可视化设备包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的操作轨迹可视化程序，所述操作轨迹可视化被所述处理器执行时实现如上述任一项所述的操作轨迹可视化方法的步骤。

进一步地，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有操作轨迹可视化程序，所述操作轨迹可视化被处理器执行时实现如上述任一项所述的操作轨迹可视化方法的步骤。

本发明预先在前端做好埋点，当进行前端测试时，通过埋点检测用户在前端页面上的触控操作，比如点击按钮操作、拖动页面操作等，进而通过埋点实时采集与该触控操作相关的信息，比如触控操作的位置坐标、触控操作所调用的接口以及接口参数等，前端再将基于埋点代码所采集的埋点数据回传给后端，以供后端将收集到的信息生成埋点记录，然后再将埋点记录中的信息进行可视化处理，从而展示前端用户的操作轨迹，以便于定位前端测试过程中存在的问题，提升前端测试效率与测试准确性。

附图说明

图1为本发明实施例方案涉及的操作轨迹可视化设备运行环境的结构示意图；

图2为本发明操作轨迹可视化方法第一实施例的流程示意图；

图3为图2中步骤s30一实施例的细化流程示意图；

图4为图2中步骤s40一实施例的细化流程示意图；

图5为本发明操作轨迹可视化方法中前端用户操作轨迹一实施例的展示示意图；

图6为本发明操作轨迹可视化方法第二实施例的流程示意图；

图7为本发明操作轨迹可视化装置一实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本发明提供一种操作轨迹可视化设备。

参照图1，图1为本发明实施例方案涉及的操作轨迹可视化设备运行环境的结构示意图。

如图1所示，该操作轨迹可视化设备包括：处理器1001，例如cpu，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(display)、输入单元比如键盘(keyboard)，网络接口1004可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。存储器1005可以是高速ram存储器，也可以是稳定的存储器(non-volatilememory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的操作轨迹可视化设备的硬件结构并不构成对操作轨迹可视化设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机可读存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及操作轨迹可视化程序。其中，操作系统是管理和控制操作轨迹可视化设备和软件资源的程序，支持操作轨迹可视化程序以及其它软件和/或程序的运行。

在图1所示的操作轨迹可视化设备的硬件结构中，网络接口1004主要用于接入网络；用户接口1003主要用于侦测确认指令和编辑指令等。而处理器1001可以用于调用存储器1005中存储的操作轨迹可视化程序，并执行以下操作轨迹可视化方法的各实施例的操作。

基于上述操作轨迹可视化设备硬件结构，提出本发明操作轨迹可视化方法的各个实施例。

参照图2，图2为本发明操作轨迹可视化方法第一实施例的流程示意图。本实施例中，所述操作轨迹可视化方法包括：

步骤s10，在进行前端测试时，基于前端预置埋点，收集与所述埋点关联的前端用户操作信息，并生成对应的埋点记录；

埋点主要用于进行数据采集,通常应用于前端应用程序中，在前端应用的关键点植入统计代码，以进行数据采集。例如，在购买按钮处埋点，从而统计用户的购买点击率；或者在前端应用中植入多段代码进行埋点，以收集前端页面中需要被回传的用户行为，比如：域名、ip、url、用户搜索的内容、常按的按钮名称等。

本实施例对于埋点方式不限。比如采用手动埋点、可视化埋点、自动埋点等方式。同时对于埋点代码的植入位置不限，比如在前端ui层进行埋点，在底层数据表或日志中进行埋点。基于埋点位置的不同，后端进而可以收集到更多与前端测试有关的信息，从而可以更为全面的了解测试过程，，以便准确定位测试过程中发生的问题。

本实施例中，在进行前端测试之前，预先在前端应用的相关位置植入埋点代码，进而在前端测试过程中，由前端的埋点代码自动调用相关接口上传埋点数据至后端，后端进而收集到有关前端用户操作的相关信息，进而可全面了解用户操作详情。因此，通过埋点优选采集用户在前端操作所对应的以下信息内容：前端操作位置坐标、最近操作事件、最近操作事件所调的接口详情(包括各种接口参数)、目前用户所处的页面(包括各种页面参数)、目前用户所处的测试流程等。

本实施例中，后端接收到前端上传的埋点数据(也即关于前端用户操作的相关信息)后，生成对应的埋点记录并保存。比如将埋点a上传的埋点数据保存为一条埋点记录，而将埋点b上传的埋点数据保存为另外一条埋点记录。

步骤s20，检测所述埋点记录中是否存在前端测试时产生的系统报错；

一般系统运行过程中若存在系统运行错误的话，都会生成相应系统报错，不同的系统报错通常使用不同的错误代码进行表示。比如，在windows系统中，错误代码systemerr1141：表示系统bios无法更改系统电源状态。

本实施例中，通过检测错误代码，进而可判断前端测试时是否有产生系统报错。

步骤s30，若存在，则基于预设关键字，对所述埋点记录进行整合并存入数据库中；

本实施例中，若前端存在测试时产生的系统报错，则需要对前端测试过程中的用户操作进行可视化处理，以展示前端用户操作轨迹。因此，本实施例需要对前端测试过程中收集的所有相关埋点记录进行整合，以便于进行数据可视化处理。

本实施例中，前端各埋点上传的埋点数据都是零散的用户动作或者是与用户操作相关的信息，因而并不能从整体上反映出用户的具体操作动作或者操作行为，因此，需要对采集的埋点数据(也即埋点记录)进行整合，也即将相关的埋点记录整合在一起，从而将用户操作动作或者操作行为串联起来。

本实施例中优选基于预设关键字，按照时间顺序将对应埋点记录整合在一起，从而形成该关键字对应的埋点记录。例如关键字为用户的账户名、账户id、手机号码等，整合后的埋点记录能够反映出该用户一系列连贯的前端操作动作、行为以及操作过程中产生的相关信息，比如报错信息等。

可选的，在本发明另一实施例中，进一步基于所述埋点记录中记录的接口报错信息中的参数值，对接口报错信息进行分类，生成各接口报错信息对应的问题类别。本可选实施例中，对接口报错进行分类，比如基于接口报错信息(比如参数值)的不同，将接口问题划分为网络层问题、代码逻辑问题、业务服务问题等，通过展示各接口的调用顺序，以对用户操作过程中遇到的接口报错问题进行快速定位。

步骤s40，从所述数据库中提取埋点记录并进行可视化处理，以展示前端用户操作轨迹。

本实施例中，为便于测试人员直观了解用户在前端页面上进行的各种操作及操作轨迹，从而了解用户在前端操作的各种信息，因此，当接收到前端用户操作的可视化处理请求时，从数据库中提取埋点记录并对埋点数据进行可视化处理，形成可视化视图，从而便于全面了解和跟踪用户在前端的各种操作以及操作过程中所出现的各种报错等内容。

本实施例预先在前端做好埋点，当进行前端测试时，通过埋点检测用户在前端页面上的触控操作，比如点击按钮操作、拖动页面操作等，进而通过埋点实时采集与该触控操作相关的信息，比如触控操作的位置坐标、触控操作所调用的接口以及接口参数等，前端再将基于埋点代码所采集的埋点数据回传给后端，以供后端将收集到的信息生成埋点记录，然后再将埋点记录中的信息进行可视化处理，从而展示前端用户的操作轨迹，以便于定位前端测试过程中存在的问题，提升前端测试效率与测试准确性。

参照图3，图3为图2中步骤s30一实施例的细化流程示意图。基于上述实施例，本实施例中，上述步骤s30进一步包括：

步骤s301，若所述埋点记录中存在前端测试时产生的系统报错，则从所述埋点记录中获取与前端用户操作相关的页面参数信息和/或接口参数信息；

步骤s302，以所述页面参数信息和/或所述接口参数信息为查询参数，遍历预置系统报错详情数据库，输出与所述查询参数匹配的系统报错详情；

步骤s303，按照时间顺序将所述系统报错详情、所述埋点记录与所述预设关键字进行关联，形成所述预设关键字对应的埋点记录和系统报错详情并存入所述数据库中，其中，所述预设关键字用于区分前端不同用户操作。

本实施例中，通过埋点方式采集到的相关参数信息并不能直观地反映出测试问题或者定位测试故障，比如测试页面或调用接口的各种参数信息，包括传入的参数、返回的参数，测试人员无法了解这些参数之间的关联或者这些参数所对应的故障类型、故障详情，因此，需要进一步对埋点采集到的参数信息进行综合分析，从而得出系统报错详情，比如系统报错的来源、报错原因等。

本实施例中，基于预设关键字，按照时间顺序将对应埋点记录、系统报错详情整合在一起，从而形成该关键字对应的埋点记录和系统报错详情。例如关键字为用户的账户名、账户id、手机号码等，整合后的埋点记录能够反映出该用户一系列连贯的前端操作动作、行为以及操作过程中产生的系统报错详情。

例如，测试人员预先设置测试过程中可能发生的系统报错的详情数据库，该数据库中存储有多种类型的系统报错详情信息，比如系统报错的来源、系统报错的原因与解决方案等，其中，系统报错原因中列出相关联的页面参数信息和/或接口参数信息，通过参数匹配方式即可确定系统报错的详情信息，系统报错详情能够帮助测试人员快速定位故障以及分析故障原因，提升前端测试效率，避免了人为分析的耗时。

参照图4，图4为图2中步骤s40一实施例的细化流程示意图。基于上述实施例，本实施例中，上述步骤s40进一步包括：

步骤s401，从所述数据库中提取前端用户操作对应的埋点记录；

步骤s402，根据所述埋点记录中记录的前端测试所处页面信息，打开测试页面并在所述测试页面内生成div分区；

步骤s403，在所述div分区内，调用预置画图脚本标识出所述测试页面中前端用户操作的历史操作点以及历史操作轨迹；

步骤s404，对所述历史操作点与所述历史操作轨迹进行渲染，以展示前端用户操作轨迹。

本实施例中，前端用户操作具体指对用户在前端测试页面的页面元素上的操作，例如点击测试页面上的数据输入框输入数据、选择某一选项或者提交输入数据等。其中，页面元素对应的页面坐标即为操作该页面元素的操作点对应的坐标。

本实施例中，在埋点数据收集阶段预先记录了前端测试操作的页面信息，根据该页面信息，重新打开测试页面，然后在该测试页面内生成div分区，以便于绘制前端用户操作的历史操作点以及历史操作轨迹。

div(division，分区)是web技术中的一种对网页页面进行区域分块的技术，在div分块区域内根据实际需要可以对页面元素进行多种操作，例如更换字体、显示字体颜色、插入图片等等。在本实施例中，通过生成div分区用以在div所属区域内显示操作点及操作轨迹。

在本实施例中，调用预设的画图脚本，例如利用raphael.js(一种开源的画图脚本工具)，在测试页面的历史操作点对应的历史坐标位置，生成与历史操作点对应的热点图形以及连接各热点图形以显示操作轨迹的线条图形。本实施例中，如果历史操作点只有一个，则无需描述其操作轨迹，并且不用生成相应的线条图形。

可选的，在一实施例中，在所述div分区内，根据所述埋点记录中记录的前端用户操作对应的历史坐标，调用所述预置画图脚本，以热点图形形式标识出所述测试页面中前端用户操作的历史操作点，以线条图形形式标识出所述测试页面中由前端用户操作的历史操作点串联形成的历史操作轨迹。

本可选实施例中，当测试页面的历史操作点对应的历史坐标至少有两个时，调用预设画图脚本将各历史坐标对应的热点图形按对应历史坐标记录的顺序以线条图形串联起来，为了更加清楚显示出历史操作点的操作轨迹，本实施例中的线条图形可以为线条箭头或者其他能展示出操作轨迹的图形，如图5所示。

例如，在图5中，预先在各测试点进行埋点，如果测试过程中测试人员在测试页面中依次点击了测试点1、2、5，则生成的测试操作轨迹如图5中显示方式进行展示。

在本实施例中，热点图形可以为任何一种可以展示操作点的图形，例如圆点、菱形点等，如果操作点对应的页面元素较大，例如为一个输入框，或者提交按钮等，则对应的热点图形可以为一个封闭的线圈。热点图形的图形样式(包括颜色等)具体根据实际需要而设定。线条图形可以为任意一种可以展示操作点操作轨迹的图形，例如曲线、直线、带箭头的线条等，线条图形的图形样式(包括颜色等)具体根据实际需要设定。

进一步地，在本发明操作轨迹可视化方法一实施例中，为进一步便于测试人员快速定位测试故障，因此，上述步骤s40进一步还包括：

根据所述埋点记录中记录的各接口调用信息，按照接口调用顺序展示前端用户操作的接口调用轨迹。

本实施例中，在展示前端用户操作轨迹的同时，还进一步展示各接口的调用顺序，以供精准定位出哪个系统的哪个接口存在问题。比如按照接口的调用时间、调用关系等确定各接口的调用顺序，以形成接口调用轨迹，该轨迹可以是以文字形式展示或图画形式展示，可以是与前端用户操作轨迹同时进行展示，也可以是分开展示。

参照图6，图6为本发明操作轨迹可视化方法第二实施例的流程示意图。基于上述方法第一实施例，本实施例中，在上述步骤s30之后，还包括：

步骤s50，当接收到查询请求时，获取查询关键字；

步骤s60，基于所述查询关键字，查找所述数据库中与所述查询关键字匹配的相关测试信息并输出；

其中，所述相关测试信息包括：前端测试用户的基本信息、前端操作事件信息、前端操作事件的接口调用信息、前端测试所处页面信息、前端测试所处流程信息、前端测试报错信息中的一种或多种。

本实施例中，为便于测试人员能够随时了解测试过程以及测试详情，因此进一步提供测试情况查询功能。

本实施例中，测试人员只需输入所要查询的关键字，比如客户id、客户注册手机号码等作为查询关键字，查询存储埋点记录的数据库，从而输出与查询关键字匹配的相关测试信息，比如前端测试用户的基本信息、前端操作事件信息、前端操作事件的接口调用信息、前端测试所处页面信息、前端测试所处流程信息、前端测试报错信息等。

本发明还提供一种操作轨迹可视化装置。

参照图7，图7为本发明操作轨迹可视化装置一实施例的功能模块示意图。本实施例中，操作轨迹可视化装置包括：

收集模块10，用于在进行前端测试时，基于前端预置埋点，收集与所述埋点关联的前端用户操作信息，并生成对应的埋点记录；

检测模块20，用于检测所述埋点记录中是否存在前端测试时产生的系统报错；

整合模块30，用于若所述埋点记录中存在前端测试时产生的系统报错，则基于预设关键字，对所述埋点记录进行整合并存入数据库中；

可视化模块40，用于从所述数据库中提取埋点记录并进行可视化处理，以展示前端用户操作轨迹。

基于与上述本发明操作轨迹可视化方法相同的实施例说明内容，因此本实施例对操作轨迹可视化装置的实施例内容不做过多赘述。

本实施例预先在前端做好埋点，当进行前端测试时，通过埋点检测用户在前端页面上的触控操作，比如点击按钮操作、拖动页面操作等，进而通过埋点实时采集与该触控操作相关的信息，比如触控操作的位置坐标、触控操作所调用的接口以及接口参数等，前端再将基于埋点代码所采集的埋点数据回传给后端，以供后端将收集到的信息生成埋点记录，然后再将埋点记录中的信息进行可视化处理，从而展示前端用户的操作轨迹，以便于定位前端测试过程中存在的问题，提升前端测试效率与测试准确性。

本发明还提供一种计算机可读存储介质。

本实施例中，所述计算机可读存储介质上存储有操作轨迹可视化程序，所述操作轨迹可视化被处理器执行时实现如上述任一项实施例中所述的操作轨迹可视化方法的步骤。其中，操作轨迹可视化程序被处理器执行时所实现的方法可参照本发明操作轨迹可视化方法的各个实施例，因此不再过多赘述。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，这些均属于本发明的保护之内。