使用这个工具，本地调试UI再也不用怕了

都是月亮惹的祸

前言：在我们日常使用中，很多场景都会用到UI自动化，通用的都是Python+Selenium的方式。今天介绍一种，不用通过代码，直接通过页面可视化配置的方式，就可以完成我们想要的自动化场景。话不多说，正片开始。

一、MeterSphere 介绍

官方网站信息很多，详细信息请直接查看。 MeterSphere 是一站式开源持续测试平台，涵盖测试跟踪、接口测试、UI 测试和性能测试等，全面兼容 JMeter、Selenium 等主流开源标准，能够有效助力开发和测试团队在线共享协作，实现端到端的测试管理跟踪可视化、自动化测试、性能测试及融入持续交付 DevOps 体系，并充分利用云弹性进行高度可扩展的自动化测试，从而加速高质量的软件交付，推动中国测试行业整体效率的提升。



image.png

二、UI本地调试配置

我们今天的主题是UI本地调试，如果想了解其他功能，可以去官网查看，官网东西很丰富，写的也比较全面。
2.1 MeterSphere 远程调用浏览器实现原理

MeterSphere 调起浏览器的动作其实是由浏览器驱动完成的。因为 MeterSphere 封装了 JMeter 的相关操作交由内部使用，所以在进行UI调试操作时，会调用到 JMeter 引擎。JMeter 通过 MeterSphere 配置的 RemoteDriverConfig 找到对应的 Selenium-server地址，以及所需要调起的浏览器信息（例如 Chrome、Firefox 等），并与 Selenium-server 建立 WebSocket 连接，进而使用Selenium-server 中配置的浏览器的驱动信息，通过浏览器驱动来完成浏览器的调起。



image.png

2.2 MeterSphere 远程调用浏览器配置过程

2.2.1 下载驱动程序

百度网盘链接：https://pan.baidu.com/s/1ya5orSd36fZFJchUltxfjA?pwd=yt5v

• 网盘程序中包含100.0.4896.127版本的 Mac OS、Windows 的 ChromeDriver 插件，其他版本请通过 chromedriver下载替换（驱动名称与程序中的驱动名称一致）即可。
  
• 浏览器版本号与浏览器驱动只需对应前三段即可，例如100.0.4896.127。
  

image.png



image.png

下载驱动重点已经加粗，如有问题，请仔细查看
2.2.2  运行驱动程序

Windows 操作系统

解压附件中的压缩包到自定义目录，双击“windows-start.bat”运行即可。



image.png

看到如下日志则证明已经运行成功。



image.png

Mac OS 操作系统

本地需要装有 JDK 环境，并且配置好环境变量。 解压附件中的压缩包到自定义目录，在终端中进入文件目录，执行sh mac-start.sh即可。 如果没有执行权限，则需在 mac-start.sh文件所在目录执行 chmod 777 mac-start.sh命令。



image.png

运行时默认会启动 19091 端口，若需要更改则需要编辑 bat 文件进行调整，具体细节请参考脚本参数说明。 脚本参数说明：

**	参数名	默认值
启动端口	--port	19091
配置Chrome驱动地址	-Dwebdriver.chrome.driver	当前drivers目录下的chromedriver
配置Firefox驱动地址	-Dwebdriver.gecko.driver	当前drivers目录下的geckodriver

2.2.3 将本地运行 Selenium-server 配置到 MeterSphere 平台

登录 MeterSphere 平台，进入“个人信息”→“UI设置”，将步骤2中启动的server地址（如http://192.168.0.114:19091）配置到本地Selenium-server 地址中。 UI设置菜单需要在权限中开启，目前仅项目管理员（系统）用户组默认开启。



image.png

特别注意：以上配置是基于 MeterSphere 服务端和本机在同一网络环境下进行的配置。如不在同一网络环境下，则需要使用 VPN 虚拟专用网络；当MeterSphere 服务端可以访问公网时，直接让本地Selenium-server地址映射到公网访问即可。
这里介绍一种简单的公网访问调试工具。
2.3 一个好用的在线内网穿透工具

1APM 1APM 的内网穿透, 仅利用 ssh 提供的 tunnel 功能, 无需额外安装任何软件, 不要自行车,干净又卫生



image.png

非常简洁的一个工具，我们注册账号登录进去就好。
2.3.1 修改端口启动穿透

我们登录进去之后，会看到这个页面



image.png

这里我们把端口修改成： 19091 然后复制命令，直接执行命令



image.png

密码是默认密码：123456 ，看到以下页面就可以在公网访问了。



image.png



image.png

然后我们配置这个映射出来的地址：https://343347634.tunnel.1apm.com，点击确定。



image.png

保存之后，在UI模块点击本地调试即可。


三、总结

以上就是我们通过MeterSphere实现本地UI自动化的配置，需要注意几个点：

• 浏览器版本驱动一定要对。
  
• MeterSphere服务器要跟本机网络在同一个网络下。
  
• 一定要配置本地Selenium的地址信息。