CN113420201A - 一种用于浏览器rpa系统的跨域元素定位与树生成方法 - Google Patents

Abstract

本发明公开了一种用于浏览器RPA系统的跨域元素定位与树生成方法，包括浏览器加载插件，插件将脚本注入到网页中，深度优先遍历获取到当前页面的所有的frame；流程设计器发送指令给后台，后台判断指令类型，并对不同指令采用不同方法发送指令到相应的frame；注入frame的脚本收到后台发送的指令，判断指令类型，并对不同指令进行相应的整合信息操作；流程设计器端用于接收后台处理过的数据之后，将json格式的数据解析出来显示给用户，用于编辑。本发明实现了浏览器RPA系统定位跨域网页元素的功能，也实现了含有iframe引入的跨域网页的网页DOM树的生成。

Description

一种用于浏览器RPA系统的跨域元素定位与树生成方法

技术领域

本发明属于电数字处理领域，具体涉及一种用于浏览器RPA系统的跨域元素定位与树生成方法。

背景技术

为了减轻人力成本，提高企业和工厂的效率，简单的工作现在被交给机器人来做，因此，RPA(Robotic Process Automation，机器人流程自动化)技术非常重要。RPA技术中，通过软件提供的流程设计器，可以事先编辑好流程，操作机器人完成一些计算机操作，比如鼠标移动，鼠标点击，表格信息填充，点击按钮，键盘输入数据，导入表格数据等基本操作。将这些操作进行分类，制作成流程设计器的组件，用户可以通过控制组件顺序进行流程编辑。DOM(Document Object Model，文档对象模型)，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。跨域是浏览器同源策略引起的，是浏览器对JavaScript实施的安全限制，不允许浏览器在当前网页执行不同源的脚本。在浏览器RPA系统中，引起跨域的原因是iframe(嵌套框架)标签里面引入了其他不同域网站的页面，JavaScript无法在当前页面获取到跨域页面的document和DOM对象，导致浏览器RPA操作无法完成，无法生成定位元素的路径，也无法生成页面的完整DOM树提供给流程设计器。

RPA操作中，大部分操作是针对浏览器的。浏览器RPA系统中，元素定位和网页DOM树生成是两个重要的操作，浏览器RPA使用插件对HTML页面中的DOM对象进行管理。插件是浏览器的扩展，插件由三个部分组成，第一部分为后台文件background.js，第二部分为控制插件权限和脚本注入顺序以及各种权限的manifest.json文件，第三部分为需要注入网页的一些脚本文件，插件加载到浏览器之后，浏览器可以调用插件中的程序，插件中使用的编程语言是JavaScript语言，使用JsvaScript语言对网页进行解析。

在使用JavaScript语言对网页进行解析时，需要通过遍历网页DOM树解决问题，比如深度优先搜索和广度优先搜索。在遍历时，采用易于编程的深度优先搜索进行遍历，遍历的过程中，遇到节点时，先往下进行搜索，记录必要的信息。在这个过程中，JavaScript能便捷快速地处理普通HTML网页节点，能快速的获取到当前节点的各种节点信息和属性，除当前节点本身的各种属性外，还可以获取到和当前节点相关的节点的DOM对象，如当前节点的父节点和子节点。在遇到iframe标签引入的不跨域的页面时，JavaScript代码可以获取到被引入页面的document，获取到document以后，可以像操作普通HTML网页的DOM对象一样操作跨域页面的DOM对象，获取需要获取的数据，之后将获取到的数据转换成json格式的数据转发给后台。

但是，对于跨域引入的网页，由于同源策略的限制，浏览器不允许JavaScript获取跨域页面的document和DOM对象，所以无法获取到自动化操作所需要的数据。

发明内容

本发明的目的在于提供一种用于浏览器RPA系统的跨域元素定位与树生成方法，该方法能够访问和定位跨域网页元素DOM对象，并且能够生成含有跨域页面的网页DOM树。

本发明提供的这种用于浏览器RPA系统的跨域元素定位与树生成方法，包括如下步骤：

S1.浏览器加载插件，插件将脚本注入到网页中，获取到当前页面的所有的frame(框架)；

S2.流程设计器发送指令给后台，后台判断指令类型，并发送指令到相应的frame；

S3.注入frame的脚本收到后台发送的指令，判断指令类型，并进行相应的整合信息操作；

S4.流程设计器端接收后台处理过的数据，将json格式的数据解析出来显示给用户。

步骤S1，具体为采用深度优先遍历获取到当前页面的所有的frame；

步骤S1还包括将主页面当成一个frame，获取到的frame中包括iframe标签引入的跨域网页；按照获取frame时的顺序，手动注入脚本文件，也向跨域frame中注入脚本。

