一种可视化页面操作元素的方法、系统、设备及介质

技术领域

本发明涉及自动化技术领域，具体地说，涉及一种可视化页面操作元素的方法、系统、设备及介质。

背景技术

Selenium是一个用于Web应用程序测试的工具，通过编写和运行相应的selenium自动化脚本，可以完成web页面的自动化测试。但是，由于selenium是通过网页各元素的id、name等属性来定位并页面操作元素，因此当我们写完自动化脚本后，自动化脚本里将会出现大量的id、name等，时间久了，我们无法直观的通过脚本看出操作的id、name等具体对应页面上的哪个元素，必须实际运行该脚本并打断点才能知道某步操作具体操作了哪个页面元素。

现有技术均只利用selenium做自动化的相关开发，并未涉及selenium自动化代码的调试和维护优化。仅凭代码很难直观的知道每一步具体在操作哪个元素，做什么事，如果代码量大幅增加，该问题更突出，存在代码可读性不高且调试效率低的问题。

发明内容

本发明针对上述自动化脚本可读性不高、调试效率低的问题，提出一种可视化页面操作元素的方法、系统、设备及介质；该方法首先获取当前页面操作元素截图；然后生成映射配置文件；最后绑定页面操作元素截图和页面操作元素关键字可视化页面操作元素截图；自动展示该代码操作的页面元素的截图，查看脚本时可以很直观的知道每一步代码操作的元素和效果，避免了必须实际运行该脚本才能知道具体操作的问题，降低了代码的调试和维护成本，大大提高了可读性和调试效率。

本发明具体实现内容如下：

一种可视化页面操作元素的方法，具体包括以下步骤：

步骤S1：识别获取的自动化脚本的页面操作元素，并在所述页面操作元素后插入截图方法，获取当前页面操作元素截图；

步骤S2：根据所述页面操作元素截图和页面操作元素关键字生成映射配置文件；

步骤S3：根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字，并调用SDK工具包生成预览接口，可视化所述页面操作元素截图。

为了更好地实现本发明，进一步地，所述步骤S1具体包括以下步骤：

步骤S11：获取自动化脚本，遍历所述自动化脚本获取自动化脚本内容，并根据所述自动化脚本内容识别页面操作元素；

步骤S12：在所述页面操作元素后插入截图方法，根据所述截图方法获取当前页面操作元素截图，并将所述页面操作元素的操作名称作为截图命令。

为了更好地实现本发明，进一步地，步骤S11中所述据所述自动化脚本内容识别页面操作元素的具体操作为：正则匹配所述自动化脚本内容，匹配得到包括selenium关键字的行，并以字符串的方式拼接出待插入的截图代码。

为了更好地实现本发明，进一步地，所述映射配置文件的内容为所述页面操作元素截图的文件路径与页面操作元素关键字的对应关系。

为了更好地实现本发明，进一步地，所述步骤S3具体包括以下步骤：

步骤S31：根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字；

步骤S32：调用SDK工具包的鼠标mouse事件监听方法，监听鼠标触发操作，若鼠标悬停于所述映射配置文件中的页面操作元素关键字时，调用SDK工具包中的dialog对话框函数，将所述页面操作元素截图展示在所述对话框中；

步骤S33：调用SDK工具包生成预览接口，可视化所述对话框。

为了更好地实现本发明，进一步地，步骤S11中所述遍历所述自动化脚本获取自动化脚本内容的具体操作为：调用SDK工具包中的Editor对象提供的文本编辑editor.get方法，遍历自动化脚本获取自动化脚本内容。

为了更好地实现本发明，进一步地，所述截图方法为screenshot()函数。

基于上述提出的可视化页面操作元素的方法，为了更好地实现本发明，进一步地，提出一种可视化页面操作元素的系统，包括采集单元、配置单元、可视化单元；

所述采集单元，识别获取的自动化脚本的页面操作元素，并在所述页面操作元素后插入截图方法，获取当前页面操作元素截图；

所述配置单元，用于根据所述页面操作元素截图和页面操作元素关键字生成映射配置文件；

所述可视化单元，根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字，并调用SDK工具包生成预览接口，可视化所述页面操作元素截图。

基于上述提出的可视化页面操作元素的方法，为了更好地实现本发明，进一步地，提出一种电子设备，包括存储器和处理器，所述存储器用于存储计算机程序；当所述计算机程序在所述处理器上执行时，实现上述的可视化页面操作元素的方法。

基于上述提出的可视化页面操作元素的方法，为了更好地实现本发明，进一步地，提出一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机指令；当所述计算机指令在上述的电子设备上执行时，实现上述的可视化页面操作元素的方法。

本发明具有以下有益效果：

