鋪貼如何校驗？酷家樂硬裝鋪貼 UI 自動化實戰

酷家樂質量效能發表於2020-10-10
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畫布中的唯一標識找到鋪貼資訊，並進行校驗？
我的行動：

  1. 討論和實現畫布中硬裝鋪貼校驗的可能性和合理性
  2. 增加根據entity獲取鋪貼資訊介面
  3. 提升和封裝紫金鈴框架，支援硬裝鋪貼資訊獲取
  4. 覆蓋和支援用例
    整體流程可用如下表示：
  5. 選中一個建築面，出現唯一標識ID；
  6. 根據戶型中間層的介面，根據唯一標識ID獲取上面的建築面ID；
  7. 根據建築面ID，獲取對應的鋪貼資訊，返回克隆的鋪貼資料（暫時為clone，防止出現髒資料。之後有需求，再考慮是否修改）；
  8. 將鋪貼資訊返回給前端自動化pybell；
  9. 自動化執行和資料校驗。

四. 自動化閉環

實現UI自動化後，提高自動化的結果感知度，將自動化測試結果及時有效的推動給有效人群，也是至關重要的一環。
自動化閉環流程，分成以下進行：

  1. 前端部署成功，觸發webhook進行結果部署，並推送訊息；
  2. UI和效能自動化開始執行，上報效能指標給前端監控；
  3. 自動化執行結束後，推動UI和效能結果；
    可用以下流程圖進行表示：

五. 結果和收益

5.1 結果

從0到1實現了鋪貼UI自動化
自動化閉環：部署-自動化迴歸-報告展示

5.2 收益

覆蓋高P業務場景，融入迭代，發現問題，減少20%迴歸時間
整合測試環境，整合階段每天平均部署3次以上。對於每次整合，可減少20%的迴歸時間，鋪貼的UI自動化和效能迴歸可在整合階段，較大地提升測試效率。對於整合失敗等異常情形，也可以通過UI自動化的測試報告，第一時間獲知，及時對整合測試進行維護。
部分行為測試用例如下表所示：

六. 啟發

對於工具中的特定外掛，可通過增加前端介面，獲取測試資料，從而進行有效的測試，而不僅僅依賴於已展示的資料，該點可為如硬裝2.0和引數化等鋪貼資料提供思路和借鑑價值。
而對於工具前端包含了較多外掛，如戶型、鋪貼和圖紙等，存在了大量的外掛間資料互動行為，傳統測試方法通常以端到端的手工測試為主，難以覆蓋。對於前端外掛之間的debug和資料有效性校驗，可以相似的做法，根據前端外掛之間介面互動，構造並獲取測試資料，進行有效的測試，解決外掛間資料難以獲取的傳遞問題。將前端外掛之間不透明的資料展示，轉換為可透明的資料展示。同時，外掛之間傳遞的透明化資料，也可作為外掛間的debug測試工具。

七. 規劃展望

  • 硬裝鋪貼外掛中可自動化覆蓋部分，覆蓋率高於60%
  • 應用在全屋硬裝設計工具2.0

想了解更多關於酷家樂技術質量的文章，歡迎關注我們的公眾號

相關文章