操作教程|MeterSphere UI测试+VNC:简单、快捷地查看UI测试实时执行详情

发布于 2023年12月27日

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

原文链接为:https://blog.csdn.net/hxe116/article/details/134714960?spm=1001.2014.3001.5502

作为一款一站式的开源持续测试平台,MeterSphere涵盖了测试跟踪、接口测试、UI测试和性能测试等功能模块,全面兼容JMeter、Selenium等主流开源标准。MeterSphere的UI自动化测试可以通过“本地调试”功能来实现UI测试回放,其相关配置手册可参见MeterSphere官方文档:《MeterSphere的UI测试模块如何远程调用浏览器?》(https://blog.fit2cloud.com/?p=3512)。

与此同时,MeterSphere也提供VNC服务,用户可以在MeterSphere平台之上,借助VNC服务简单、快捷地实时回放UI自动化测试的执行详情。VNC(Virtual Network Console,虚拟网络控制台)是一种被广泛使用的远程控制工具软件。以下就是在MeterSphere平台上进行VNC配置的具体方法及相关说明。

需要说明的是,以下所涉及的操作步骤基于MeterSphere v2.10 LTS版本实现。2023年5月,MeterSphere开源持续测试平台发布了v2.10 LTS(Long Term Support)版本,MeterSphere开源项目组会定期基于v2.10 LTS版本升级小版本。

1. 开启MeterSphere UI测试服务的VNC端口

1.1 修改MeterSphere UI测试配置文件

使用路径“/opt/metersphere/docker-compose-seleniarm.yml”在MeterSphere中修改UI测试配置文件。在修改VNC相关配置信息时需要注意:

① 将SE_START_VNC设置为true;
SE_VNC_PASSWORD的默认值为“Password123@selenium”,该值可以自定义修改;
③ 如果使用Chrome浏览器进行UI测试,则需要修改chrome相关配置下的VNC属性,将
SE_START_VNC设置为true;

图1 chrome.png④ 如果使用Firefox浏览器进行UI测试,则需要修改firefox相关配置下的VNC属性,将SE_START_VNC设置为true。

图2 Firefox.png1.2 重新加载MeterSphere服务

reload命令重启MeterSphere服务,命令为:msctl reload

图3 reload.png2. 使用远程VNC服务查看UI测试的实时执行情况

2.1 MeterSphere相关设置

在MeterSphere中选择“系统设置”→“系统参数设置”,配置selenium-grid地址信息。

图4 MS配置.png2.2 打开远程VNC,查看UI测试实时执行情况

复制2.1章节中在MeterSphere中配置的selenium-gird地址,粘贴至浏览器中并进入该地址,即可打开Selenium Gird页面。打开Selenium Gird页面左侧的“Sessions”选项卡,可以在该选项卡中看到正在执行的UI测试的相关信息。然后,点击“Session”列内项目前的放映机式样按钮。

图5 selenium grid网页.png点击放映机式样按钮后,系统会自动打开VNC服务。输入VNC密码(该密码为1.1章节所述配置文件中“SE_VNC_PASSWORD”设置的值)。

图6 selenium grid 网页密码.png输入密码后,用户就可以观看UI测试的实时执行详情了。

图7 远程查看.png3. 使用本地VNC查看UI测试的实时执行情况

3.1 下载VNC软件

从VNC官方网站下载VNC安装包即可,链接为:https://www.realvnc.com/en/connect/download/viewer/。

3.2 安装VNC

安装VNC工具。

图8 安装VNC.png如果没有特殊要求,可以全部选择默认选项,点击“Next”按钮,直至安装完成。

图9 next.png3.3 配置VNC

安装完成后,运行VNC。进入VNC后,在菜单栏中选择“File”→“New connection...”。

图10 配置VNC.png补充VNC Server信息。填写2.1章节中在MeterSphere中配置的selenium-grid地址即可。

图11 VNC服务器.png点击“OK”按钮后,在列表中可以看到创建完毕的VNC链接。

图12 链接.png3.4 执行VNC,查看UI测试的实时执行详情

选择创建完毕的VNC链接,输入密码(该密码为1.1章节所述配置文件中“SE_VNC_PASSWORD”设置的值)。

图13 本地VNC密码.png连接成功后,就可以查看UI测试的实时执行详情了。

图14 本地查看.png