(1)本发明通过页面操作元素截图生成映射配置文件；并绑定页面操作元素截图和页面操作元素关键字可视化页面操作元素截图；实现了自动展示操作代码的页面元素的截图，查看脚本时可以很直观的知道每一步代码操作的元素和效果，避免了必须实际运行该脚本才能知道具体操作的问题，降低了代码的调试和维护成本，大大提高了可读性和调试效率。

(2)本发明生成并插入的截图代码为内部自动生成，实际代码中不可见，不影响实际代码执行。并在代码运行过一次之后，再次查看代码时，鼠标悬停在各元素上即会悬浮窗展示该元素截图，后续不再运行代码也能知道每一步的具体操作，大大提高了代码的可读性和调试效率。

(3)本发明通过使用不同集成开发环境的SDK开发后，可以统一封装成系统插件，实现了一个系统在多个工具上的使用。

附图说明

图1为本发明提供的可视化显示结果示意图。

具体实施方式

为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；也可以是直接相连，也可以是通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

本发明实施例中涉及的专业术语及英文缩写对应的完整英文如下：

Selenium：Selenium是一个用于Web应用程序测试的工具，提供了一系列定位和操纵网页元素的方法，可实现网页的自动化测试。

集成开发工具：代码编写、查看和调试工具，如pycharm、eclipse、vscode等。

SDK：集成开发环境提供给用户进行扩展开发的工具包。

Web元素：Web页面上可见的各种按钮、输入框、图片等。

元素定位方法：Selenium提供的元素定位方法，可以通过元素id ameclass_name等对元素进行定位，如：

find_element_by_id()；

find_element_by_name()；

find_element_by_class_name()；

find_element_by_tag_name()；

find_element_by_link_text()；

find_element_by_partial_link_text()；

find_element_by_xpath()；

find_element_by_css_selector()。

实施例1：

本实施例提出一种可视化页面操作元素的方法，具体包括以下步骤。

步骤S1：识别获取的自动化脚本的页面操作元素，并在所述页面操作元素后插入截图方法，获取当前页面操作元素截图。

进一步地，所述步骤S1具体包括以下步骤：

步骤S11：获取自动化脚本，遍历所述自动化脚本获取自动化脚本内容，并根据所述自动化脚本内容识别页面操作元素。

进一步地，步骤S11中所述据所述自动化脚本内容识别页面操作元素的具体操作为：正则匹配所述自动化脚本内容，匹配得到包括selenium关键字的行，并以字符串的方式拼接出待插入的截图代码。

进一步地，步骤S11中所述遍历所述自动化脚本获取自动化脚本内容的具体操作为：调用SDK工具包中的Editor对象提供的文本编辑editor.get方法，遍历自动化脚本获取自动化脚本内容。

步骤S12：在所述页面操作元素后插入截图方法，根据所述截图方法获取当前页面操作元素截图，并将所述页面操作元素的操作名称作为截图命令。

步骤S2：根据所述页面操作元素截图和页面操作元素关键字生成映射配置文件。

进一步地，所述映射配置文件的内容为所述页面操作元素截图的文件路径与页面操作元素关键字的对应关系。

步骤S3：根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字，并调用SDK工具包生成预览接口，可视化所述页面操作元素截图。

进一步地，所述步骤S3具体包括以下步骤：

步骤S31：根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字；

步骤S32：调用SDK工具包的鼠标mouse事件监听方法，监听鼠标触发操作，若鼠标悬停于所述映射配置文件中的页面操作元素关键字时，调用SDK工具包中的dialog对话框函数，将所述页面操作元素截图展示在所述对话框中；

步骤S33：调用SDK工具包生成预览接口，可视化所述对话框。

其中，本实施例使用的截图方法为screenshot()函数。

工作原理：本实施例首先获取当前页面操作元素截图；然后生成映射配置文件；最后绑定页面操作元素截图和页面操作元素关键字可视化页面操作元素截图；自动展示该代码操作的页面元素的截图，查看脚本时可以很直观的知道每一步代码操作的元素和效果，避免了必须实际运行该脚本才能知道具体操作的问题，降低了代码的调试和维护成本，大大提高了可读性和调试效率。

实施例2：

本实施例在上述实施例1的基础上，如图1所示，以一个具体的实施例进行详细说明。

在实现一个新建用户功能web自动化测试时，我们可能需要如下几步：

步骤1：点击新建用户按钮进入新建用户页面；

步骤2：点击用户名输入框输入用户名；

步骤3：点击用户密码输入框输入用户密码；

步骤4：点击确认密码输入框再次输入用户密码；

步骤5：点击用户手机输入用户手机信息；

步骤6：点击用户邮箱输入用户邮箱信息；

步骤7：选择用户性别；

步骤8：点击确认按钮；

……

翻译为伪代码大致如下：

1、find_element_by_id(“id1”).click#对应步骤1；

2、find_element_by_id(“id2”).input(“xx”)#对应步骤2；

