自动化工具 分享一个用于操作模板图片的 intellij 平台插件 (已开源)

xiaoshihu · 2019年06月15日 · 最后由 AIR神神 回复于 2021年05月11日 · 2512 次阅读

我觉得开发插件能打开新思路,你说呢?vscode?其他的 IDE 要不要来一个?

插件说明

该插件提供了操作模板图片的功能,主要用于辅助使用图片识别的自动化测试框架的脚本编写,可以避免直接操作模板图片,如果你想写框架,我写的框架可能能提供点想法,但是目前还未开源

插件模仿 SikuliX IDE 提供的截图、代码填充等功能

插件可以在 intellij 平台上的所有 IDE 上运行,所以,你懂的!

intellij 插件开发资料国内较少,我这里提供一点点资料,看这里还有这个(这个写的真不错,可以好好看看)

如果你有好的想法请告诉我,如果你在这个的基础上实现了更好的功能,请务必分享

安装

可以下载源码之后, github 项目地址,利用 Gradle 构建 jar 包,再离线安装插件

也可以下载 v2.4我打包好的,再离线安装

需要注意 Pycharm 的版本,至少为 2019.1,否则安装的时候会出现兼容性错误提示

图文演示说明

插件功能布局

插件功能布局详细介绍

如上图所示,安装完插件之后,右键会出现图上标 1 的区域,称为右键区域,左下角会出现一个名称为 AutoTestTool 的按键,点击之后会出现标 2 的区域,称为函数辅助区域,右上角会出现名称为 CodePreview 的按键,点击之后出现标 3 区域,称为代码预览区域

图上用黄框标出的区域为工程的目录结构,我现在编辑的文件是数据期维.py,在页面对象文件夹下面,截取的图片会自动存放到元素对象库/pic文件夹下,这个储存路径已经在代码里面写死了,插件会自动判断当前文件所在文件夹的父目录下面有没有元素对象库文件夹,如果没有就会报错,pic文件夹如果不存在,就会自动创建

右键区域功能说明

该区域提供了截取图片、显示图片、重命名图片和删除图片的功能

Screenshot 和 3s'Screenshot

这两个按键都提供了截图的功能,后面的按键是在按下案件之后,pycharm 从桌面上消失,3 秒之后才会进入截图的模式,适合有些需要鼠标移动到上面之后才会显示的元素的截取,下面用动图来演示操作

右键点击

上面的操作流程中进行了三次截图操作,但是每次的操作都不一样,最后得到的了三种类型的参数,先说一下这三种类型的参数

* 表示图片名称的字符串,例如:"15604965538159.png"
* 包含表示图片名称的字符串和一组相对偏移坐标(相对于图片的中心点)的元组,例如:("15604965687499.png",(-34,-40))
* 表示一组绝对坐标的元组(主屏幕左上角为原点),例如:(440,401)

点击左键之后,拖拽,放开左键,会框选出一块区域,如果这个时候在框选区域的外面点击鼠标左键,返回的就是第一种参数,在框选区域里面点击左键,得到的就是第二种参数

不进行拖拽操作,直接在屏幕上点击一个点,会得到第三种参数

截取图片的名称默认使用的是当前的时间戳加上一位随机数,可以自己手动修改,也会在保存图片的时候检查是否存在同名的图片

tips:后面介绍的函数辅助区域的那些功能里面只要是截图的操作,都与右键截图的操作是一样的,如果不想截图,按 Esc 按键取消操作

ShowPicture、RenamePicture、DeletePicture

右键其他操作

上面的动图里面将这三个功能都操作到了,注意操作单张图片的操作都是选中图片的名称(不带后缀),这些操作都会检查图片在不在目录下面,不存在就会弹出错误信息,可以看出,重命名图片和删除图片操作都将会直接改变文件系统里面储存的图片,完全可以不用直接去操作图片模板了

函数辅助区域功能说明

