CN104598232B

CN104598232B - 一种Web应用跨设备捕捉‑回放方法

Info

Publication number: CN104598232B
Application number: CN201510014962.7A
Authority: CN
Inventors: 黄罡; 刘譞哲; 黄震; 马郓
Original assignee: Peking University
Current assignee: Peking University
Priority date: 2015-01-12
Filing date: 2015-01-12
Publication date: 2018-02-13
Anticipated expiration: 2035-01-12
Also published as: CN104598232A

Abstract

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

Description

一种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*F₁(T,T^,)+b*F₂(T,T^,)+c*F₃(T,T^,))选取编辑距离最小的结点作为匹配结点TarNode；其中，a+b+c＝1；a,b,c∈(0,1)；F_i(T,T_,)＝1-Lev(T_i,T_i ^,)/Max(len(T_i),len(T_i ^,))，T代表目标结点的信息，T^,代表所有可能的待匹配的结点的信息，i＝1、2、3，T₁、T₁ ^,为两结点位置信息，T₂、T₂ ^,为两结点本身的信息，T₃、T₃ ^,为两结点上下文信息，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应用是完全一样的，因此可以利用结点的位置信息找到完全匹配的结点；实际应用中，目标结点的位置可能有微小的偏移，这时候并不能单纯地通过位置来找结点，还应该利用结点的上下文信息，与记录时的上下文进行模糊匹配，基于匹配的准确度来进行辅助查找。因此，在找结点这个过程中，最终需要考虑结点位置和上下文这两部分信息，结点位置越准确，上下文越匹配，就越有可能找到真正的目标结点。查找的过程实际是一个筛选的过程。由于所有的信息都是以字符串形式组织的，可以采用字符串编辑距离(Levenshtein distance)函数来作为筛选过程中的度量函数。因此，最佳的匹配结果可以定义为：TarNode＝Max(a*F₁(T,T^,)+b*F₂(T,T^,)+c*F₃(T,T^,))，其中，a+b+c＝1；a,b,c∈(0,1)；F_i(T,T_,)＝1-Lev(T_i,T_i ^,)/Max(len(T_i),len(T_i ^,))。在上述公式里面，T代表目标结点的信息，T^,代表所有可能的待匹配的结点的信息。具体到不同F函数里面的话，T₁、T₁ ^,意味着位置性的信息，T₂、T₂ ^,意味着DOM结点本身的信息，包括DOM结点内部的语义内容和重要标签属性信息，T₃、T₃ ^,意味着上下文信息。Lev函数是计算字符串编辑距离的函数，len则是计算字符串长度的函数。参数a、b、c是为不同种类信息赋予的权值，一个较好的a、b、c权值应该分别是0.2、0.5、0.3。实际筛选时，可以采用3个步骤：1)计算目标结点和待匹配结点在内部语义上的编辑距离，排除所有在内部语义内容上存在较大差异的结点(大于某个阈值)；2)在第一步的基础上，计算目标结点和待匹配结点在重要标签属性上的编辑距离，排除在重要标签属性上存在较大差异的结点；3)在前两步的基础上可以计算出F₂，再根据前面给出的公式计算出最终的编辑距离，并选择最匹配的一个结点作为最终结点。如果在前面任何一步中有且仅有一个完美匹配的结点(即编辑距离为0)，则可以跳过后续的匹配步骤并认定该结点就是最终的结果。如果筛选后剩余一个结点，则在这个结点上回放事件；如果没有剩余的结点，则回放失败。无论事件的回放是否成功，前台都会发送一个信息给后台作为反馈。

(2)客户端的后台部分。后台同样基于JavaScript，可以实现为浏览器插件的形式。它负责接收前台传递过来的原始事件信息，加以处理包装后提交给服务器端，以便服务器创建对应的XML脚本文件。另外，后台还通过Ajax技术从服务器端获取脚本，将脚本解析后呈现在后台的控制面板上，供用户进行操作。

后台的控制面板提供多种有用的功能，如自动回放、单步回放、暂停等功能。单步回放每次只回放一个事件，回放完后不进行别的操作，直到用户点击下一步的时候，才会将脚本中的下一个事件进行回放。自动回放则是利用前台的反馈自动地回放下一步，如果事件回放成功，后台会继续读取脚本中的下一个事件并进行回放；事件回放失败的话，则终止当前脚本的回放。后台中还加入循环控制的逻辑，可以按照用户意愿重复地执行脚本中的某几步，并且，涉及到的参数也可以在循环开始时就设定好，之后可以由后台程序自动填上。

(3)服务器端。服务器上面存放有XML格式的脚本文件，供客户端的后台进行脚本的存取。服务器端只需一个，客户端可以在不同平台上实现，不同客户端可以共用XML脚本。此外，考虑到脚本具有可编辑、可分享的性质，服务器端还引入了帐号登录机制，每个用户有自己独有的脚本，可以单独使用，也可以和别人共享。

与现有技术相比，本发明的积极效果为：

