MeterSphere 的 UI 自动化如何实现文件上传的场景
  ytXF8ujKKYXO 2023年11月02日 69 0

实际项目中,文件/图片上传的场景较多。本文以百度上传图片进行搜索为例。

场景: 在百度搜索框中,上传图片进行搜索

MeterSphere 的 UI 自动化如何实现文件上传的场景_图片上传

场景步骤: 打开网页,访问 ​https://www.baidu.com​ 网站

MeterSphere 的 UI 自动化如何实现文件上传的场景_上传图片_02

设置窗口大小,将浏览器全屏展示

MeterSphere 的 UI 自动化如何实现文件上传的场景_文件管理_03

鼠标点击上传图片的按钮,正确填写上传图片按钮的定位,在后置操作中设置等待时间

MeterSphere 的 UI 自动化如何实现文件上传的场景_图片上传_04

​上传图片,在 html 中上传图片定位到是个 input 标签,可使用输入框,输入图片路径进行上传。对于本地调试和后端调式而言,图片路径是不一样的。具体如下:

1 本地调试

1.1 前提

MeterSphere 服务端和本机在同一网络环境
下载浏览器驱动-运行驱动-将本地运行 Selenium-server 配置到 MeterSphere 平台,详情参考: ​​​UI 测试调用远程服务器​

1.2 上传图片

输入框中,可以直接写入图片的本地路径,进行图片上传,并且在后置操作中设置等待时间

MeterSphere 的 UI 自动化如何实现文件上传的场景_文件上传_05

不勾选性能模式,点击保存按钮,点击【本地调试】,即可看到本地浏览器上传图片的操作

MeterSphere 的 UI 自动化如何实现文件上传的场景_上传图片_06

2 后端调试

1.20.x-lts 版本

将图片上传到 local-selenium-grid 容器里,放到某一路径下

MeterSphere 的 UI 自动化如何实现文件上传的场景_文件上传_07

可以直接写容器内图片的路径,不勾选性能模式,即可看到后端调试时的截图情况。

MeterSphere 的 UI 自动化如何实现文件上传的场景_上传图片_08

不勾选性能模式,点击保存按钮,点击【后端调试】,可看到该场景步骤正常执行

MeterSphere 的 UI 自动化如何实现文件上传的场景_上传图片_09

2.x 版本

将图片上传到 【项目设置-文件管理】处

MeterSphere 的 UI 自动化如何实现文件上传的场景_图片上传_10

添加【输入操作】,切换到【文件上传】,添加【文件管理】处上传的图片,在【其他设置】里设置等待元素超时时间和当前步骤截图

MeterSphere 的 UI 自动化如何实现文件上传的场景_UI测试_11

不勾选性能模式,点击保存按钮,点击【后端调试】,可看到该场景步骤正常执行

MeterSphere 的 UI 自动化如何实现文件上传的场景_文件上传_12

3 生成报告

在 UI 测试场景中,不勾选性能模式,点击【生成报告】,即可看到该场景的报告,且每一步都带有截图

MeterSphere 的 UI 自动化如何实现文件上传的场景_文件管理_13

也可以进入【测试报告】页面,找到该场景的报告进行查看,可看到该场景的报告详情

MeterSphere 的 UI 自动化如何实现文件上传的场景_UI测试_14

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

ytXF8ujKKYXO
最新推荐 更多