通过MeterSphere的UI测试模块实现H5翻页测试

发布于 2023年03月29日

编者注:本文为CSDN博主hxe116的原创文章。

原文链接:https://blog.csdn.net/hxe116/article/details/129274171

随着业务的发展与信息传播形式的逐渐多样化,越来越多的公司使用H5活动页辅助宣传、推广、公司介绍等工作。H5,即HTML5,是集文字、图片、音乐、视频、链接等多种形式于一体的展示页面。H5页面的流行带动了针对其的测试需求,其中也包含了UI自动化测试工作。

作为一款一站式开源持续测试平台,MeterSphere涵盖测试跟踪、接口测试、UI测试和性能测试等功能模块,兼容JMeter、Selenium等主流开源标准。

其中,MeterSphere的UI测试模块提供了录制能力,能够极大地提升脚本新建和维护的效率。使用MeterSphere平台可以实现H5页面的UI自动化测试,借助Selenium IDE录制工具,能够快速生成H5页面的UI自动化测试脚本。以下就是通过MeterSphere的UI自动化测试模块实现H5翻页的具体操作步骤。

一、录制H5页面,快速生成UI自动化脚本

1. 使用Selenium IDE插件录制H5脚本

在浏览器中安装Selenium IDE插件后,选择“Selenium IDE”插件开始录制脚本;

1.png根据实际情况选择开始情况,这里选择“Create a new project”选项,创建一个全新的录制;

2.png输入项目名称;

3.png选择“录制”按钮,输入H5页面的地址,点击开始录制按钮;

4.png在浏览器中进行的任何操作,Selenium IDE插件几乎都会抓取到;

5.png在浏览器中操作完毕后,可以点击结束录制按钮直接关闭脚本的录制。

6.png2. 将脚本导入MeterSphere UI测试模块

保存使用Selenium IDE插件录制的脚本,保存时选择默认的SIDE格式即可;

7.pngSelenium IDE录制的脚本,可以直接导入至MeterSphere的UI模块中。在MeterSphere平台选择“UI测试”→“UI自动化”→“更多操作”→“导入”即可;

8.png在“场景导入”选项卡中可以直接加载Selenium IDE录制的脚本;

9.png完成导入后可以查看到脚本已被导入到UI自动化测试的脚本列表中。

10.png二、模拟H5页面滑动

对于模拟H5页面在手机上滑动翻页,当用Selenium IDE插件录制时,此插件无法抓取到这个滑动操作。这时需要手动在页面中定位,进入页面的研发调试模式定位所需要的控件;

11.png
1. H5当前页面翻页

H5页面中的控件,几乎都是滑动到当前页才会显示,并且此刻才可用。模拟实际滑动页面的方式,依据每个H5前端采用的技术有少许差异,这里介绍通过定位div控件的方式实现滑动。

1.1 获取当前屏幕中底部元素,在元素上点击鼠标右键后,选择“复制”→“复制JS路径”,通过document.querySelector(“#InformationCompletion_Div >……> input”)获取“证件号码”;

12.png

13.png

1.2 输出“证件号码”后,使用scrollIntoView方法实现页面滑动;

在“证件号码”节点的后置操作中添加后置脚本,通过该元素的scrollIntoView方法实现滑动;

14.png为了方便调试,也可以在后置脚本后添加截图操作,在生成的实时报告中就可以看到结果是否符合预期。

15.png2. H5页面中页签模式的翻页

H5页面中出现类似页签样式的页面时,如下图所示,在最初的页面中,最底部的“请下拉阅读全部条款内容”的按钮为灰色不可点击的。只有当用户滑动页面逐一查阅全部条款后,最底部的“阅读全部条款”按钮才可点击,页面底部的“确认”控件才可用。这种场景就不能使用上述第一种方式来实现滑动。

16.png如上图,页面一共有4个页签,并且每个页签内容大小不一,滑动的次数也不一样。这里就需要检查此页面的前端代码,确定页面底部元素;

17.png确认底部元素后,同样也可以使用scrollIntoView进行滑动;

18.png此时需要注意,根据实际页面信息量的情况,在滑动后需要添加等待时间,或者一次滑动不足以到底部的话,可以进行多次滑动。

19.png三、其他操作

1. 等待使用技巧

MeterSphere平台中提供的流程控制功能,以及元素细节方法还是非常全面的。比如:很多时候有些元素出现的时间不确定,在UI自动化脚本执行时,有时可以成功,有时则会失败。

这种情况下就可以在关键节点添加相关控制,比如添加流程控制if元素,同时配合等待操作来控制提高自动化脚本的质量。其作用就是,当元素被抓取到了就执行,否则就继续等待,直到该元素被找到后再执行。

20.png21.png
2. 手动获取元素技巧

脚本中书写的控件,可以点击鼠标右键,在弹出的菜单中选择“复制JS路径”选项进行获取。

22.png