3、find_element_by_id(“id3”).input(“xxx”)#对应步骤3；

4、find_element_by_id(“id4”).input(“xxx”)#对应步骤4；

5、find_element_by_id(“id5”).input(“xxx”)#对应步骤5；

6、find_element_by_name(“name1”).input(“xxxx”)#对应步骤6；

7、find_element_by_name(“name2”).click()#对应步骤7；

8、find_element_by_name(“name3”).click()#对应步骤8；

可见，仅凭上述代码，我们很难直观的知道每一步具体在操作哪个元素，做什么事，如果代码量大幅增加，该问题更突出。而如果当我们鼠标悬停在每一步上面时，自动展示该步骤操作的元素的截图，如鼠标悬停在上述第一步find_element_by_id(“id1”).click上时，自动展示新建用户按钮的截图，鼠标悬停在上述第二步find_element_by_id(“id2”).input(“xx”)上时，自动展示用户名输入框的截图，则可以不需要运行该代码就能很直观的知道其操作过程。

本实施例通过自动对脚本运行时操作的元素进行截图并调用相应集成开发工具的SDK，完成当鼠标虚浮于指定代码步骤上时，自动展示该代码操作的页面元素的截图，使得我们查看代码时，可以很直观的知道每一步代码操作的元素和效果，具体包括以下步骤。

步骤S1：代码识别、插入。通过对比代码文件内容，识别出代码文件内容中的元素操作代码，并在其后插入截图方法。具体而言，可以遍历代码内容，当匹配到selenium提供的几种元素定位方法如find_element_by_id(“id1”)等时即在其后插入selenium提供的截图方法screenshot()，对当前元素进行截图，并以其用于定位的id、name等为截图命令，方便后续截图与元素匹配。一份代码本质是一个文件，文件里的所有代码行就是代码内容，如当前这个word文档里的每一行字就是这个word文档的内容一样。

以pycharm为例，实现细节为：

利用pycharm SDK中的Editor对象提供的文本编辑editor.get相关方法获取当前所有代码类容。

遍历获取的代码内容，通过正则匹配出包含selenium关键字的代码行，通过字符串拼接的方式拼接出待插入的截图代码，如匹配到行内容为：

find_element_by_id(“id1”).click时，拼接出待插入的截图代码；

find_element_by_id(“id1”).screenshot(“id1.png”)，并将之插入在匹配行之后。完成截图功能。

识别出元素操作，准确的说应该说是识别出元素操作代码。一份代码文件中有很多的代码，有的在页面操作元素，有的在做别的事情，我们想要在页面操作元素的代码上进行元素的图片展示，不页面操作元素的不做处理，因此就需要将页面操作元素的代码识别出来，页面操作元素的代码可能是单独的一行，也可能只是一行中的一部分代码。

如有一个叫test.py的代码文件，其内容如下：

test.py:

if 1+1＝＝2:

find_element_by_id(“id1”).click

else:

find_element_by_id(“id1”).click

其中，所有四行代码都是代码内容，但是只有第二行和第四行做了元素操作，因此蓝第二行和第四行的两部分就是我们要识别的元素操作代码。这里识别出来的两个代码文本find_element_by_id(“id1”)和find_element_by_id(“id2”)，也就是后文中说的关键字，后续当阅读代码的人将鼠标悬停于这两个关键字上时，就会展示这两个关键字对应的元素的截图。

元素操作准确的说是指进行了元素操作代的码，就是一份代码中进行了元素操作的代码片段。具体而言就是使用了selenium中定义的定位元素的方法，只要某行代码或某行代码中的某部分包含了这些定位操作之一，都算是元素操作代码，也就是我们需要匹配出来的关键字。

具体的匹配方式是通过正则表达式实现，正则表达式是一种可以从任意文本内容中匹配出我们想要的特殊文本片段的方法。

比如我们想要从一个使用了上述元素定位方法的代码文件中匹配出我们想要的各元素定位代码片段，那么其正则表达式大致如下：

find_element_by([id|name|class_name|…])(*)。

步骤S2：截图收集、映射。将步骤S1代码初次运行后的所获得的各步骤操作的元素的截图统一保存至本地，生成截图与关键字的映射配置文件，供后续使用。映射配置文件内容为截图文件路径与关键字的对应关系，如：

find_element_by_id(“id1”)：/screenshot/id1.png；

find_element_by_id(“id2”)：/screenshot/id2.png；

find_element_by_id(“id3”)：/screenshot/id3.png；

各步骤操作的元素的截图包含了元素定位方法的代码片段，也就是关键字。一般自动化代码都是一步一步的，一步操作一个元素，也就是一步里面就有一个页面操作元素的代码片段即关键字。

步骤S3：截图展示。通过使用各类集成开发环境如pycharm等官方提供的SDK，将步骤S2收集的截图与其对应元素绑定，当鼠标悬浮在对应代码关键字上时，自动展示其对应的截图。以pycharm为例，具体实现细节如下：

