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

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

背景技术：

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

技术特征：

1.一种可视化页面操作元素的方法，其特征在于，具体包括以下步骤：

2.根据权利要求1所述的一种可视化页面操作元素的方法，其特征在于，所述步骤s1具体包括以下步骤：

3.根据权利要求2所述的一种可视化页面操作元素的方法，其特征在于，步骤s11中所述据所述自动化脚本内容识别页面操作元素的具体操作为：正则匹配所述自动化脚本内容，匹配得到包括selenium关键字的行，并以字符串的方式拼接出待插入的截图代码。

4.根据权利要求1所述的一种可视化页面操作元素的方法，其特征在于，所述映射配置文件的内容为所述页面操作元素截图的文件路径与页面操作元素关键字的对应关系。

5.根据权利要求1所述的一种可视化页面操作元素的方法，其特征在于，所述步骤s3具体包括以下步骤：

6.根据权利要求2所述的一种可视化页面操作元素的方法，其特征在于，步骤s11中所述遍历所述自动化脚本获取自动化脚本内容的具体操作为：调用sdk工具包中的editor对象提供的文本编辑editor.get方法，遍历自动化脚本获取自动化脚本内容。

7.根据权利要求1-6任一项所述的一种可视化页面操作元素的方法，其特征在于，所述截图方法为screenshot（）函数。

8.一种可视化页面操作元素的系统，其特征在于，包括采集单元、配置单元、可视化单元；

9.一种电子设备，其特征在于，包括存储器和处理器，所述存储器用于存储计算机程序；当所述计算机程序在所述处理器上执行时，实现如权利要求1-7任一项所述的可视化页面操作元素的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机指令；当所述计算机指令在如权利要求9所述的电子设备上执行时，实现如权利要求1-7任一项所述的可视化页面操作元素的方法。

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

技术研发人员：郑永波,王瑞,国路,陈泉有
受保护的技术使用者：成都安恒信息技术有限公司
技术研发日：
技术公布日：2024/1/15