天天看點

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

上一章: 優酷響應式在消費場景的落地 iOS | 《優酷響應式布局技術全解析》第六章>>>

作者| 阿裡巴巴文娛技術 劉麗琴

響應式布局是在螢幕尺寸發生變化時,APP的頁面、元件按照規則進行動态自适應,實作一套代碼相容多尺寸終端裝置。響應式技術應用在多端上減少了開發人力投入,但是對于測試來說需要測試的範圍相對擴大,要保障多端、多尺寸的APP品質,下面介紹優酷在響應式測試過程中沉澱的測試能力及方法。

一、測試面臨的挑戰

移動端主要測試類型包括功能測試、性能測試、穩定性測試、相容性适配測試等,針對響應式測試主要難點在相容性測試,原因是相容性測試範圍擴大,測試效率面臨較大挑戰。具體表現在以下幾方面:

1)端類型增加,之前關注Phone端即可,現在要關注Phone、Pad、折疊屏、車機大屏

2)元件樣式繁多,Phone端元件樣式顯示一種狀态,現在不同螢幕裝置、不同狀态下元件呈現樣式布局會有相應不同

3)系統互動多,包括分屏、浮窗、平行視界、系統轉屏設定與響應式互動

4)測試對象多,需要考慮所有的頁面、元件、彈窗功能周遊

5)多業務場景互動,比如全屏播放

二、技術實作分析

針對以上挑戰,測試團隊對優酷全端響應式适配進行深入分析,得出相應的測試點。主要從以下幾方面進行分析:

響應式業務流程

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

如上圖顯示,響應式測試分為UI測試和資料處理邏輯測試兩部分:

1) UI顯示由響應式SDK完成

響應式SDK提供了在不同尺寸裝置上通用的響應式能力,在螢幕尺寸發生變化時,頁面樣式、布局的UI顯示也會發生相應的變化,這塊主要關注相容性适配測試。

2)資料處理邏輯由上層業務完成

資料處理主要進行了資料合并、資料過濾、資料映射及資料補全的邏輯處理,重點關注響應式和非響應式下資料處理邏輯的正确性。這塊就需要構造各種不同資料進行邏輯覆寫驗證。

除此之外,針對業界廠商目前支援的螢幕尺寸變化能力,需要考慮到不同能力下的互動測試:

1)系統支援旋轉螢幕設定;

2)Android Pad支援分屏,部分華為Pad支援平行視界能力;

3)iPad支援浮窗、分屏能力。

三、測什麼?

由以上的分析結果不難得出測試範圍以及主要的測試點,另外一個重要部分,是需要對響應式開關進行測試,已确定及時止損的能力。

1、 測試範圍

1)分層:SDK測試、業務層測試;

2)分端:Phone、Pad、折疊屏、車機大屏;

3)分平台:Android、iOS;

4)分能力:響應式開/關;

5)分機型:iPad分屏、浮窗能力,見下表:

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

2、 主要測試點

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

四、怎麼測?

通過對響應式的測試分析,知道了測哪些,下面從功能測試、相容性測試等方面來闡述怎麼測。

1、 功能測試

功能測試主要驗證資料處理邏輯在大屏端的正确性。資料處理邏輯主要對元件進行了資料合并、資料映射、資料過濾及補全,針對資料的構造主要通過mock的能力實作,确認大屏端邏輯處理正确。

同時,資料處理邏輯不能影響Phone端的元件頁面,這部分測試主要進行回歸測試,并且回歸量相對較大,為了提高測試效率優酷打造了元件自動化測試方案。

2、元件自動化測試

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

該測試借助圖像識别,能夠很好的規避技術改造的影響,穩定性較好。從以上5個方面解決問題,通過設計測試場景,将線上引流資料清洗後自動構造所需元件資料,自動應用mock資料,基于魔鏡算法服務進行相似度+配置化的UI對比。

本次元件測試,覆寫首頁/頻道頁35個元件,正常、異常mock檔案500+,dailybuild高頻測試,在響應式項目中很好的保證了元件測試的力度和覆寫度。

3、相容性測試

響應式測試難點在于相容性測試,這部分要在多端、多系統、多尺寸上驗證UI顯示,測試工作量較大;針對相容性測試優酷推出了優化後的相容性測試方案,包括機型選擇和測試平台:

機型選擇

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

測試平台

為了解決相容性測試成本問題,針對相容性測試做了以下改進:

1) 通用腳本降低腳本編寫成本、提高執行穩定性、快速開展業務測試

通用腳本基于scheme跳轉能力,解決了業務入口觸達穩定性問題;提供自動滾屏和基于元素查找的點選功能,還包含通用彈窗處理以及登入功能。

2)長截圖能力解決了不同分辨率以及不同實體尺寸下圖檔驗證的難點

長截圖實作方式有兩種,一種滾屏過程中截長圖;一種滾屏截圖,最後拼接成長截圖能力。

3)圖像驗證解決人工檢測問題

通過圖像識别算法,智能篩選出可疑圖檔,大大減少了人工檢測圖檔數量。

優酷APP響應式布局之測試方案 | 《優酷響應式布局技術全解析》第七章

4、其他測試

1)穩定性測試

大屏端穩定性測試是很有必要的,特别是iPad端低端裝置居多并且記憶體較Phone端也相對低,是以需要考慮這些裝置上的穩定性問題。

2)性能測試

響應式方案會顯示更多的圖檔和資料,其資料解析和圖檔渲染過程會對APP啟動和流暢度,記憶體産生明顯影響。

3)資料測試

第一,響應式旋轉螢幕時,元件行數列數會發生變化,此時要保證不同資料處理下,埋點資料下發正常:

第二,響應式映射處理的元件埋點資料下發與映射前的元件埋點一緻。

五、總結

針對響應式測試在功能測試、相容性測試方面做了大量的研究,沉澱了元件測試方案和相容性測試方案,即保障了響應式高品質上線,又提高了測試效率。

後續的響應式測試如何高效支援持續疊代對測試來說是一個新的挑戰,主要在兩方面:

一是,如何保證開發新的元件支援響應式

建立響應式編碼規範,對代碼進行靜态掃描,對不符合的規範進行告警。

二是,如何高效保障sdk的增量修改的品質

響應式sdk開源後,将脫離APP獨立存在,針對sdk單獨的測試方案需要考慮開展單元測試和覆寫率分析進行保障sdk品質。

繼續閱讀