使用pycharm SDK中的鼠标mouse事件监听方法，当鼠标悬停于配置文件中包含的关键字时，调用pycharm SDK中的对话框dialog相关函数，将配置文件中该关键字对应的路径下截图展示在对话框中。当鼠标焦点移出时，对话框消失。

结合图1，以一个具体的操作过程进行说明。

原始代码：

find_element_by_id(“id1”).click()；

find_element_by_id(“id2”).input(“xx”)；

find_element_by_id(“id3”).input(“xxx”)；

find_element_by_id(“id4”).input(“xxx”)；

find_element_by_id(“id5”).input(“xxx”)；

find_element_by_name(“name1”).input(“xxxx”)；

find_element_by_name(“name2”).click()；

find_element_by_name(“name3”).click()；

经过步骤S1处理后代码(插入的代码实际不可见)：

find_element_by_id(“id1”).click；

find_element_by_id(“id1”).screenshot(“id1.png”)；

find_element_by_id(“id2”).input(“xx”)；

find_element_by_id(“id2”).screenshot(“id2.png”)；

find_element_by_id(“id3”).input(“xxx”)；

find_element_by_id(“id3”).screenshot(“id3.png”)；

find_element_by_id(“id4”).input(“xxx”)；

find_element_by_id(“id4”).screenshot(“id4.png”)

find_element_by_id(“id5”).input(“xxx”)

find_element_by_id(“id5”).screenshot(“id5.png”)；

find_element_by_name(“name1”).input(“xxxx”)；

find_element_by_name(“name1”).screenshot(“name1.png”)；

find_element_by_name(“name2”).click()；

find_element_by_name(“name2”).screenshot(“name2.png”)；

步骤S2收集的截图：

find_element_by_id(“id1”)：/screenshot/id1.png

find_element_by_id(“id2”)：/screenshot/id2.png

find_element_by_id(“id3”)：/screenshot/id3.png

步骤S3可视化展示的效果如图1所示。

本实施例的其他部分与上述实施例1相同，故不再赘述。

实施例3：

本实施例在上述实施例1-实施例2任一项的基础上，提出一种可视化页面操作元素的系统，包括采集单元、配置单元、可视化单元；

所述采集单元，识别获取的自动化脚本的页面操作元素，并在所述页面操作元素后插入截图方法，获取当前页面操作元素截图；

所述配置单元，用于根据所述页面操作元素截图和页面操作元素关键字生成映射配置文件；

所述可视化单元，根据所述映射配置文件，绑定所述页面操作元素截图和所述页面操作元素关键字，并调用SDK工具包生成预览接口，可视化所述页面操作元素截图。

本实施例还提出一种电子设备，包括存储器和处理器，所述存储器用于存储计算机程序；当所述计算机程序在所述处理器上执行时，实现上述的可视化页面操作元素的方法。

本实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机指令；当所述计算机指令在上述的电子设备上执行时，实现上述的可视化页面操作元素的方法。

本申请实施例涉及的处理器可以是一个芯片。例如，可以是现场可编程门阵列(field programmable gate array，FPGA)，可以是专用集成芯片(application specificintegrated circuit，ASIC)，还可以是系统芯片(system on chip，SoC)，还可以是中央处理器(central processor unit，CPU)，还可以是网络处理器(network processor，NP)，还可以是数字信号处理电路(digital signal processor，DSP)，还可以是微控制器(microcontroller unit，MCU)，还可以是可编程控制器(programmable logic device，PLD)或其他集成芯片。

本申请实施例涉及的存储器可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(read-onlymemory，ROM)、可编程只读存储器(programmable ROM，PROM)、可擦除可编程只读存储器(erasable PROM，EPROM)、电可擦除可编程只读存储器(electrically EPROM，EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory，RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(static RAM，SRAM)、动态随机存取存储器(dynamic RAM，DRAM)、同步动态随机存取存储器(synchronous DRAM，SDRAM)、双倍数据速率同步动态随机存取存储器(doubledata rateSDRAM，DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM，ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM，SLDRAM)和直接内存总线随机存取存储器(directrambus RAM，DR RAM)。应注意，本文描述的系统和方法的存储器旨在包括但不限于这些和任意其它适合类型的存储器。

应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的模块及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个设备，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个设备，或者也可以分布到多个设备上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能模块可以集成在一个设备中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个设备中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式来实现。该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或者数据中心通过有线(例如同轴电缆、光纤、数字用户线(Digital Subscriber Line，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可以用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质(例如，软盘、硬盘、磁带)，光介质(例如，DVD)、或者半导体介质(例如固态硬盘(Solid State Disk，SSD))等。

本实施例的其他部分与上述实施例1-实施例2任一项相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。