铺贴如何校验?酷家乐硬装铺贴UI自动化实战
一. 背景
酷家乐云设计工具，为用户提供了专业高效的3D智能云设计服务。在云设计工具中，硬装铺贴插件提供了丰富的硬装设计，如材质铺贴、样式尺寸调整、参数编辑和户改更新等，铺贴操作灵活，设计简单高效，支持快速绘制和预览，实现所见即所得。在用户设计过程中，硬装铺贴以mesh的方式呈现在3D画布中。对于全屋硬装行业，如何对铺贴进行校验，是全屋硬装的校验难点之一。目前的硬装铺贴设计工具具有以下痛点：
1.无自动化回归，画布中的铺贴无法校验
2.设计工具的功能完善和增强，插件和依赖增多
3.硬装工具插件化，存在材质编辑、参数化铺法等代码改动，导致bug修复不及时、灰发延迟等问题
如何在依赖插件多的情况下，解决硬装铺贴插件的自动化回归，成为硬装铺贴插件的难点之一。
图一 酷家乐全屋硬装设计工具
二. Mesh简介和技术选型
2.1 Mesh简介
硬装铺贴基于Mesh实现完成，在画布中进行操作，以三维计算机图形学为基础，全屋硬装以多边形网络来定义多面体对象形状的顶点、边和面的集合。硬装面通常由三角形网格、四边形或其他简单的凸多边形组成，用以描述硬装铺贴的模型信息，如顶点、法向、面和材质等信息。
如下示例为一个代表海豚的低多边形三角形网格的例子：
图二 低多边形三角形网格示例
2.2 技术选型
传统的UI自动化工具
传统的UI自动化工具，如Robort Framework，基于元素定位，而对于酷家乐3D设计工具而言，基本实现左侧栏等具有元素定位的场景。对于硬装铺贴的Mesh校验场景，无法实现此类场景的校验。
图片对比
由于稳定性等影响，实际试验之后，画布操作后的截图对比受到3D视角、相机位置等影响，且由于图片精度等因素，图片对比的实际效果不佳，期望能找到更适合的方法。
铺贴校验和基于KAF的酷家乐底层框架
KAF作为酷家乐工具的底层框架，提供了工具操作的统一高频功能模块和使用流程。结合基于Puppeteer的自动化测试框架，可获取画布中对象属性信息的API，如获取对象的屏幕坐标、获取对象的空间坐标与尺寸属性等。
深入铺贴插件发现，所有铺贴的数据可通过KAF的底层来获取，获取铺贴数据的唯一标识ID，再通过该标识可找到铺贴相关mesh数据，从而对铺贴进行校验。
三. 如何做的
3.1 Mesh数据不稳定
通过实际发现，mesh校验存在数据不稳定的问题：
mesh每次生成的结果不太一样，同一个铺贴信息直接生成两次也不能保证生成的mesh数据完全相同；
mesh数据本身也是仅用于展示显示，丢失了很多的信息，缺少必要的业务信息，如材质属性等；
通过深入理解前端铺贴插件的实现和原理，所有的铺贴信息来源于铺贴结构，其中包括了铺贴的各种信息，如自由铺、平铺、波打线、参数化铺法和外轮廓等信息。铺贴结构和mesh有单向映射的关系，通过mesh-generate进行多边形切割、三角化和材质计算等处理后，单向映射成mesh展示信息。
图三 铺贴信息结构图
3.2 铺贴信息的校验
在经历了上述思考后，问题回归到了是否可找到3D画布中的唯一标识找到铺贴信息，并进行校验？
我的行动：
讨论和实现画布中硬装铺贴校验的可能性和合理性
增加根据entity获取铺贴信息接口
提升和封装紫金铃框架，支持硬装铺贴信息获取
覆盖和支持用例
整体流程可用如下表示：
选中一个建筑面，出现唯一标识ID；
根据户型中间层的接口，根据唯一标识ID获取上面的建筑面ID；
根据建筑面ID，获取对应的铺贴信息，返回克隆的铺贴数据（暂时为clone，防止出现脏数据。之后有需求，再考虑是否修改）；
将铺贴信息返回给前端自动化pybell；
自动化运行和数据校验。
图四 铺贴信息校验整体流程图
四. 自动化闭环
实现UI自动化后，提高自动化的结果感知度，将自动化测试结果及时有效的推动给有效人群，也是至关重要的一环。
自动化闭环流程，分成以下进行：
前端部署成功，触发webhook进行结果部署，并推送消息；
UI和性能自动化开始运行，上报性能指标给前端监控；
自动化运行结束后，推动UI和性能结果；
可用以下流程图进行表示：
图五 自动化闭环流程图
五. 结果和收益
5.1 结果
从0到1实现了铺贴UI自动化
自动化闭环：部署-自动化回归-报告展示
5.2 收益
覆盖高P业务场景，融入迭代，发现问题，减少20%回归时间
集成测试环境，集成阶段每天平均部署3次以上。对于每次集成，可减少20%的回归时间，铺贴的UI自动化和性能回归可在集成阶段，较大地提升测试效率。对于集成失败等异常情形，也可以通过UI自动化的测试报告，第一时间获知，及时对集成测试进行维护。
部分行为测试用例如下表所示：
六. 启发
对于工具中的特定插件，可通过增加前端接口，获取测试数据，从而进行有效的测试，而不仅仅依赖于已展示的数据，该点可为如硬装2.0和参数化等铺贴数据提供思路和借鉴价值。
而对于工具前端包含了较多插件，如户型、铺贴和图纸等，存在了大量的插件间数据交互行为，传统测试方法通常以端到端的手工测试为主，难以覆盖。对于前端插件之间的debug和数据有效性校验，可以相似的做法，根据前端插件之间接口交互，构造并获取测试数据，进行有效的测试，解决插件间数据难以获取的传递问题。将前端插件之间不透明的数据展示，转换为可透明的数据展示。同时，插件之间传递的透明化数据，也可作为插件间的debug测试工具。
图六 工具前端自动化测试新思路
七. 规划展望
硬装铺贴插件中可自动化覆盖部分，覆盖率高于60%
应用在全屋硬装设计工具2.0
推荐阅读
公众号：酷家乐技术质量 知乎：酷家乐技术质量
TesterHome：kujiale-qa (酷家乐质量效能)