Selenium UI 自动化的页面对象管理神器 PO-Manager

alex · 2021年07月23日 · 最后由 alex 回复于 2022年06月01日 · 2809 次阅读

做 UI 自动化的同学都知道,UI 自动化一个难点就是页面元素的变化,让自动化维护成为一个痛点。在此,为了减轻这个痛点,我在基于 Page-Object 模式的基础上开发了页面对象维护的工具。

该工具为 vscode 的一个插件, 可以通过 vscode 插件市场搜索 PO-Manager 来下载安装

本文中的页面对象库文件基于 json.
一个元素对象的定义包含元素名,定位方式 (id,name,css, xpath 等等) 和定位, 如百度首页新闻链接:

"新闻 Link": {
"type": "linkText",
"locator": "新闻"
}
首页链接

但是一个页面有 n 多的元素,我们如果一个个手动添加的话,也是要花费不少时间。那我们来自动添加一下:

-添加元素对象

-批量添加元素对象

当然,对于新页面,你也可以直接选择添加所有元素,简单直接抓取所有页面元素。

在元素对象添加后,我们可以在左边的 LOCATORS view 里看到当前文件里的对象,点击对应的元素节点,可以尝试高亮元素来验证元素定位是否正确。
-高亮/查找元素

如果元素定位失败,右下角消息提示 NoSuchElement, 则我们可以通过 update element 来更新元素定位器。大大降低了维护成本。
-更新元素对象定位

selenium 命令调试:
在元素节点上右键点击,可以看到一些 selenium 的命令,可以协助调试该元素的属性,可以避免我们一遍遍的运行测试脚本而到最后确发现点击/操作错了元素。

GitHub 仓库地址: https://github.com/zzhengjian/PO-Manager

欢迎大家加入 QQ 群: 471137382

共收到 23 条回复 时间 点赞

对于复杂性的元素能定位么?比如兄弟元素,父子元素,甚至父子子子子子子子子子子的元素

alex #2 · 2021年07月23日 Author
AlexYou 回复

可以生成基于父子结构的 xpath 和 css, xpath 轴之类的用法太复杂没法自动生成,主要是没法判断是不是最好的定位。

alex #3 · 2021年07月23日 Author

目前的算法生成的定位已经比大部分初学者写的好了,可以既拿既用,减轻很多的工作量,如果要提升部分定位的稳定性,进行少量维护即可。

很棒!

Selenium IDE 其实就能识别元素,复杂的 xpath 也支持,并且支持导出为代码,当然你能写出这个也很棒

alex #6 · 2021年07月26日 Author
cheunghr 回复

谢谢

alex #7 · 2021年07月26日 Author
AlexYou 回复

你说的没错,其实这个后端就用了部分 selenium IDE 的代码,主要是想方便页面对象的管理和维护,只要页面对象库抽象成这种 json 格式,那这个工具就可以匹配任何框架了。

想把这个融入到公司得测试平台里面去,但是本人只懂 python,这个源码几乎看不懂。不过能这么试用已经大大简化了工作量了,特别是批量添加得这个方法台棒了!

alex #9 · 2021年07月28日 Author
maomaokeen 回复

这个你倒是可以选择只加载一个 extension(主要的元素对象生成逻辑在这里)
然后调用这三个 js 方法就行,改成 python 应该不难
返回出来的 value 是已经按这种格式生成的元素集:
{
"新闻 Link": {
"type": "linkText",
"locator": "新闻"
},
"Hao123Link": {
"type": "linkText",
"locator": "hao123"
},
"地图 Link": {
"type": "linkText",
"locator": "地图"
},
"直播 Link": {
"type": "linkText",
"locator": "直播"
},
"2021Baidu": {
"type": "xpath",
"locator": "(//div[@id='bottom_layer']/div/p[9]/span)[1]"
}
}

alex 回复

好 ,我去研究研究


很好用,快速生成定位信息,对相关元素进行各种属性审查及操作调试,支持 click,jsclick 操作,对解决元素无法点击,点击无效问题帮助很大。

请问,是点击 chrome 图标开启浏览器嘛,我的点击好像没反应

alex #13 · 2021年08月04日 Author
yanderder 回复

chromedriver 的路径需要加到环境变量 PATH 里,然后通过 cmd 里执行下 chromedriver 确定能找到 , 并且确保版本跟 chrome 匹配

alex #14 · 2021年08月04日 Author
yanderder 回复

有问题也可以加到这个群里来提问哈,

alex 回复

好的,解决了

alex 我的 UI 自动化经历 中提及了此贴 11月11日 14:33

厉害了,赞一个

怎么做的,思路和方法能出个教程吗?

我觉得这个比只是教怎么用 selenium 的更有挑战

alex #20 · 2022年02月24日 Author

@gaoyugang 等改天有空我再写下思路哈

alex 回复

@alex 大大开始写了吗?

alex [该话题已被删除] 中提及了此贴 03月12日 20:16
alex UI 自动化的页面对象管理工具之实现思路 中提及了此贴 03月12日 20:34

大佬群还可以发一下吗?我也是想做成 python

alex #27 · 2022年06月01日 Author
Molya 回复

好的,欢迎加入讨论。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册