收藏
回答

话题 全部话题

有奖体验|小程序云测图片对比能力上线啦!你体验过了吗?

不少开发者反馈,自己的小程序业务功能迭代快,同时还需要保证线上功能稳定,这对开发和测试同学来说,是一个很大的挑战~


如果能在小程序每次更新上线前,把开发中版本的页面和线上版本的页面进行对比,找出区别,从而快速验证新业务的改动是否会影响线上已有能力,那么这将大大提高开发和测试的效率,减少上线后出现问题的风险,确保用户体验的连续性和稳定性。


基于此,小程序云测服务 新增 图片对比能力!

即在每次上线前,开发者可以针对 P0 页面,将开发中的版本和线上版的相同功能进行对比,对差异化的内容进行确认。当页面变化不大时,无需再写断言,使用图片对比直观看到差异,大大减小工作量。(👉 查看 使用教程 )(查看 云测使用最佳实践案例-微信小店👈)

近期云测对图片对比能力新增并优化以下几项能力,更加灵活高效、自动化地支持开发者的测试工作:

  • 对比算法优化: 对原来的 SSIM 对比算法进行优化,并新增视觉对比算法,提升对比鲁棒性
  • 新增区域比能力:支持仅对比部分区域和忽略部分区域能力,提升对比能力的可用性
  • 新增图片对比报告汇总页面 :方便开发和测试人员查看结果并发现问题,提升对比报告查看效率
  • 新增 API 接口:便于联动企业内系统,一站式打通 Devops 流程


----- 彩蛋环节 -----

彩蛋 1:体验有奖。为了更好地优化小程序云测图片对比能力,即日起至 1 月 16 日,官方团队邀请各位开发测试同学在下方评论区分享图片对比能力或云测其他能力的使用体验,精选评论的用户将获得超可爱的限定版生肖公仔 1 只 或 微信气泡狗集线器一份!无论是竖起大拇指的认可,还是暗戳戳的体验吐槽,我们都非常欢迎!

彩蛋 2:欢迎各位开发者朋友使用小程序云测服务,提升小程序整体表现!即日起至 1 月 16 日,前往 小程序云测试交流专区  分享云测使用的最佳实践,精选文章的用户将获得限定版生肖公仔 1 只 或 微信气泡狗集线器一份

写回答关注话题邀请回答