步骤S2，判断指令类型，具体包括若后台接收的不是自动化指令，按照注入脚本的顺序发送指令到待处理的网页的所有frame；若后台接收的是自动化指令，按照指令中包含的frame的信息，转发指令给相应的frame。

步骤S3，包括若接收到的指令是捕获页面元素指令，等待鼠标捕获网页的DOM对象；对被捕获的DOM对象进行预处理。

预处理过程包括：若被捕获的DOM对象不在当前页面内的iframe标签引入的页面中，注入当前frame的脚本会得到一个值为null的字符串，得到空字符串之后，直接结束操作；若被捕获的DOM对象在当前页面内的iframe标签引入的页面中，当前frame的脚本获取iframe元素的DOM对象，iframe标签引入的网页frame获取被捕获元素的DOM对象；页面的脚本收到指令后，处理网页并获取定位网页元素的信息，然后转发给后台，后台处理frame转发的信息，将所有数据整合成json格式信息，然后转发给流程设计器。

步骤S3，包括若接收到的指令是生成DOM树指令，本调用将网页转换成邻接表模块对当前页面进行处理，生成对应的邻接表，把邻接表和当前页面的url和页面的iframe节点信息打包，转换成json格式的消息，发送给后台；后台接收来自各个frame的信息，按照接收信息的顺序，frame的url和iframe节点信息，判断出各个iframe节点对应的frame信息，将来自不同的frame的邻接表整合成一个邻接表，接收到所有信息后，将所有信息整合成json格式数据，然后将整合好的DOM树的邻接表信息发送给流程设计器。

步骤S3，包括若接收到的指令是自动化指令，提取出指令中的定位信息并定位到相关DOM，然后执行指令中所包含的自动化操作。

本发明提供的这种用于浏览器RPA系统的跨域元素定位与树生成方法，通过将浏览器插件中的background.js作为浏览器RPA系统中各个frame和脚本的后台，同时也作为脚本与流程设计器的中介，在注入脚本进入页面时，采用递归深度优先方式获取所有frame的方式，手动将脚本注入到所有的frame里面，而不是由插件自动的注入根frame里面，成功的实现了浏览器RPA系统定位跨域网页元素的功能，也实现了含有iframe引入的跨域网页的网页DOM树的生成。

附图说明

图1为本发明方法的流程示意图。

图2为本发明实施例的流程示意图。

图3为本发明实施例的流程设计器、插件后台background.js、网页和网页frame的关系示意图。

具体实施方式

如图1为本发明方法的流程示意图：本发明提供的这种用于浏览器RPA系统的跨域元素定位与树生成方法，包括如下步骤：

S1.浏览器加载插件，插件将脚本注入到网页中，深度优先遍历获取到当前页面的所有的frame；

步骤S1还包括将主页面当成一个frame，获取到的frame中包括iframe标签引入的跨域网页；按照获取frame时的顺序，手动注入脚本文件，也向跨域frame中注入脚本。

S2.流程设计器发送指令给后台，后台判断指令类型，并对不同指令采用不同方法发送指令到相应的frame；

若后台接收的不是自动化指令，按照注入脚本的顺序发送指令到待处理的网页的所有frame；若后台接收的是自动化指令，按照指令中包含的frame的信息，转发指令给相应的frame。

S3.注入frame的脚本收到后台发送的指令，判断指令类型，并对不同指令进行相应的整合信息操作；

若接收到的指令是捕获页面元素指令，等待鼠标捕获网页的DOM对象；对被捕获的DOM对象进行预处理：

预处理过程包括：若被捕获的DOM对象不在当前页面内的iframe标签引入的页面中，注入当前frame的脚本会得到一个值为null(空)的字符串，得到空字符串之后，直接结束操作；若被捕获的DOM对象在当前页面内的iframe标签引入的页面中，当前frame的脚本获取iframe元素的DOM对象，iframe标签引入的网页frame获取被捕获元素的DOM对象；页面的脚本收到指令后，处理网页并获取定位网页元素的信息，然后转发给后台，后台处理frame转发的信息，将所有数据整合成json格式信息，然后转发给流程设计器。

若接收到的指令是生成DOM树指令，脚本调用将网页转换成邻接表模块对当前页面进行处理，生成对应的邻接表，把邻接表和当前页面的url和页面的iframe节点信息打包，转换成json格式的信息，发送给后台；后台接收来自各个frame的消息，按照接收消息的顺序，frame的url和iframe节点信息，判断出各个iframe节点对应的frame信息，将来自不同的frame的邻接表整合成一个邻接表，接收到所有信息后整合好所有信息，然后将整合好的DOM树的邻接表信息发送给流程设计器。