本发明采用监听DOM事件并回放的机制，实现了针对Web应用的动作捕捉和回放。由于监听和回放部分采用的是纯JavaScript代码，本发明可以方便地实现在各个平台上，包括PC和移动设备。通过在回放过程中加入单步回放、自动回放、循环回放等逻辑，本发明可以用于Web应用测试、应用状态同步以及代替人力进行重复性的网页工作。此外，事件脚本以XML文档的形式保存，拥有良好的扩展性，且方便编辑，能够在用户之间自由共享。

附图说明

图1为本发明的技术架构图。

具体实施方式

本节给出了PC和Android平台上一个Web应用动作捕捉和回放的实例。该实例模拟了一位学生在PC上登入北大教学网并查询作业发布情况的动作，由于该教学网站只有PC版，在手机上访问比较麻烦，使用本技术后，可以在手机上方便地重现这一过程。

为了达成跨平台的目标，需要在PC和Android平台上对客户端进行不同的实现。而服务器端部分可以共用，只需要在服务器上利用PHP和MySQL实现存取XML文件、管理用户等功能即可。

客户端部分较为复杂，下面进行详细介绍。

PC上的Chrome浏览器有插件功能，客户端可以实现为一个Chrome插件。Chrome插件自带前台与后台的机制，本发明的前台代码可以写在一个contentscript.js文件中，Chrome会自动将contentscript.js注入到每一个网页里面。在contentscript.js文件中，定义实现了前台监听、回放等相关函数。一些通用的函数，如计算编辑距离的函数、筛选结点并回放事件的函数只需要实现一遍即可；而针对不同的事件，需要实现不同的处理函数，然后在window对象上与相应的事件一一进行绑定。在本实例中，核心的两个事件为点击click和输入keyup，对click事件的监听可以记录用户的点击操作，对keyup事件的监听可以记录用户的输入操作；当对应的事件被触发时，用前文所述的方法记录相关信息，然后通过Chrome插件的API发送给后台。需要注意的是，对这两个事件进行回放时需要区别对待：click事件的话只需要通过DOM派发事件的方式模拟点击操作即可，而keyup事件实际对应的是输入操作，因此回放时真正要做的是更改相应结点的value值，这样就可以模拟输入。而Chrome插件的后台部分，需要利用插件API获取前台的事件信息并通过Ajax技术发送到服务器上；此外，还需要实现用户登录、获取脚本、发送待回放事件到前台、单步回放以及自动回放等功能。

Android平台上，客户端可以实现为APP的形式。Android的SDK中带有WebView组件，可以方便地实现开发者自己定制的浏览器。WebView中带有loadUrl方法，可以用来执行JavaScript代码。在APP的资源文件中，也存有一份contentscript.js文件，内容与Chrome插件中的基本一致。每当用WebView打开一个新网页时，都会调用loadUrl方法将该文件中的代码执行一遍，手动完成前台代码的注入。而后台代码可以实现在另一个Activity中，在里面通过Java语言实现后台的逻辑即可。此时，前台与后台的通信方式为Android平台中Activity之间的通信方式，如通过Intent机制来传递消息。

具体使用时，先在PC上开启Chrome插件，点击录制脚本。按照正常的浏览方式，在地址栏输入北大教学网的网址后，进入网站首页。输入用户名和密码进行登录，进入学生个人的课程页面，选择一门《数据库概论》的课程，点进去后查看最新发布的作业。这一系列操作包含点击和输入的操作，所有事件都会被Chrome插件记录下来并最终保存在服务器上。

之后，在Android手机上打开APP，进入脚本选择界面。此时，服务器上已有之前录制好的脚本。选择好脚本后，点击回放，则会自动进入北大教学网首页，然后进行动作的回放。为了显示当前的操作是通过程序自动回放产生的，网页中对应结点的背景色会被设置成黄色，而里面的字体颜色会被设置为绿色。整个过程可以顺利地回放完成，最终停留在作业最新发布页。

Claims

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.如权利要求3所述的方法，其特征在于，所述DOM结点的上下文信息为其祖父结点的所有文本内容。

5.如权利要求3所述的方法，其特征在于，所述模糊匹配的方法为：对于该脚本中的每一DOM结点，首先根据DOM结点的语义信息过滤掉该Web应用所在网页实时内容中语义内容差别大于设定阈值的结点；然后根据DOM结点本身的属性信息过滤掉该Web应用所在网页实时内容中结点属性差异大于设定阈值的结点；然后计算该Web应用所在网页实时内容中剩余结点与该脚本中当前待匹配DOM结点的编辑距离，选取编辑距离最小的结点作为匹配结点。

6.如权利要求5所述的方法，其特征在于，利用公式TarNode=Max(a*F₁(T,T’)+ b*F₂(T,T’)+c*F₃(T,T’))选取编辑距离最小的结点作为匹配结点TarNode；其中，a+b+c=1;a,b,c∈(0,1); F_i(T,T’)=1-Lev(T_i,T_i’)/Max(len(T_i),len(T_i’))，T代表目标结点的信息，T’代表所有可能的待匹配的结点的信息，i=1、2、3，T₁、T₁’为两结点位置信息，T₂、T₂’为两结点本身的信息，T₃、T₃’为两结点上下文信息，Lev（）函数是计算字符串编辑距离的函数，len（）则是计算字符串长度的函数。

7.如权利要求1或2所述的方法，其特征在于，所述脚本为XML脚本文件。