一种Web应用跨设备捕捉‑回放方法技术

本发明专利技术公开了一种Web应用跨设备捕捉‑回放方法。本方法为：1)在用户设备A、用户设备B上分别安装一客户端；2)用户设备A的前台模块根据当前Web应用的DOM文档树，对该Web应用中每一事件对应的DOM结点进行记录并保存到一脚本，然后通过后台模块将该脚本发送给服务器；记录信息包括：DOM结点位置信息、上下文信息、本身的信息；3)当在用户设备B上回放该Web应用时，用户设备B的后台模块从该服务器获取该脚本，然后根据该脚本中的记录信息将该Web应用所在网页中的实时内容与该脚本记录的内容进行模糊匹配，回放该Web应用。本发明专利技术事件脚本以XML文档保存，拥有良好扩展性，且方便编辑，能够在用户之间自由共享。

【技术实现步骤摘要】
一种Web应用跨设备捕捉-回放方法
本专利技术是一种对Web应用进行跨设备的动作捕捉与回放的方法，属于软件
，适用于Web辅助工具开发及软件测试。
技术介绍
在软件工程领域中，应用程序的动作捕捉与回放一直是个热门的话题。随着互联网的快速发展，应用程序的形态也变得多种多样，近些年来，基于Web技术、通过浏览器即可使用的应用程序越来越多，我们称之为Web应用。Web应用具有跨平台、免安装、数据同步性高等特点，是当下比较热门的软件开发方向之一。对Web应用进行动作捕捉与回放，成为了软件工程领域新的研究热点。如今，已经有研究人员提出了针对JavaScript应用进行确定性的动作捕捉、回放的技术。然而，Web应用往往有着内容更新较快的特点，如何跨设备地进行Web应用的动作捕捉，并在内容有变更的情况下进行回放，是一个亟待解决的重要问题。
技术实现思路
针对现有技术中存在的技术问题，本专利技术的目的在于提供一种针对Web应用进行跨设备的动作捕捉和回放的方法，其核心思想是通过JavaScript代码，对浏览器中Web应用的DOM(文档对象模型)事件进行记录与回放。事件流会以XML文件的形式保存为一个脚本，回放脚本时，会将网页中的实时内容与记录的内容进行模糊匹配，来用于辅助回放，以便在内容发生细微变化时，回放仍可以顺利进行。此外，脚本可以被编辑和分享，可以用于Web应用测试或者代替人力进行重复性工作，因此该技术适用范围较大。本专利技术的技术方案为：一种Web应用跨设备捕捉-回放方法，其步骤为：1)在用户设备A、用户设备B上分别安装一客户端；其中，所述客户端包括前台模块和后台模块，所述前台模块通过所在用户设备的浏览器注入到的每一Web页面中；2)用户设备A的前台模块根据当前Web应用的DOM文档树，对该Web应用中每一事件对应的DOM结点进行记录并保存到一脚本，然后通过后台模块将该脚本发送给服务器；所述记录信息包括：DOM结点位置信息、DOM结点上下文信息、DOM结点本身的信息；3)当在用户设备B上回放该Web应用时，用户设备B的后台模块从该服务器获取该脚本，然后根据该脚本中的记录信息将该Web应用所在网页中的实时内容与该脚本记录的内容进行模糊匹配，回放该Web应用。进一步的，所述前台模块在每个页面的设定window对象上分别注册或绑定一对应的事件处理函数；当设定window对象上有事件发生时，对应的事件处理函数将发生事件的DOM结点进行记录。进一步的，所述DOM结点本身的相关信息包括结点的属性信息、事件的名称、当前网页的URL和结点内部的语义内容；所述DOM结点位置信息包括从发生事件的DOM结点开始到DOM文档树根结点的索引位置信息；所述DOM结点的上下文信息为该结点周围的语义信息。进一步的，所述DOM结点的上下文信息为其祖父结点的所有文本内容。进一步的，所述模糊匹配的方法为：对于该脚本中的每一DOM结点，首先根据DOM结点的语义信息过滤掉该Web应用所在网页实时内容中语义内容差别大于设定阈值的结点；然后根据DOM结点本身的属性信息过滤掉该Web应用所在网页实时内容中结点属性差异大于设定阈值的结点；然后计算该Web应用所在网页实时内容中剩余结点与该脚本中当前待匹配DOM结点的编辑距离，选取编辑距离最小的结点作为匹配结点。进一步的，利用公式TarNode＝Max(a*F1(T,T,)+b*F2(T,T,)+c*F3(T,T,))选取编辑距离最小的结点作为匹配结点TarNode；其中，a+b+c＝1；a,b,c∈(0,1)；Fi(T,T,)＝1-Lev(Ti,Ti,)/Max(len(Ti),len(Ti,))，T代表目标结点的信息，T,代表所有可能的待匹配的结点的信息，i＝1、2、3，T1、T1,为两结点位置信息，T2、T2,为两结点本身的信息，T3、T3,为两结点上下文信息，Lev()函数是计算字符串编辑距离的函数，len()则是计算字符串长度的函数。进一步的，所述脚本为XML脚本文件。本专利技术的架构如图1所示，分别是客户端和服务器端两部分。客户端主要是用JavaScript编写的，它是本专利技术的核心部分。客户端也分为前台和后台，前台的js代码会通过浏览器注入到每个网页里面，后台的代码则用于控制逻辑；服务器端用的是php语言，它运行在服务器上，主要负责脚本文件的存取。上述几个部分的具体技术方案如下：(1)客户端的前台部分。前台部分的js代码通过浏览器注入到每一个网页里面，具体实现时可以通过浏览器自身的API进行注入，也可以在网页的DOM文档中插入一个<script>标签来引用所需的代码，无需对浏览器本身进行修改。前台是和网页直接交互的地方，主要的功能有两个：一是按顺序监听记录当前激活网页里发生的各个事件(一般同一时刻最多只有一个网页被激活)；二是根据后台的要求一步步地回放各个事件。事件监听部分：在DOM2级别中，事件的传播基本可以分为3个阶段：1、捕获阶段；2、到达目标结点，调用对应的事件处理函数；3、冒泡阶段。通过注入js代码，前台可以在每个页面最外层的window对象中注册某个事件的处理函数，这样就可以监听到各个页面所有DOM结点上发生的该事件。因此，只要有事件发生(典型的如鼠标点击事件和键盘输入事件)，就会被监测到，在对应的事件处理函数中，前台负责把这些操作相关的信息记录下来，如用于定位DOM结点位置的信息、该结点的上下文、发生的事件名称等等，然后将这些信息打包交给后台处理。具体来说，事件处理函数需要记录三个部分的信息。第一是DOM结点本身的相关信息，如该DOM结点的id、className、tagName、src等属性，事件的名称，当前网页的URL、结点内部的语义内容(innerText)等等；第二是DOM结点的位置信息，从发生事件的DOM结点(也称之为目标结点)开始，一步步地循环往上查找当前DOM结点在父结点中的索引位置并进行记录，就可以获得用索引位置来表示的从DOM树根结点到目标结点的路径，该路径信息可以简洁地表征目标结点在整个DOM树中的位置；第三部分是DOM结点的上下文信息，这可以用该结点周围的语义信息来表征。具体而言，可以通过对DOM结点的操作定位到发生事件的目标结点(即当前所记录结点)的祖父结点，将祖父结点的所有文本内容(innerText)记录下来，作为DOM结点的上下文信息。事件回放部分：前台接收后台传递过来的在之前某一时刻记录好的事件信息(即事件处理函数记录的DOM结点位置信息、目标结点上下文信息、目标结点本身的信息等等)，尝试利用这些信息定位到具体的DOM结点，并调用该结点上的对应事件。本专利技术回放的前提是Web应用的版本大体一致，如都需要是手机版或者都是PC版。理想情况下，回放时的Web应用和记录时的Web应用是完全一样的，因此可以利用结点的位置信息找到完全匹配的结点；实际应用中，目标结点的位置可能有微小的偏移，这时候并不能单纯地通过位置来找结点，还应该利用结点的上下文信息，与记录时的上下文进行模糊匹配，基于匹配的准确度来进行辅助查找。因此，在找结点这个过程中，最终需要考虑结点位置和上下文这两部分信息，结点位置越准确，上下文越匹配，就越有可能找到真正的目标结点。查本文档来自技高网...