17 个回答

  • 社区技术运营-wwen
    社区技术运营-wwen
    置顶回答2天前

    感谢大家关注 小程序云测话题的关注!我们将认真参考大家提出的意见,评估需求点,在后续的版本和推文中与大家同步反馈内容和需求进展,与各位开发者朋友们一起打造更好的生态能力!

    我们精选以上 4 位用户的回答、文章并送出微信周边礼物。2025 年 1 月 17 日前,我们将通过社区私信联系以上得奖者确定邮寄地址,如本周内未收到回复(即 2025 / 1 / 19 0点前),视为放弃奖品。

    2天前
    赞同
    回复
  • 许许_工作号
    许许_工作号
    精选01-03

    针对一些比较固定的页面、服务以及一些H5页面,要求跳转后页面展示正常的场景,图片对比功能可以让断言变得简单,从而用例代码也得到精简,使得用例新增效率和覆盖度都有了较大的提高。尤其是部分区域对比,可以对比选中的区域,也可以忽略选中的区域。对于刚上线的新功能来说,挺好。

    01-03
    赞同 4
    回复
  • Simple
    Simple
    01-11

    感觉功能对我这种个人开发者来说还是很有用的,可以代替一部分测试的功能,我感觉有以下几个优点

    1.通过在每次更新上线前对开发中的版本和线上版本的页面进行对比,个人开发者可以快速验证新业务的改动是否会影响线上已有能力。会提高工作效率。提高严谨性。

    2.支持仅对比部分区域和忽略部分区域的能力,使得对比更加灵活,可以根据实际需求进行调整。

    3.方便个人开发者查看结果并发现问题,这很重要。

    01-11
    赞同 1
    回复
  • 拾忆
    拾忆
    精选01-04

    1.最新版本并没有截屏相关按钮。

    2.删除用例的时候提示文件名对于非开发人员来说是不是不太好,建议是和用例列表保持一致。

    3.未找到同步云测的入口,但是登陆云测后台看到自动加了2个任务无法终止。

    01-04
    赞同 1
    回复 4
    • YY
      YY
      01-06
      1. 单击用例详情右边的符号
      2. 是和用例列表保持一致的呀?
      3. 同步用例的路径看下方截图,新项目第一次会自动新建2个任务,相当于新手指引的一个环节~
      01-06
      回复
    查看更多(3)
  • Zoey
    Zoey
    精选星期四 18:30

    测试背景:

    针对两个页面(测试运行截图与基准图),重点对比了 SSIM 对比算法视觉对比算法 的表现,结合实际业务场景描述了算法使用感受:

    一、人工分析结果:

    基于对两张页面的直观人工分析,以下部分被判定为“问题”或“疑似问题”:

    1. 冬季用户小调研模块缺失(问题)
    2. 收藏夹右侧按钮多了红色方块(问题)
    3. 页面上多了官方回购订单栏和线上服务栏(疑似问题)

    下面来看一下使用两种算法对比的结果:

    二、SSIM 对比算法:基于结构相似的技术对比

    1、算法特点:SSIM 基于结构相似性进行对比,更关注页面整体的像素细节差异。

    2、对比结果展示:

    3、对比结果总结:

    3.1 标记范围广

    • SSIM 算法对页面整体变化较为敏感,由于“冬季用户小调研模块”的缺失导致页面结构发生偏差,算法标记了较大的区域,并认为整体存在不同。
    • 此类精准说明页面结构变化的差异性,但标记范围较广,在实际测试场景中可能需要人为进一步确认改动范围。

    3.2 标记了底部Tab的细节变化:

    • 算法自动检测到页面底部Tab栏的“高度不一致”,这在人眼观察中并未被发现。
    • 优势在于能够发现人眼无法直观感知的细节,为开发者或测试人员提供精确定位的帮助。

    4、应用整体感受:

    • SSIM 对比更适合像素级、技术性问题的检测,尤其适用于验证系统输出的页面结构一致性图片质量问题,但由于人工感知不足可能对实际体验评估产生一定影响。


    二、视觉对比算法:贴近用户体验的智能工具

    1、算法特点:视觉对比更贴近用户体验角度,更关注页面的显著变化区域。

    2、对比结果展示:

    3、对比结果总结:

    3.1 精准覆盖人工标记的“问题点”:

    视觉对比智能标识出了人工判断的 3 个问题

    • 冬季用户小调研模块缺失
    • 收藏夹右侧按钮多了红色方块
    • 页面新增了官方回购订单栏和线上服务栏

    这些标记结果与实际感知体验完全贴合,能够快速帮助判定页面是否存在影响用户体验的显著问题。

    3.2 未标记人眼未感知的细微变化

    • 视觉对比更偏重用户显著关注区域,未对基准图与测试图的底部Tab栏“高度不一致”进行标注。
    • 这种特性贴合用户视角,但对于细节要求严苛的技术场景可能存在遗漏。


    4、应用整体感受:

    • 视觉对比算法更适用于用户体验优化测试,帮助开发团队迅速确认用户可能感知到的显著变化,从而提升页面优化效率。


    总结:

    结合实际业务场景,总结两种算法的测试体验和适用场景:

    星期四 18:30
    赞同
    回复
  • 陈宇明
    陈宇明
    2024-12-31

    我觉得与其和上一个版本去对比界面区别,不如可以上传设计稿和实际完成效果做个对比,这样设计人员就不要去验收了,直接跑一遍前端人员就知道那里需要调整还原度了。

    如果能够找出问题,并且一键提高还原度,那前端人员肯定特别喜欢

    2024-12-31
    赞同 7
    回复 2
    查看更多(1)
  • ⅴ
    01-01

    感觉基本没空做这么细致的UI测试。

    01-01
    赞同 6
    回复
  • showms
    showms
    2024-12-31

    感觉不太实用...

    2024-12-31
    赞同 4
    回复 1
    • 陈宇明
      陈宇明
      2024-12-31
      同感
      2024-12-31
      2
      回复
  • 诗和远方
    诗和远方
    01-03

    字错了

    01-03
    赞同 2
    回复 2
    • YY
      YY
      01-03
      已修改~感谢反馈
      01-03
      回复
    查看更多(1)
  • 一笑皆春
    一笑皆春
    2024-12-31

    前排,非常不错的功能

    2024-12-31
    赞同 2
    回复

正在加载...

登录 后发表内容