若接收到的指令是自动化指令，提取出指令中的定位信息并定位到相关DOM，然后执行指令中所包含的自动化操作。

S4.流程设计器端接收后台处理过的数据，将json格式的数据解析出来显示给用户，供用户编辑。

具体实施方式如下：如图2为本发明实施例的流程示意图；网页中的frame的具体个数视网页具体情况而定，如图3为本发明实施例的流程设计器、插件后台background.js、网页和网页frame的关系示意图。图3中为了便于说明假定为三个，为了实现定位网页中的跨域元素和生成含有跨域页面的网页DOM树，插件中的background.js作为网页和注入脚本的后台，后台可以与网页的所有frame通信，所有的frame也可以和后台通信，后台可以同时和流程设计器和脚本进行通信，后台主要起到存储和整合以及转发消息的作用。

步骤一、插件被加载时，将脚本注入到页面的所有frame中，按照深度优先遍历获取到的所有frame的顺序注入frame中，优选的，可以调用浏览器提供的webNavigation.getAllFrames()方法实现，使用浏览器提供的tabs.executeScript()方法将脚本注入所有的frame。

步骤二、后台与本地程序和脚本进行连接。优选的，后台调用浏览器提供的runtime.connectNative()方法与本地程序进行连接，通过chrome.runtime.onConnect.addListener()方法监听脚本端发送过来的消息。脚本端通过chrome.runtime.connect()方法连接到background.js端。

步骤三、流程设计器发送指令给后台，后台判断指令是否为自动化指令，如果不是，优选的，按照深度优先获取的frame的顺序调用postMessage()方法发送指令给相应页面。

如果是自动化指令，提取出指令中的相关的frame的url信息，然后发送消息到相应frame。

步骤四、使用鼠标捕获元素。优选的，使用鼠标捕获元素时，先获取鼠标在页面的位置，然后调用document.elementFromPoint()获取鼠标所在位置的DOM对象，对于不同的frame,网页的document不同，所以会产生不同的结果。如果为null代表鼠标的位置不在当前frame所在的区域里面，如果当前位置为iframe标签时，判断是不是引入了跨域页面，如果没有可以直接获取里面的元素，否则就返回iframe元素的DOM对象。

步骤五、注入frame的脚本接收来自后台的指令并根据指令类型执行如下操作：

步骤1、脚本判断接收的脚本的类型：

如果是捕获页面元素指令，执行后续操作：

步骤(1)、等待鼠标使用步骤四中方法捕获元素。捕获到元素后，判断被捕获元素类型，如果是iframe元素，代表被捕获元素是跨域元素，且位于被捕获的iframe元素引入的页面里面，进行深度优先搜索，生成定位当前iframe元素的路径，可以使用Xpath，也可以使用自定义的定位路径，和当前frame的url以及一些其它的需要的属性一起，转发给后台。

如果被捕获的是普通的HTML元素而非iframe元素，代表被捕获元素在当前frame里面，进行深度优先搜索生成定位路径，可以使用Xpath，也可以使用自定义的定位路径，和当前frame的url以及其他属性一起打包，转发给后台。如果被捕获的是null，代表被捕获元素与当前frame无关，直接结束操作。

步骤(2)、后台接收来自脚本的消息，因为注入脚本和给脚本发送消息时，采用的都是深度优先获取frame的顺序，所以消息返回时，也是这种顺序，所以消息返回时，如果存在跨域的情况，也是根frame的消息先返回，所以只需要将定位消息按照顺序，整合成一条新的json消息转发给流程设计器，不需要将定位的路径整合，只需要按照顺序形成一个列表，和相应的属性一起转发给流程设计器，通过那个列表就可以在后续定位到被捕获的DOM对象。

如果指令为生成DOM树的指令，执行相关操作完成DOM的生成，具体为：

步骤A、将当前frame的页面的网页转换成可以用于数据传输的邻接表形式，生成邻接表时，对DOM树进行深度优先搜索，按照搜索的顺序给每个节点编号，调用接口给节点添加一个新属性用于存储当前节点的编号。遍历时，将每个编号所对应的节点的标签名和属性用字典保存。

第一遍遍历结束后，进行第二遍遍历，按照第一遍搜索赋予节点的编号建立DOM树对应的邻接表，每个节点对应一个编号，使用这些编号建立邻接表，将编号组成的邻接表和每个编号对应的节点的属性的字典，以及当前frame页面的url，包含当前frame中iframe元素节点的列表一起转发给后台。