这些方法是在我自己的自动化测试框架里面封装的,如果需要适应自己的框架,就需要改变这些方法的填充代码内容,这部分目前只能直接去代码里面修改,后面的 待改进 节里面也提到了

这部分的函数由于参数的不同,操作有不一样,主要分为三类:需要拾取一个参数、需要拾取两个参数、需要拾取一个参数再输入一个参数

拾取一个参数

拾取一个参数的函数

上图中框出来的按键,都是拾取一个参数的方法,所以操作是类似的,下面用动图演示

拾取一个参数的操作演示

从上图中可以看出,虽然这些按键的操作基本上都是一样的,但是填充的内容不一样,但是都会设置好缩进

拾取两个参数

拾取两个参数的函数

上图中框出来的按键都需要拾取两个参数

拾取两个参数的函数

在上图中可以看出,虽然都是两次进入截图状态,但是 DragByoff 按键的第二次截图操作只能单击,也就是只能选取屏幕上的点,并且第二次截取状态中会用一个红色的十字架标出第一次截取的操作点(如果第一次截取带偏移,会把偏移计算进去)

第二次截图操作是可以取消的,动图中也有演示,按 Esc 即可

拾取一个参数再输入一个参数

粘贴操作演示

使用这种操作的方式的只有 paste 一个按键

3s Delay

这个按键提供的功能和之前 3s'sceenshot 的功能一样,如果你想让那个方法延迟截图,新点击以下这个按键,然后再点击其他的函数,但是这个延迟仅仅对紧接着的一个操作有效

代码预览区域功能说明

该功能对这个插件非常重要,在代码中大量使用图片名称作为参数,并且,绝大部分图片名称没有什么意义,会导致代码的阅读性奇差无比,由于对 java 的 GUI 编程一点都不熟悉,为了实现这个功能还花了点心思,最后的思路是,获取编辑文件的内容,转变为 html,然后再放入 JEditorPane 组件中,因为这个组件可以渲染 html,就能显示代码里面的图片了,不需要看的时候建议收起来

待改进

  • 代码夹杂图片整体预览功能是受到了 Markdown 渲染的效果启发,但是插件里面对代码基本上没怎么渲染,仅仅将图片显示出来了,还缺少两边窗口的互动,比如同时滚动和点击定位等
  • 有小伙伴提到了插件填充代码这块功能可配置,我觉得这个想法很不错,可以按照自己的 API 去填充相应的代码和参数,目前只能去改源码里面 MyToolWindow 类里面的代码

注意事项

  • 不要开着代码预览的窗口编辑代码,可能会很卡,因为,一直在监听编辑器文本的变化,每次变化之后还要渲染
  • 有可能 Pycharm 右下角会出现报错的信息,但是不影响 Pycharm 和插件的使用,这个说实话是我找不到是哪里错了

关于我

2018 年从钢构转行的新手,主要使用 Python,也喜欢 Python,java 是为了写插件才看了点,所以代码质量堪忧,凑合看

共收到 7 条回复 时间 点赞
xiaoshihu 分享一点关于 web ui 自动化测试的东西 中提及了此贴 06月15日 11:21
xiaoshihu [该话题已被删除] 中提及了此贴 06月15日 11:21
xiaoshihu 分享一点关于 web ui 自动化测试的东西 中提及了此贴 06月15日 11:22

这是个好东西

钢构转行?

huan 回复

钢结构设计

xiaoshihu 分享一点关于 web ui 自动化测试的东西 中提及了此贴 06月17日 17:42

中文文件名,这么 hardcore 吗

你好,进入截图状态时,截图画面变模糊,这个是什么原因呢?感觉会影响后面的识别

AIR神神 回复

应该是系统缩放比的问题,我把系统缩放比调整成 125% 进入截图之后图片会模糊

xiaoshihu 回复

好的,谢谢啦,改成 100% 缩放确实好了~

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