一、IS简介
IS(Inspiration Spaces,灵感空间)是一款由酷家乐Coohom团队开发的面向消费者的家具或定制行业营销产品,用户可以根据个人取向选择样板间,并以全景图形式查看样板间详情并进行内容素材替换,实现所见即所得。适用范围包括定制,成品,硬装在内的多个行业,目的是引导消费者以极简的方式经历一个方案设计过程,亲自选择喜欢的风格,刺激消费者的兴趣,成为高质量的商业线索,以促进企业后续电话沟通、店面访问、成单。
二、背景
IS依赖定制、硬装、方案、渲染、酷品秀、Coohom等多个业务方,每个业务方更改代码后都可能会影响IS原有的功能:
而下游业务方只提供接口服务,对上游功能并不是很熟悉,且IS业务本身很复杂,业务方很难协助测试,因此业务方有改动时都会让Coohom测试帮忙回归,导致Coohom测试压力很大。需要寻找自动化的回归方式,提升测试效能,必要时候可以提供给合作业务方自行回归。
三、IS回归原理
3.1 IS原理
IS核心内容就是将底图和分层图数据传入合成器,再通过全景图模块展示出来的过程。
合成器模块
合成器模块使用全新的技术方案,即底图 + 分层图
分层图包含两个组成要素:商品图,当前商品在底图中的深度图。
合成器模块主要需要做的是,针对给定底图,以及选择的商品分层图,进行全景图单面的图片合成。合成完成后的纹理数据直接丢给全景图模块。进行单面替换。
全景图模块
全景图模块将在kapano当前代码中进行改造,添加对于单面替换的api功能支持。且支持webgl纹理数据直接传入。
3.2 回归原理
由IS原理可以看出,IS其实是由底图加分层图按照一定的顺序组合起来的全景图,而叠加顺序则由深层图去确定。如果要整体结果没有问题,那对应的每个底图以及每个商品的分层图和深层图必须都没问题。而一个商品的图层由上下左右前后六个面组成,分别由“u”,“d”,“l”,“r”,“f”,“b”标注,需要保证这六个面与预期设定的图均保持一致即可。
确定完两个唯一对应的图层后,如何判断这两个图层里面的内容是一致,则需要对比图片,本文采用的是SSIM(Structural Similarity),结构相似性算法。因为人类对像素的绝对亮度/颜色不敏感,但对边缘和纹理的位置非常敏感, SSIM 通过主要关注边缘和纹理相似性来模仿人类感知。通过计算两个图片的相似度得分,得分越接近1,则表示这两个图片越相似,参考文档:http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/highgui/video-input-psnr-ssim/video-input-psnr-ssim.html#videoinputpsnrmssim,http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/gpu/gpu-basics-similarity/gpu-basics-similarity.html
SSIM也是一种全参考的图像质量评价指标,它分别从亮度、对比度、结构三方面度量图像相似性。
其中
分别表示图像X和Y的均值,
表示图像X和Y的方差,
表示图像X和Y的协方差,即:
为常数,为了避免分母为0的情况,通常取
一般的
,则
SSIM取值范围[0,1],值越大,表示图像失真越小,核心代码如下:
但由于渲染降级或其它因素导致一些“噪点”,导致渲染图可能不是完全一样的,因此,对比图片的时候,不会要求每张图片相似度达到100%,而是需要设定一个阈值,达到阈值即可。
3.3 回归方案
想要回归一个IS灵感空间,后台需经过如下步骤:
上述步骤,如果手动回归,除了次数频繁外,还有以下三个痛点:
- 每次回归时都需要手动去选风格项和替换项,总共有包括定制、成品、硬装在内的17个风格项,每个风格项至少要选2个替换商品,到达商品页面的时候,还需要点击3次,所以在不分组的情况下,覆盖所有业务线,至少要点击17*(2+3)=85次;如果分了组,柜体每分一个组,需要加3个风格项,则增加15次点击,非常耗时;
2. 点击开始渲染后,开始离线渲染,需要等上一段时间再去看结果,这个时间具有不确定性,需要依据渲染当前的空闲机器情况,有时几分钟就出结果了,有时甚至一天才出结果,而有没有出结果需要人肉去后台看下,也增加了时间成本;
3. 渲染结果出来后,需要人工去查看结果是否正确,有些虽然有深层图出来,但是图层不正确;有的根本就没有图,所以每个风格项都要查看一遍,如果手动操作,则需要至少需点击17*2=34次。
可以看出,如果回归一个样板间,在最小人工成本范围内,需要点击至少119次,再加上中间等待的时间,几个小时就过去了。但幸运的是,从选方案到设置锚点,都可以通过预制样板间的方式,我们要做的就是设置不同的预制样板间(测试用例),覆盖到所有的业务线,每次后端或者业务方更改之后,可以用这些样板间参数重新提交渲染;
另外,提交渲染后,由于后台是异步渲染,返回时间不定,因此,我们后台也会设置一个异步任务定时器,每30s查询一次任务是否完成,最多监控10小时,10小时还没渲染完成就放弃(与渲染后台每个任务的超时时间保持一致);
检测到样板间渲染完成后,可以开始图片对比任务,由于之前用python写好了图片对比函数,可以直接启动一个轻量级的web框架即可,传入原始图层和目标图层url,返回这两个图层的尺寸以及相似度得分。本文采用的是Bottle库,Bottle是一个超轻量级的python库。说是库,其本身只由一个4000行左右的文件构成,并且不需要任何依赖,只靠python标准库即可运作。
至此,整个回归流程就可以串起来了。首先,准备一些回归样板间,这些样板间需要覆盖所有的业务线场景;如果后端或者协作业务方修改了代码,用预制的样板间参数重新提交渲染,同时,后台启动一个异步定时任务轮询样板间状态;待渲染完成后,获取新样板间图层,与原始样板间各图层对比,得出相似度得分。由此,只需一键点击,可以解决上述3个痛点:
选样板间替换商品——>预置样板间生成信息;
等待渲染结果——>异步轮询,成功后自动进行下一步;
人工对比——>分层图自动对比。
四、回归系统框架
五、系统序图
六、结果展示
主要分为两个页面,第一个页面展示预制样板间列表,其中包括每个样板间的渲染状态、对比情况等,第二个页面展示每个样板间各个图层间的对比得分情况。
由上图看出,有个样板间结果异常,这个样板间有三个图层得分太低,分析具体图层,发现新渲的把手中间都出现“虚化”的现象,与预期不符,可能出bug了,需要具体排查原因。
https://qhrenderpicoss.kujiale.com/multilayer/L3D223S111B9ENDP2B3SUFSGT7PILUF3P3WU888/5_object.png_f
https://qhrenderpicoss.kujiale.com/multilayer/L3D223S111B9ENDPZULRWFSGT22WLUF3P3WQ888/3_object.png_f
七、总结
7.1 收益
1.实现这个平台后,后续下游业务方如果有改造,可以零基础,零成本在平台上回归,无需学习IS功能;
2.能够有效检测下游服务改动导致的渲染异常,消除人为的主观因素,使得测试结果更加准确和可靠,目前为止,这个平台已经帮Coohom发现5个潜在的线上故障,包括定制内参改动导致的门板丢失,渲染参数改动导致的平面图“花面”等问题;
3.也能快速执行测试用例,比手动测试更快速和高效,每次发版前跑一遍,能够大大减轻Coohom测试的回归压力,节省至少2个小时的时间;
7.2 问题及改进
本平台是酷家乐Coohom测试对于导购展示类产品自动化回归做的一次新尝试,但是目前只做了一个初版,后续还有很多优化的地方:
1.涉及的图层太多,图片对比运行时间过长,需要优化对比时间,可以采用多线程的方式;
2.有些图层尺寸太小,只要出现一点差异,就会导致得分太低,但其实这种差异可以忽略不计,需要有个合理范围内的容错处理;
3.目前所有分辨率都是同一个阈值,宽高大小直接对数值精度有影响,需要针对不同分辨率设置不同的阈值,最好能联合开发,让合成sdk开放个api,直接用当前的6面合成图的数据做对比;