步骤B、对于步骤A中后台接收到的消息，先不进行处理，只保存，在接收到所有frame的消息之后再处理，判断是否所有frame的消息都已经收到很容易，在注入的时候记录注入了多少个frame，根据收到消息的数目来判断是否已经全部都到了。

步骤C、对于步骤B中，如果当前页面的所有frame的DOM树消息都已经接收完毕，开始将这些来自不同的frame的邻接表整合成一个邻接表，进行统一编号。

优选的，先找到被处理页面的根frame，这个frame的frameId为-1，注入的时候记录每个frame的frameId和url，接收到根frame发送的消息后，取出消息里面包含iframe节点的列表，找到这些节点对应的编号，以及相应的frame发送过来的消息，将消息整合在一起，重新编号，形成新的DOM树，编号时，根frame页面的编号不变，另一个frame里面的节点编号值加上根frame的节点数目，重复操作，直到所有的邻接表整合成一个邻接表。

步骤D、邻接表整合完成后，由后台转发给流程设计器端。流程设计器根据收到的邻接表，将网页DOM树以目录的形式显示给用户。

如果后台收到的自动化指令，后台根据指令中提供的frame的信息转发给相应脚本，相应脚本接收到自动化指令之后，提取出指令中的定位消息，指令中会包含设计器提供的定位网页元素的数据，例如Xpath定位路径或其他定位路径，根据Xpath或其他能够定位的信息定位到当前frame中的相应元素，然后按照指令中的要求对被定位到的元素执行自动化操作。

本发明通过将浏览器插件中的background.js作为浏览器RPA系统中各个frame和脚本的后台，同时也作为脚本与流程设计器的中介，在注入脚本进入页面时，采用递归深度优先方式获取所有frame的方式，手动将脚本注入到所有的frame里面，而不是由插件自动的注入根frame里面，成功的实现了浏览器RPA系统定位跨域网页元素的功能，也实现了含有iframe引入的跨域网页的网页DOM树的生成。

Claims (8)

1.一种用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于包括如下步骤：

S1.浏览器加载插件，插件将脚本注入到网页中，获取到当前页面的所有的frame；

S2.流程设计器发送指令给后台，后台判断指令类型，并发送指令到相应的frame；

S3.注入frame的脚本收到后台发送的指令，判断指令类型，并进行相应的整合信息操作；

S4.流程设计器端接收后台处理过的数据，将json格式的数据解析出来显示给用户。

2.根据权利要求1所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S1，具体为采用深度优先遍历获取到当前页面的所有的frame。

3.根据权利要求2所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S1还包括将主页面当成一个frame，获取到的frame中包括iframe标签引入的跨域网页；按照获取frame时的顺序，手动注入脚本文件，也向跨域frame中注入脚本。

4.根据权利要求3所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S2，判断指令类型，具体包括若后台接收的不是自动化指令，按照注入脚本的顺序发送指令到待处理的网页的所有frame；若后台接收的是自动化指令，按照指令中包含的frame的信息，转发指令给相应的frame。

5.根据权利要求4所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S3，包括若接收到的指令是捕获页面元素指令，等待鼠标捕获网页的DOM对象；对被捕获的DOM对象进行预处理。

6.根据权利要求5所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于预处理过程包括：若被捕获的DOM对象不在当前页面内的iframe标签引入的页面中，注入当前frame的脚本会得到一个值为null的字符串，得到空字符串之后，直接结束操作；若被捕获的DOM对象在当前页面内的iframe标签引入的页面中，当前frame的脚本获取iframe元素的DOM对象，iframe标签引入的网页frame获取被捕获元素的DOM对象；页面的脚本收到指令后，处理网页并获取定位网页元素的信息，然后转发给后台，后台处理frame转发的信息，将所有数据整合成json格式信息，然后转发给流程设计器。

7.根据权利要求6所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S3，包括若接收到的指令是生成DOM树指令，脚本调用将网页转换成邻接表模块对当前页面进行处理，生成对应的邻接表，把邻接表和当前页面的url和页面的iframe节点信息打包，转换成json格式的消息，发送给后台；后台接收来自各个frame的信息，按照接收信息的顺序，frame的url和iframe节点信息，判断出各个iframe节点对应的frame信息，将来自不同的frame的邻接表整合成一个邻接表，接收到所有信息后，将所有信息整合成json格式数据，然后将整合好的DOM树的邻接表信息发送给流程设计器。

8.根据权利要求7所述的用于浏览器RPA系统的跨域元素定位与树生成方法，其特征在于步骤S3，包括若接收到的指令是自动化指令，提取出指令中的定位信息并定位到相关DOM，然后执行指令中所包含的自动化操作。

Images