MeterSphere的 UI自动化测试实现H5翻页

MeterSphere UI自动化测试H5

随着公司业务的发展，目前产生越来越多的H5页面的测试需求，同时这部分也需要进行UI自动化测试。MeterSphere 的UI自动化测试提供了录制能力，对于脚本的新建、维护非常提效。这里用MeterSphere 实现H5页面UI自动化测试，借助selenium IDE录制工具，快速生成了H5 UI自动化测试脚本。

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

1.1 seleniumIDE录制H5脚本

在浏览器中安装seleniumIDE插件后，选择IDE插件开始录制脚本

根据实际情况选择开始情况，这里选择“Create a new project”，创建一个全新的录制

输入项目名称

选择“录制”，输入H5页面的地址，点击开始

在浏览器中操作的任何操作，seleniumIDE都会抓取到

在浏览器中操作完毕后，可以直接关闭脚本的录制

1.2 脚本导入MeterSphere UI测试

保存selenium IDE录制的脚本，此录制的脚本，保存默认side格式。

seleniumIDE录制的脚本，直接导入至MeterSphereUI中。选择MeterSphere UI测试>>>UI自动化>>>更多操作>>>导入

这里直接加载SeleniumIDE录制的脚本

脚本被导入到UI自动化测试脚本列表中

2、模拟H5页面滑动

在用seleniumIDE录制时，发现此工具无法抓取到页面滑动操作。这时只能手动在页面中定位，进入页面的研发调试模式定位所需要的控件

2.1、H5当前页面翻页

H5页面中的控件，几乎都是滑动到当前页才显示，并且此刻才可用。模拟实际滑动页面的方式，依据每个H5前端采用的技术有少许差异，这里介绍通过定位div控件的方式实现滑动。
1、获取当前屏幕中底部元素的JS路径，如下图，获取“证件号码”，document.querySelector(“#InformationCompletion_Div >……> input”)

输出“证件号码”后，使用scrollIntoView方法实现页面滑动。
在“证件号码”节点的后置操作添加后置脚本，通过该元素的scrollIntoView方法实现滑动。

为了方便调试，也可以在后置脚本后面添加截图，在生成的实时报告里就能看到结果是否符合预期。

2.2、H5页面中页签模式的翻页

H5页面中出现类似页签模式，只有用户查阅时滑动到最底部，页面底部的 【确认控件】才可用。这里就不能使用上述第一种方式实现滑动。

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

确认底部元素后，同样也可以使用scrollIntoView进行滑动。

此需要注意，根据实际页面信息大小情况，在滑动后需要添加等待时间，或者一次滑动不到底，可以多次滑动。

3、其他

3.1 等待使用技巧

MeterSphere提供的流程控制，和元素细节方法，还是非常全面的。比如：很多时候有些元素出现的时间不确定，UI自动化脚本执行时，有时可以成功，有时失败。这里可以在关键节点添加相关控制：比如：添加流程控制if，同时配合等待来控制提高自动化脚本的质量。作用就是，当元素取到就执行，否则就等待，直到该元素找到后在执行。

3.2 手动获取元素技巧

1、脚本中书写的控件，可以使用鼠标右键的方式选择【复制JS路径】获取。