最近写自动化框架的过程中，脑子蹦出来一些想法。发此贴记录一下。
众所周知，说到 UI 自动化。大家都会想到用元素进行定位。但是目前的趋势是用 AI 进行识别 + 元素结合。而我的思路是 "利用前端固定显示的图片/插图" 来实现。我解释一下这句话是什么意思，假如有一个不懂业务的人去做页面测试，那么他是不是首先要先了解业务。然后根据业务在页面进行点击查看。比如我这一步，应该是跳转页面 或者是展示一个弹窗等等。那本质上，是不是说。我可以直接把业务跟页面顺序挂钩呢？只不过人类把上面的步骤进行了个性化处理？比如，优惠卷，封面，按钮等等，这些按钮，图片的样式是不是都是固定死的。再说封面，封面是需要我们自己先上传的吧？那也就是我提前知道了这个封面是什么样子的，那封面是不是也是 固定死的？那我们提前按照顺序 截好图，然后每一次步骤 都进行图片对比。如果相似度达到 90% 就判断改用例成功。图片对比这一步，可以不用立马进行。比如可以跟 pytest 的机制一样，先收集。收集完统计进行图片对比。
其中测试本身和断言的结果就是看图片跟我们预期的图片是否一致。另外图片对比，比 OCR 提取是不是是该是要快的，看下我问 gpt 的截图
我接下来用测试用例来说明再说明一下我的具体思路
假设我们要录制一个外卖下单这样的一个用例，流程如下
进入首页-->点击商品-->进入商品详情->商品详情页点击下单-->订单详情页
- 进入首页并跳转详情页
首先，看下首页截图，紫色框是我们要测试的商品
然后获取我们想要测试的商品截图，比如下面这个是我们要测试的商品
我们把首页跟截图进入对比，如果包含，则标记出来截图在首页的区域，那这一块的区域我们知道了，是不是就能进行鼠标操作了？然后我们再进行点击，进入到商品详情页
- 商品详情页并下单
商品详情页的截图
我们这个时候，是不是需要进行判断这个商品详情页，到底是不是我们预期的，那么我们的预期如下，如果包含了下面这张图，是不是用例就通过了
我们选择 10 元的，紫色框是我们要测试的地方
这个时候我们选择 “10 元单人餐”
跟上面的一样，进行对比。这里我提一点，我们可以提前把商品详情页的截图这里给标记一下，是不是也能知道我们测试的地方
3.提交订单页
提交订单页的截图
这里我问一下，这个页面同一类用户，或者同一批优惠进入，某些地方页面长得是不是一样的？我们就用一样的地方进行判断，如果你要看金额，那你就单独截取金额的图，可以截取多个，进行多次对比 对吧？
2024.12.30
我这个最终的预期是什么样的我说一下
就是 我只需要放进去截图，然后对预期的截图区域进行操作，然后看截图是否正常。完全就是靠图片来断言，不需要用元素，组件这些。因为我们人类去做测试时候·，1 是看页面，2 是看数据。但是在固定的逻辑下，产生的页面数据，一般都是固定死的。如果把这个做成平台，是不是大大减少了操作？而且你要是加步骤，或者改步骤，只需要添加截图就可以。
想法就是这个想法，我觉得 UI 自动化，要想做的简单，做的好，测试过程中做的让人感觉舒服。以及高容错才是好工具。不过现在大部分都是用元素，OCR。可是这些，只是小进步。我是想，既然小进步不行。那为什么直接换一种思考方式呢。也欢迎大家进行积极的讨论，这里不论能否实现，尽管大胆想象，脑洞打开！
2024.1.3
看了一下大家的评论，我深受震撼。因为我这里只是提出了一个方向，然后跟大家探讨一下。但是具体的思路 比如 一些特殊的场景我是没有考虑到的。等我后面在想想，我感觉是可行的。就是需要人来实践。但是 TMD 感觉除了本人提出 本人实现 好像没有其他方法更有说服力了，啊哈哈哈。
了解一下组件化开发，可以从组件入手做 UI 自动化识别的
这个是不是就是图像识别操作，还是我个人看完的感受，跟 AI 貌似没关联上~
我之前搞过一个 GUI 自动化，就是基于图片识别来进行模拟用户操作的 ，而且还很简单。
好奇问啊，这个不就是用图像匹配来做自动化么。Airtest？纯靠图像的话，实际执行起来不稳，特别是文本类的图像对比
这些功能早就有了
像 selenium、palywright 等不但自身支持全页面截图，还支持某个元素的截图。
至于图片对比，方法也早就有了，你搜下，AI 图片自动化工具有现成的工具，测试之家也有人之前发过 python 图片对比的代码，都是现成的。
OCR 图片提取文字，这些功能也有都现成的，容易用的有 easyOCR，两行代码就提取出文字了，再加进测试用例断言，我最近刚整理了一篇，预计 2 个月后在 51 测试杂志发。
想法还是不错的，值得思考，或许还有更简单的方法来实现，我也在探索。。。。
能深入思考一些场景应用的 tester，其实还是很缺少的，或者有一批，只是不太分享，也或者我不知道
兄弟，一起加油
soloPi 了解下
自动化个人感觉还是测试数据的准备，繁琐和跨平台，有没有比较好的方法
Tynam
回复
其实我最终的预期是 我只需要放进去截图，然后对预期的截图区域进行操作，然后看截图是否正常。完全就是靠图片来断言，不需要用元素，组件这些。因为我们人类去做测试时候·，1 是看页面，2 是看数据。但是在固定的逻辑下，产生的页面数据，一般都是固定死的。如果把这个做成平台，是不是大大减少了操作？而且你要是加步骤，或者改步骤，只需要添加截图就可以。加油兄弟。我也是突然想到了，记录一下而已
milu
回复
我这个想法的诞生也是因为已有的工具太复杂了 就是你说的 需要我录制，还要考虑分辨率等等的问题。你可以看看评论区 下面推荐的软件没有适合的
卖破烂的龙
回复
思路挺好，但很多问题你没有解释清楚，或者我没理解到位。我想深入了解一下。所以你是依靠局部图像来定位？并且操作（click 等）然后整体图像来断言页面是否正确这样吗？如果是的话，我可能要给你泼一盆冷水了。。首先图像识别的准确率没有你想象的那么高，特别是文字多的 UI 元素少的页面。在考虑不同手机长宽比分辨率，你会因为调相似度阈值调到想死。。像你发的外卖平台这种，文字价格，标题稍微变一下图像基本废了。还是你打算搞一堆截图放着，那样灵活度也太低了。如果有理解不对的地方还望指正
1、在不同的手机上 截图是不一样的，比如一行能显示的字数会不一样。
2、有些内容是动态变化的，比如你例子里商品标题里有 “6.8-6.10 可核销”，等你 7 月来测的时候肯定变了。
如果用文字来断言的话就很容易提取关键信息，图片断言的话就难办。
其实我都觉得几奇怪，明明之前的 UI 自动化都几成熟，虽然麻烦且作用不大，但系 UI 自动化本来就没期待能发现多少 bug，现在想引入 AI 是想解决什么问题呢？
这个思路我做过，整套东西不难，关键是你自己没想清楚要解决的问题。这个思路适用的场景是页面展示效果的测试，我当时的场景就是广告 SDK，简单说就是页面业务逻辑少，主要看展示效果。
更进一步的，加上 diff 的思路，连用例都不用维护，解析 UI 组件之后自动遍历所有页面。使用 base 版本和测试版本进行图像 diff，可以全自动完成测试。
如果你想把这个思路用在 UI 自动化测试，那就是很难了，效率和效果比 UI 自动化测试框架都差很多。其实就是基于图像的方式解析 UI tree，好几年前字节做过这个方向，没看到大规模的落地，实际上 UI 自动化都还是用各种自动化框架做的。
这些年 UI 自动化测试框架在易用性稳定性上都有很大的进步，但是还是一个根本问题，大部分业务模式 UI 自动化的投入产出比太低。
受教了，老哥提出问题非常关键，我原本的这个想法 就是解决 付出和汇报不成正比的。但是听你这么一说，我感觉我还要再想想
Tynam
回复
这边文章我有看，不然我怎么拿的图，一个图的问题，我拿来讨论有什么问题吗？而且美团这篇文章讲的还是图跟元素结合 然后 OCR 提取。而我的想法是 纯截图进行对比的想法。