【技术保护点】
一种Web应用跨设备捕捉‑回放方法，其步骤为：1)在用户设备A、用户设备B上分别安装一客户端；其中，所述客户端包括前台模块和后台模块，所述前台模块通过所在用户设备的浏览器注入到的每一Web页面中；2)用户设备A的前台模块根据当前Web应用的DOM文档树，对该Web应用中每一事件对应的DOM结点进行记录并保存到一脚本，然后通过后台模块将该脚本发送给服务器；所述记录信息包括：DOM结点位置信息、DOM结点上下文信息、DOM结点本身的信息；3)当在用户设备B上回放该Web应用时，用户设备B的后台模块从该服务器获取该脚本，然后根据该脚本中的记录信息将该Web应用所在网页中的实时内容与该脚本记录的内容进行模糊匹配，回放该Web应用。

【技术特征摘要】
1.一种Web应用跨设备捕捉-回放方法，其步骤为：1）在用户设备A、用户设备B上分别安装一客户端；其中，所述客户端包括前台模块和后台模块，所述前台模块通过所在用户设备的浏览器注入到每一Web页面中；2）用户设备A的前台模块根据当前Web应用的DOM文档树，对该Web应用中每一事件对应的DOM结点进行记录并保存到一脚本，然后通过后台模块将该脚本发送给服务器；记录的信息包括：DOM结点位置信息、DOM结点上下文信息、DOM结点本身的信息；3）当在用户设备B上回放该Web应用时，用户设备B的后台模块从该服务器获取该脚本，然后根据该脚本中的记录信息将该Web应用所在网页中的实时内容与该脚本记录的内容进行模糊匹配，回放该Web应用。2.如权利要求1所述的方法，其特征在于，所述前台模块在每个页面的设定window对象上分别注册或绑定一对应的事件处理函数；当设定window对象上有事件发生时，对应的事件处理函数将发生事件的DOM结点进行记录。3.如权利要求1或2所述的方法，其特征在于，所述DOM结点本身的相关信息包括结点的属性信息、事件的名称、当前网页的URL和结点内部的语义内容；所述DOM结点位置信息包括从发生事件的DOM结点开始到DOM文档树根结点的索引位置信息；所述DOM结点的上下文信息为该结点周围的语义信息。4.如权利要求...

【专利技术属性】
技术研发人员：黄罡，刘譞哲，黄震，马郓，
申请(专利权)人：北京大学，
类型：发明
国别省市：北京;11