CN111818123B - 网络前端远程回放方法、装置、设备及存储介质 - Google Patents

网络前端远程回放方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN111818123B
CN111818123B CN202010471442.XA CN202010471442A CN111818123B CN 111818123 B CN111818123 B CN 111818123B CN 202010471442 A CN202010471442 A CN 202010471442A CN 111818123 B CN111818123 B CN 111818123B
Authority
CN
China
Prior art keywords
object model
document object
page
remote playback
end remote
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010471442.XA
Other languages
English (en)
Other versions
CN111818123A (zh
Inventor
石强强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN202010471442.XA priority Critical patent/CN111818123B/zh
Publication of CN111818123A publication Critical patent/CN111818123A/zh
Application granted granted Critical
Publication of CN111818123B publication Critical patent/CN111818123B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters 
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Debugging And Monitoring (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种网络前端远程回放方法、装置、设备及存储介质，该方法通过接收操作重现指令，从所述操作重现指令中提取重现时间段，获取前端页面的文档对象模型快照和操作日志，在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树，通过记录的文档对象模型快照和操作日志，复现用户遇到的异常过程，从而快速定位异常；基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，基于时间分段的操作日志，方便跳跃式回放，从而快速且精准地定位问题。

Description

网络前端远程回放方法、装置、设备及存储介质
技术领域
本发明涉及网页数据处理的技术领域，尤其涉及一种网络前端远程回放方法、装置、设备及存储介质。
背景技术
在全球广域网WEB应用中排查问题是比较难的，用户异常操作引发的系统或业务异常时常很难复现，尤其是偶发异常复现更是难上加难，传统的收集错误栈信息的方式不能给我们提供足够的定位信息，极大增加了异常引发的经济损失。
在进行端到端(end to end，缩写E2E)测试或是随意点击测试时，如果测试最终结果有问题想要对操作进行复现，目前已有的类似Log Rocket能提供像素级的回放和录制，但是此类产品通常是通过网络提供软件服务(Software-as-a-Service，缩写SaaS)，意思为软件即服务，对于那些部署在内网环境的应用可能无法连接，也就无法使用。因此，如何更好地远程实现前端页面的操作复现，以快速定位异常是亟待解决的技术问题。
上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。
发明内容
本发明的主要目的在于提供一种网络前端远程回放方法、装置、设备及存储介质，旨在解决现有技术中前端页面的操作很难复现，导致异常定位时效性差的技术问题。
为实现上述目的，本发明提供一种网络前端远程回放方法，所述网络前端远程回放方法包括以下步骤：
接收操作重现指令，从所述操作重现指令中提取重现时间段；
获取前端页面的文档对象模型快照和操作日志；
在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树；
基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列；
对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
优选地，所述获取前端页面的文档对象模型快照和操作日志之前，所述网络前端远程回放方法还包括：
记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照；
接收并执行操作指令，记录所述前端页面的操作日志。
优选地，所述操作日志包括操作数据、去脚本化数据、没有反映的视图状态和绝对路径；
所述接收并执行操作指令，记录所述前端页面的操作日志，包括：
接收并执行操作指令，记录所述前端页面的操作数据，所述操作数据为执行所述操作指令所产生的数据；
对所述前端页面进行去脚本化，获得去脚本化数据；
记录所述前端页面中没有反映的视图状态；
获取所述前端页面的相对路径，并将所述相对路径转换为绝对路径。
优选地，所述接收并执行操作指令，记录所述前端页面的操作数据之后，所述网络前端远程回放方法还包括：
从所述操作指令中提取操作类型，将所述操作类型及对应的操作数据进行序列化，获得目标格式数据。
优选地，所述记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照，包括：
获取用户需求，根据所述用户需求设置快照间隔时间；
每隔所述快照间隔时间记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照。
优选地，所述接收并执行操作指令，记录所述前端页面的操作日志之后，所述网络前端远程回放方法还包括：
对所述文档对象模型快照和所述操作日志进行分类，获得各类型对应的文档对象模型快照和操作日志；
将各类型对应的文档对象模型快照和操作日志存储至预设数据库中。
优选地，所述对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，包括：
根据所述重现时间段从所述操作队列中的操作日志中查找上一个操作的创建时间和下一个操作的创建时间；
将所述下一个操作的创建时间减去所述上一个操作的创建时间，获得相对时间；
将所述相对时间作为请求动画帧函数的参数，生成定时器；
基于所述定时器，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
此外，为实现上述目的，本发明还提出一种网络前端远程回放设备，所述网络前端远程回放设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网络前端远程回放程序，所述网络前端远程回放程序配置为实现如上文所述的网络前端远程回放方法的步骤。
此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有网络前端远程回放程序，所述网络前端远程回放程序被处理器执行时实现如上文所述的网络前端远程回放方法的步骤。
此外，为实现上述目的，本发明还提出一种网络前端远程回放装置，所述网络前端远程回放装置包括：
提取模块，用于接收操作重现指令，从所述操作重现指令中提取重现时间段；
获取模块，用于获取前端页面的文档对象模型快照和操作日志；
重建模块，用于在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树；
排序模块，用于基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列；
重现模块，用于对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
本发明中，通过接收操作重现指令，从所述操作重现指令中提取重现时间段，获取前端页面的文档对象模型快照和操作日志，在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树，通过记录的文档对象模型快照和操作日志，复现用户遇到的异常过程，从而快速定位异常；基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，基于时间分段的操作日志，方便跳跃式回放，从而快速且精准地定位问题。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的网络前端远程回放设备的结构示意图；
图2为本发明网络前端远程回放方法第一实施例的流程示意图；
图3为本发明网络前端远程回放方法第二实施例的流程示意图；
图4为本发明网络前端远程回放方法第三实施例的流程示意图；
图5为本发明网络前端远程回放装置第一实施例的结构框图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
参照图1，图1为本发明实施例方案涉及的硬件运行环境的网络前端远程回放设备结构示意图。
如图1所示，该网络前端远程回放设备可以包括：处理器1001，例如中央处理器(Central Processing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)，可选用户接口1003还可以包括标准的有线接口、无线接口，对于用户接口1003的有线接口在本发明中可为USB接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(Random Access Memory，RAM)存储器，也可以是稳定的存储器(Non-volatileMemory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的结构并不构成对网络前端远程回放设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及网络前端远程回放程序。
在图1所示的网络前端远程回放设备中，网络接口1004主要用于连接后台服务器，与所述后台服务器进行数据通信；用户接口1003主要用于连接用户设备；所述网络前端远程回放设备通过处理器1001调用存储器1005中存储的网络前端远程回放程序，并执行本发明实施例提供的网络前端远程回放方法。
基于上述硬件结构，提出本发明网络前端远程回放方法的实施例。
参照图2，图2为本发明网络前端远程回放方法第一实施例的流程示意图，提出本发明网络前端远程回放方法第一实施例。
在第一实施例中，所述网络前端远程回放方法包括以下步骤：
步骤S10：接收操作重现指令，从所述操作重现指令中提取重现时间段。
应理解的是，本实施例的执行主体是所述网络前端远程回放设备，其中，所述网络前端远程回放设备可为个人电脑或服务器等电子设备，本实施例对此不加以限制。为了实现重现，首先要在前端页面进行操作时进行录制，通过每若干次操作后制作一次快照方式可以将操作日志拆分成多个短日志，为接下来的快进式的回放做好铺垫。记录的每条数据都带有时间戳，从而方便跳跃式或快进式回放。所述操作重现指令可以是用户通过所述网络前端远程回放设备的显示界面输入的指令，从所述操作重现指令中提取重现时间段，根据所述重新时间段与记录的每条数据的时间戳进行匹配，从而获取到与所述重现时间段对应的录制数据进行重现。
步骤S20：获取前端页面的文档对象模型快照和操作日志。
可理解的是，文档对象模型(Document Object Model，DOM)是JavaScript操作网页的接口，当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了，它把你编写的网页文档转换成为一个文档对象。所述前端页面的整个文档是一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个属性是一个属性节点，注释属于注释节点。DOM树：DOM树是结构，所谓层级结构是指元素和元素之间的关系，父子或兄弟，解析器输出的树是由DOM元素和属性节点组成的，树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。脱离文档流后层级结构关系还是没有变的，DOM提供给Javascript用来动态修改文档状态。DOM代表着加载到浏览器窗口的当前网页，浏览器提供了网页的模型，可以通过Java Script去读取这张地图。利用JS操作DOM可以让你更改网页的交互方式。所有网页的交互都依赖这种DOM技术。DOM是一颗树，树枝和树叶都做了编号，通过脚本的函数去寻找哪一个枝干的哪一个叶子，对这个叶子做什么改变。
需要说明的是，所述前端页面中的视图状态可以通过DOM树的形式描述，所以我们通过记录DOM树在不同时间点的状态来达到操作回放的效果，一个时间点的状态我们称之为一个快照，从而获得所述前端页面的文档对象模型快照。所述操作日志为所述前端页面执行操作指令所产生的数据。所述操作指令包括：DOM变动、鼠标的交互和移动、页面或元素滚动、视图窗口大小变化和输入操作等。其中，所述DOM变动包括新增和删除节点、节点属性改变和文本改变等。
步骤S30：在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树。
在具体实现中，所述沙盒环境又称测试环境和开发环境，是提供给开发者开发和测试用的环境。在该环境中应用功能没有任何限制。DOM结构构成的基本要素是“节点”，而文档的结构就是由层次化的节点组成。在DOM模型中，整个文档(Document)就是一个节点，称为文档节点。除此之外还有元素(Element)节点、属性节点、Entity节点、注释(Comment)节点等。DOM的结构是由各种的子节点组成的，根据所述DOM快照，以HTMLDocument为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是DOM树，以对所述文档对象模型(DOM)快照进行复制重现。
步骤S40：基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列。
可理解的是，为了数据调用接口持久化，通常录制的所述文档对象模型快照和所述操作日志存储在数据库中，同时存储了对应的操作时间和操作类型，基于所述文档对象模型树，从数据库中获取所述操作日志，并将所述操作日志按照入库的时间进行升序排列，即可获得所述操作队列。
步骤S50：对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
需要说明的是，启动一个计数器对所述操作队列进行遍历，将所述重现时间段内的操作取出重现。根据重现的操作进行异常排查，从而快速定位出异常点。在回放时的，原生的setTimeOut主线程阻塞后可能会出现卡顿、抖动的现象，可以借助requestAnimationFrame来实现一个不断校准的定时器，合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成。
进一步地，在本实施例中，所述步骤S50，包括：
根据所述重现时间段从所述操作队列中的操作日志中查找上一个操作的创建时间和下一个操作的创建时间；
将所述下一个操作的创建时间减去所述上一个操作的创建时间，获得相对时间；
将所述相对时间作为请求动画帧函数的参数，生成定时器；
基于所述定时器，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
在具体实现中，定时器的实现过程具体为：
requestAnimationFrame()函数，是针对动画效果的API，具体使用方法如下window.requestAnimationFrame(function(/*time*/time){
//time～＝+new Date//the unix time
})；
只需要将操作日志列表中下一个操作创建时间减去上一个操作创建时间，即可获取相对时间，作为参数设置进请求动画帧(request Animation Frame)函数，即可实现定时器。
在本实施例中，通过接收操作重现指令，从所述操作重现指令中提取重现时间段，获取前端页面的文档对象模型快照和操作日志，在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树，通过记录的文档对象模型快照和操作日志，复现用户遇到的异常过程，从而快速定位异常；基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，基于时间分段的操作日志，方便跳跃式回放，从而快速且精准地定位问题。
参照图3，图3为本发明网络前端远程回放方法第二实施例的流程示意图，基于上述图2所示的第一实施例，提出本发明网络前端远程回放方法的第二实施例。
在第二实施例中，所述步骤S20之前，还包括：
步骤S101：记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照。
应理解的是，所述前端页面中的视图状态可以通过DOM树的形式描述，通过记录DOM树在不同时间点的状态来达到操作回放的效果，一个时间点的状态我们称之为一个快照，仅在所述前端页面开始录制时制作一个完整的DOM快照，即所述前端页面的文档对象模型快照。通过每若干次操作后制作一次快照方式可以将操作日志拆分成多个短日志。
可理解的是，所述操作日志为所述前端页面执行操作指令所产生的数据。所述操作指令包括：DOM变动、鼠标的交互和移动、页面或元素滚动、视图窗口大小变化和输入操作等。其中，所述DOM变动包括新增和删除节点、节点属性改变和文本改变等。
步骤S102：接收并执行操作指令，记录所述前端页面的操作日志。
在具体实现中，所述操作指令为引发DOM数变化的操作指令，由于仅仅是对操作数据进行记录，不执行被录制页面中的java script脚本代码；记录页面中没有反映的视图状态，例如文本框input和文本域text area中输入值虽然不反映在HTML中，但是这也是属于用户操作的一部分，需要将其具体的值进行记录；相对路径要转成绝对路径，因为做回放时页面的路径不再是用户机器原本的路径，而是具体的服务器地址，所以被录制页面中的相对路径要转成服务器的绝对路径。在本实施例中，所述操作日志包括操作数据、去脚本化数据、没有反映的视图状态和绝对路径；所述步骤S102，包括：接收并执行操作指令，记录所述前端页面的操作数据，所述操作数据为执行所述操作指令所产生的数据；对所述前端页面进行去脚本化，获得去脚本化数据；记录所述前端页面中没有反映的视图状态；获取所述前端页面的相对路径，并将所述相对路径转换为绝对路径。
进一步地，在本实施例中，所述步骤S102之后，还包括：
从所述操作指令中提取操作类型，将所述操作类型及对应的操作数据进行序列化，获得目标格式数据。
应理解的是，为了便于存储及提高回放的准确性，用户接下来所有引发DOM数变化的操作都被以所述操作类型+操作数据的形式进行记录，所述目标格式数据为json格式数据，并将所述操作类型+操作数据序列化为json格式数据。同样地，将所述初始化快照进行序列化为json格式数据，调用后台接口将数据持久化到MongoDB数据库。
本实施例中，通过记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照，接收并执行操作指令，记录所述前端页面的操作日志，从而将前端页面的操作进行录制，以便于后续操作重现。
参照图4，图4为本发明网络前端远程回放方法第三实施例的流程示意图，基于上述第二实施例，提出本发明网络前端远程回放方法的第三实施例。
在第三实施例中，所述步骤S101，包括：
步骤S1011：获取用户需求，根据所述用户需求设置快照间隔时间。
应理解的是，为了满足业务个性化配置需求，可获取所述用户需求，所述用户需求可以是用户根据不同的业务线需求而提出的快照间隔时间。通过设置所述快照间隔时间，支持个性化的分段录制，方便跳跃式回放，快速、精准定位问题。
步骤S1012：每隔所述快照间隔时间记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照。
需要说明的是，通常对前端页面开始录制时，首先绘制一张此刻完整的DOM快照，即DOM树在各时间点上的状态，将初始化快照进行序列化为json格式数据，调用后台接口将数据持久化到MongoDB数据库。执行所述操作指令，所有引发DOM数变化的操作都被以操作类型+操作数据的形式进行记录，并将已json格式数据调用接口持久化到数据库中。
可理解的是，可通过每隔所述快照间隔时间记录所述前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的当前文档对象模型快照。
在具体实现中，也可通过每执行预设次数的操作指令后重新制作一张DOM快照。所述预设次数可根据经验值进行设置，比如3次。也就是说，执行若干次所述操作指令后，记录所述前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的当前文档对象模型快照，从而将所述操作日志拆分成多个短日志，为接下来的快进式的回放做好铺垫。在本实施例中，所述步骤S101，包括：执行预设次数的操作指令后，记录所述前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的当前文档对象模型快照。
进一步地，在本实施例中，所述步骤S102之后，还包括：
对所述文档对象模型快照和所述操作日志进行分类，获得各类型对应的文档对象模型快照和操作日志；
将各类型对应的文档对象模型快照和操作日志存储至预设数据库中。
应理解的是，所述前端页面可以是各种业务线的前端网页页面，为了便于后续各业务线对前端页面的重现需求，可对录制的所述文档对象模型快照和所述操作日志按照业务类型进行分类，获得各业务类型对应的文档对象模型快照和操作日志，将各类型对应的文档对象模型快照和操作日志存储至预设数据库中，所述预设数据库可以是MongoDB数据库。还可对录制维度进行设置，所述录制维度包括业务线、角色、身份标识(id)和频率，可根据该4个维度配置前端页面的录制范围，从而满足业务需求。在进行前端页面回放时，支持多维度搜索，找到对应的快照列表，从任意一个快照开始重现回放。
在本实施例中，获取用户需求，根据所述用户需求设置快照间隔时间，每隔所述快照间隔时间记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照，满足用户需求，支持个性化的分段录制，方便跳跃式回放，从而快速及精准定位问题。
此外，本发明实施例还提出一种存储介质，所述存储介质上存储有网络前端远程回放程序，所述网络前端远程回放程序被处理器执行时实现如上文所述的网络前端远程回放方法的步骤。
此外，参照图5，本发明实施例还提出一种网络前端远程回放装置，所述网络前端远程回放装置包括：
提取模块10，用于接收操作重现指令，从所述操作重现指令中提取重现时间段。
应理解的是，为了实现重现，首先要在前端页面进行操作时进行录制，通过每若干次操作后制作一次快照方式可以将操作日志拆分成多个短日志，为接下来的快进式的回放做好铺垫。记录的每条数据都带有时间戳，从而方便跳跃式或快进式回放。所述操作重现指令可以是用户通过所述网络前端远程回放设备的显示界面输入的指令，从所述操作重现指令中提取重现时间段，根据所述重新时间段与记录的每条数据的时间戳进行匹配，从而获取到与所述重现时间段对应的录制数据进行重现。
获取模块20，用于获取前端页面的文档对象模型快照和操作日志。
可理解的是，文档对象模型(Document Object Model，DOM)是JavaScript操作网页的接口，当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了，它把你编写的网页文档转换成为一个文档对象。所述前端页面的整个文档是一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个属性是一个属性节点，注释属于注释节点。DOM树：DOM树是结构，所谓层级结构是指元素和元素之间的关系，父子或兄弟，解析器输出的树是由DOM元素和属性节点组成的，树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。脱离文档流后层级结构关系还是没有变的，DOM提供给Javascript用来动态修改文档状态。DOM代表着加载到浏览器窗口的当前网页，浏览器提供了网页的模型，可以通过JavaScript去读取这张地图。利用JS操作DOM可以让你更改网页的交互方式。所有网页的交互都依赖这种DOM技术。DOM是一颗树，树枝和树叶都做了编号，通过脚本的函数去寻找哪一个枝干的哪一个叶子，对这个叶子做什么改变。
需要说明的是，所述前端页面中的视图状态可以通过DOM树的形式描述，所以我们通过记录DOM树在不同时间点的状态来达到操作回放的效果，一个时间点的状态我们称之为一个快照，从而获得所述前端页面的文档对象模型快照。所述操作日志为所述前端页面执行操作指令所产生的数据。所述操作指令包括：DOM变动、鼠标的交互和移动、页面或元素滚动、视图窗口大小变化和输入操作等。其中，所述DOM变动包括新增和删除节点、节点属性改变和文本改变等。
重建模块30，用于在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树。
在具体实现中，所述沙盒环境又称测试环境和开发环境，是提供给开发者开发和测试用的环境。在该环境中应用功能没有任何限制。DOM结构构成的基本要素是“节点”，而文档的结构就是由层次化的节点组成。在DOM模型中，整个文档(Document)就是一个节点，称为文档节点。除此之外还有元素(Element)节点、属性节点、Entity节点、注释(Comment)节点等。DOM的结构是由各种的子节点组成的，根据所述DOM快照，以HTML Document为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是DOM树，以对所述文档对象模型(DOM)快照进行复制重现。
排序模块40，用于基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列。
可理解的是，为了数据调用接口持久化，通常录制的所述文档对象模型快照和所述操作日志存储在数据库中，同时存储了对应的操作时间和操作类型，基于所述文档对象模型树，从数据库中获取所述操作日志，并将所述操作日志按照入库的时间进行升序排列，即可获得所述操作队列。
重现模块50，用于对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
需要说明的是，启动一个计数器对所述操作队列进行遍历，将所述重现时间段内的操作取出重现。根据重现的操作进行异常排查，从而快速定位出异常点。在回放时的，原生的set Time Out主线程阻塞后可能会出现卡顿、抖动的现象，可以借助requestAnimation Frame来实现一个不断校准的定时器，合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成。
进一步地，在本实施例中，所述重现模块50，还用于根据所述重现时间段从所述操作队列中的操作日志中查找上一个操作的创建时间和下一个操作的创建时间；将所述下一个操作的创建时间减去所述上一个操作的创建时间，获得相对时间；将所述相对时间作为请求动画帧函数的参数，生成定时器；基于所述定时器，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
在具体实现中，定时器的实现过程具体为：
requestAnimationFrame()函数，是针对动画效果的API，具体使用方法如下window.requestAnimationFrame(function(/*time*/time){
//time～＝+new Date//the unix time
})；
只需要将操作日志列表中下一个操作创建时间减去上一个操作创建时间，即可获取相对时间，作为参数设置进请求动画帧(requestAnimationFrame)函数，即可实现定时器。
在本实施例中，通过接收操作重现指令，从所述操作重现指令中提取重现时间段，获取前端页面的文档对象模型快照和操作日志，在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树，通过记录的文档对象模型快照和操作日志，复现用户遇到的异常过程，从而快速定位异常；基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，基于时间分段的操作日志，方便跳跃式回放，从而快速且精准地定位问题。
在一实施例中，所述网络前端远程回放装置还包括：
记录模块，用于记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照；接收并执行操作指令，记录所述前端页面的操作日志。
在一实施例中，所述操作日志包括操作数据、去脚本化数据、没有反映的视图状态和绝对路径；所述记录模块，还用于接收并执行操作指令，记录所述前端页面的操作数据，所述操作数据为执行所述操作指令所产生的数据；对所述前端页面进行去脚本化，获得去脚本化数据；记录所述前端页面中没有反映的视图状态；获取所述前端页面的相对路径，并将所述相对路径转换为绝对路径。
在一实施例中，所述网络前端远程回放装置还包括：
序列化模块，用于从所述操作指令中提取操作类型，将所述操作类型及对应的操作数据进行序列化，获得目标格式数据。
在一实施例中，所述记录模块，还用于获取用户需求，根据所述用户需求设置快照间隔时间；每隔所述快照间隔时间记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照。
在一实施例中，所述网络前端远程回放装置还包括：
分类模块，用于对所述文档对象模型快照和所述操作日志进行分类，获得各类型对应的文档对象模型快照和操作日志；
存储模块，用于将各类型对应的文档对象模型快照和操作日志存储至预设数据库中。
在一实施例中，所述重现模块，还用于根据所述重现时间段从所述操作队列中的操作日志中查找上一个操作的创建时间和下一个操作的创建时间；将所述下一个操作的创建时间减去所述上一个操作的创建时间，获得相对时间；将所述相对时间作为请求动画帧函数的参数，生成定时器；基于所述定时器，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
本发明所述网络前端远程回放装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。词语第一、第二、以及第三等的使用不表示任何顺序，可将这些词语解释为标识。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器镜像(ReadOnly Memory image，ROM)/随机存取存储器(Random AccessMemory，RAM)、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种网络前端远程回放方法，其特征在于，所述网络前端远程回放方法包括以下步骤：
接收操作重现指令，从所述操作重现指令中提取重现时间段；
获取前端页面的文档对象模型快照和操作日志；
在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树；
基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列；
对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现；在回放时，原生的setTimeOut主线程阻塞后会出现卡顿、抖动的现象，通过借助requestAnimationFrame来实现一个不断校准的定时器，重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成；
所述获取前端页面的文档对象模型快照和操作日志之前，所述网络前端远程回放方法还包括：
记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照；
接收并执行操作指令，记录所述前端页面的操作日志；
所述接收并执行操作指令，记录所述前端页面的操作数据之后，所述网络前端远程回放方法还包括：
从所述操作指令中提取操作类型，将所述操作类型及对应的操作数据进行序列化，获得目标格式数据。
2.如权利要求1所述的网络前端远程回放方法，其特征在于，所述操作日志包括操作数据、去脚本化数据、没有反映的视图状态和绝对路径；
所述接收并执行操作指令，记录所述前端页面的操作日志，包括：
接收并执行操作指令，记录所述前端页面的操作数据，所述操作数据为执行所述操作指令所产生的数据；
对所述前端页面进行去脚本化，获得去脚本化数据；
记录所述前端页面中没有反映的视图状态；
获取所述前端页面的相对路径，并将所述相对路径转换为绝对路径。
3.如权利要求1所述的网络前端远程回放方法，其特征在于，所述记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照，包括：
获取用户需求，根据所述用户需求设置快照间隔时间；
每隔所述快照间隔时间记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照。
4.如权利要求1所述的网络前端远程回放方法，其特征在于，所述接收并执行操作指令，记录所述前端页面的操作日志之后，所述网络前端远程回放方法还包括：
对所述文档对象模型快照和所述操作日志进行分类，获得各类型对应的文档对象模型快照和操作日志；
将各类型对应的文档对象模型快照和操作日志存储至预设数据库中。
5.如权利要求1～4中任一项所述的网络前端远程回放方法，其特征在于，所述对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，包括：
根据所述重现时间段从所述操作队列中的操作日志中查找上一个操作的创建时间和下一个操作的创建时间；
将所述下一个操作的创建时间减去所述上一个操作的创建时间，获得相对时间；
将所述相对时间作为请求动画帧函数的参数，生成定时器；
基于所述定时器，对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现。
6.一种网络前端远程回放装置，其特征在于，所述网络前端远程回放装置包括：
提取模块，用于接收操作重现指令，从所述操作重现指令中提取重现时间段；
获取模块，用于获取前端页面的文档对象模型快照和操作日志；
重建模块，用于在沙盒环境中将所述文档对象模型快照重建为对应的文档对象模型树；
排序模块，用于基于所述文档对象模型树，对所述操作日志按照操作时间进行排序，获得操作队列；
重现模块，用于对所述操作队列中的操作日志进行遍历，当遍历到所述重现时间段的操作日志时，将所述重现时间段的操作日志进行提取并重现，在回放时，原生的setTimeOut主线程阻塞后会出现卡顿、抖动的现象，通过借助requestAnimationFrame来实现一个不断校准的定时器，重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成；
所述网络前端远程回放装置用于实现：
记录前端页面的当前视图状态，将所述当前视图状态以文档对象模型树的形式进行描述，获得所述前端页面的文档对象模型快照；
接收并执行操作指令，记录所述前端页面的操作日志；
所述网络前端远程回放装置用于实现：
从所述操作指令中提取操作类型，将所述操作类型及对应的操作数据进行序列化，获得目标格式数据。
7.一种网络前端远程回放设备，其特征在于，所述网络前端远程回放设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网络前端远程回放程序，所述网络前端远程回放程序被所述处理器执行时实现如权利要求1至5中任一项所述的网络前端远程回放方法的步骤。
8.一种存储介质，其特征在于，所述存储介质上存储有网络前端远程回放程序，所述网络前端远程回放程序被处理器执行时实现如权利要求1至5中任一项所述的网络前端远程回放方法的步骤。
CN202010471442.XA 2020-05-28 2020-05-28 网络前端远程回放方法、装置、设备及存储介质 Active CN111818123B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010471442.XA CN111818123B (zh) 2020-05-28 2020-05-28 网络前端远程回放方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010471442.XA CN111818123B (zh) 2020-05-28 2020-05-28 网络前端远程回放方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN111818123A CN111818123A (zh) 2020-10-23
CN111818123B true CN111818123B (zh) 2023-10-20

Family

ID=72848415

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010471442.XA Active CN111818123B (zh) 2020-05-28 2020-05-28 网络前端远程回放方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN111818123B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112433923A (zh) * 2020-10-27 2021-03-02 北京健康之家科技有限公司 回溯文件生成方法、回溯方法和设备
CN112527643A (zh) * 2020-12-11 2021-03-19 杭州安恒信息技术股份有限公司 一种前端错误检测方法、装置、电子设备及可读存储介质
CN112685672B (zh) * 2020-12-24 2024-05-17 京东科技控股股份有限公司 页面会话行为轨迹的回溯方法、装置及电子设备
CN112527748B (zh) * 2020-12-24 2024-04-09 北京百度网讯科技有限公司 用于分析用户操作行为的方法、装置、设备以及存储介质
CN113361235B (zh) * 2021-06-30 2024-03-22 北京百度网讯科技有限公司 Html文件的生成方法、装置、电子设备及可读存储介质
CN113657076B (zh) * 2021-08-17 2023-08-22 中国平安财产保险股份有限公司 页面操作记录表的生成方法、装置、电子设备及存储介质
CN113794586B (zh) * 2021-08-30 2024-04-09 南京金智视讯技术有限公司 一种网络拓扑的快照与回放方法及系统
CN114442883A (zh) * 2022-01-19 2022-05-06 来也科技(北京)有限公司 基于ai和rpa的业务处理方法及装置
US11899529B2 (en) * 2022-04-11 2024-02-13 Capital One Services, Llc Systems and methods for detecting software errors

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184138A (zh) * 2011-05-19 2011-09-14 广东威创视讯科技股份有限公司 一种软件错误自动重现和定位的方法及系统
CN107103014A (zh) * 2016-10-11 2017-08-29 阿里巴巴集团控股有限公司 历史推送信息的重现方法、装置和系统
CN108647284A (zh) * 2018-05-03 2018-10-12 网易宝有限公司 记录用户行为的方法及装置、介质和计算设备
CN111078519A (zh) * 2019-12-13 2020-04-28 杭州安恒信息技术股份有限公司 异常监控行为回溯的方法、装置和电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184138A (zh) * 2011-05-19 2011-09-14 广东威创视讯科技股份有限公司 一种软件错误自动重现和定位的方法及系统
CN107103014A (zh) * 2016-10-11 2017-08-29 阿里巴巴集团控股有限公司 历史推送信息的重现方法、装置和系统
CN108647284A (zh) * 2018-05-03 2018-10-12 网易宝有限公司 记录用户行为的方法及装置、介质和计算设备
CN111078519A (zh) * 2019-12-13 2020-04-28 杭州安恒信息技术股份有限公司 异常监控行为回溯的方法、装置和电子设备

Also Published As

Publication number Publication date
CN111818123A (zh) 2020-10-23

Similar Documents

Publication Publication Date Title
CN111818123B (zh) 网络前端远程回放方法、装置、设备及存储介质
CN110297759B (zh) 一种制作测试页面脚本的方法、装置、设备及存储介质
CN110058856B (zh) 页面配置方法及装置
CN107729475B (zh) 网页元素采集方法、装置、终端与计算机可读存储介质
EP3776193B1 (en) Capturing and processing interactions with a user interface of a native application
US11216288B1 (en) Capturing and processing interactions with a user interface of a native application
CN109815119B (zh) 一种app链接渠道的测试方法及装置
CN106933887B (zh) 一种数据可视化方法及装置
CN111898055A (zh) 一种浏览器网页的录屏与回放方法
US20210067492A1 (en) Protecting user privacy in user interface data collection for native applications
CN113448845A (zh) 一种ui自动化测试方法及系统
CN115373673A (zh) 应用页面构建方法、装置、计算机设备及可读存储介质
CN113448569A (zh) 一种站点页面的处理系统、方法、设备和存储介质
CN117130946B (zh) 一种测试场景生成方法、装置、电子设备和可读存储介质
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
US20240241699A1 (en) Editing of a Multi-Page Demo
US20240127325A1 (en) Generating a product demonstration
CN111522737B (zh) 一种前端界面的自动化测试校验方法、装置及存储介质
CN113467767A (zh) 数据处理方法、装置、电子设备及存储介质
CN118606273A (zh) 基于多面体网格的文件转换方法和终端设备
CN115695696A (zh) 一种数据录制方法、装置、计算机设备及存储介质
CN117707678A (zh) 一种脚本文件的编辑方法、装置、计算机设备和存储介质
CN117349178A (zh) 用户页面测试方法及装置
CN112558973A (zh) 一种前端页面的生成方法及装置、存储介质、电子装置
CN115098479A (zh) 数据整合方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant