通過MeterSphere的UI測試模塊實現(xiàn)H5翻頁測試
編者注：本文為CSDN博主hxe116的原創(chuàng)文章。
原文鏈接：https://blog.csdn.net/hxe116/article/details/129274171
隨著業(yè)務(wù)的發(fā)展與信息傳播形式的逐漸多樣化，越來越多的公司使用H5活動頁輔助宣傳、推廣、公司介紹等工作。H5，即HTML5，是集文字、圖片、音樂、視頻、鏈接等多種形式于一體的展示頁面。H5頁面的流行帶動了針對其的測試需求，其中也包含了UI自動化測試工作。
作為一款一站式開源持續(xù)測試平臺，MeterSphere涵蓋測試跟蹤、接口測試、UI測試和性能測試等功能模塊，兼容JMeter、Selenium等主流開源標(biāo)準(zhǔn)。
其中，MeterSphere的UI測試模塊提供了錄制能力，能夠極大地提升腳本新建和維護(hù)的效率。使用MeterSphere平臺可以實現(xiàn)H5頁面的UI自動化測試，借助Selenium IDE錄制工具，能夠快速生成H5頁面的UI自動化測試腳本。以下就是通過MeterSphere的UI自動化測試模塊實現(xiàn)H5翻頁的具體操作步驟。
一、錄制H5頁面，快速生成UI自動化腳本
1. 使用Selenium IDE插件錄制H5腳本
在瀏覽器中安裝Selenium IDE插件后，選擇“Selenium IDE”插件開始錄制腳本；
根據(jù)實際情況選擇開始情況，這里選擇“Create a new project”選項，創(chuàng)建一個全新的錄制；
輸入項目名稱；
選擇“錄制”按鈕，輸入H5頁面的地址，點擊開始錄制按鈕；
在瀏覽器中進(jìn)行的任何操作，Selenium IDE插件幾乎都會抓取到；
在瀏覽器中操作完畢后，可以點擊結(jié)束錄制按鈕直接關(guān)閉腳本的錄制。
2. 將腳本導(dǎo)入MeterSphere UI測試模塊
保存使用Selenium IDE插件錄制的腳本，保存時選擇默認(rèn)的SIDE格式即可；
Selenium IDE錄制的腳本，可以直接導(dǎo)入至MeterSphere的UI模塊中。在MeterSphere平臺選擇“UI測試”→“UI自動化”→“更多操作”→“導(dǎo)入”即可；
在“場景導(dǎo)入”選項卡中可以直接加載Selenium IDE錄制的腳本；
完成導(dǎo)入后可以查看到腳本已被導(dǎo)入到UI自動化測試的腳本列表中。
二、模擬H5頁面滑動
對于模擬H5頁面在手機(jī)上滑動翻頁，當(dāng)用Selenium IDE插件錄制時，此插件無法抓取到這個滑動操作。這時需要手動在頁面中定位，進(jìn)入頁面的研發(fā)調(diào)試模式定位所需要的控件；
1. H5當(dāng)前頁面翻頁
H5頁面中的控件，幾乎都是滑動到當(dāng)前頁才會顯示，并且此刻才可用。模擬實際滑動頁面的方式，依據(jù)每個H5前端采用的技術(shù)有少許差異，這里介紹通過定位div控件的方式實現(xiàn)滑動。
1.1 獲取當(dāng)前屏幕中底部元素，在元素上點擊鼠標(biāo)右鍵后，選擇“復(fù)制”→“復(fù)制JS路徑”，通過document.querySelector(“#InformationCompletion_Div >……> input”)獲取“證件號碼”；
1.2 輸出“證件號碼”后，使用scrollIntoView方法實現(xiàn)頁面滑動；
在“證件號碼”節(jié)點的后置操作中添加后置腳本，通過該元素的scrollIntoView方法實現(xiàn)滑動；
為了方便調(diào)試，也可以在后置腳本后添加截圖操作，在生成的實時報告中就可以看到結(jié)果是否符合預(yù)期。
2. H5頁面中頁簽?zāi)Ｊ降姆?/strong>
H5頁面中出現(xiàn)類似頁簽樣式的頁面時，如下圖所示，在最初的頁面中，最底部的“請下拉閱讀全部條款內(nèi)容”的按鈕為灰色不可點擊的。只有當(dāng)用戶滑動頁面逐一查閱全部條款后，最底部的“閱讀全部條款”按鈕才可點擊，頁面底部的“確認(rèn)”控件才可用。這種場景就不能使用上述第一種方式來實現(xiàn)滑動。
如上圖，頁面一共有4個頁簽，并且每個頁簽內(nèi)容大小不一，滑動的次數(shù)也不一樣。這里就需要檢查此頁面的前端代碼，確定頁面底部元素；
確認(rèn)底部元素后，同樣也可以使用scrollIntoView進(jìn)行滑動；
此時需要注意，根據(jù)實際頁面信息量的情況，在滑動后需要添加等待時間，或者一次滑動不足以到底部的話，可以進(jìn)行多次滑動。
三、其他操作
1. 等待使用技巧
MeterSphere平臺中提供的流程控制功能，以及元素細(xì)節(jié)方法還是非常全面的。比如：很多時候有些元素出現(xiàn)的時間不確定，在UI自動化腳本執(zhí)行時，有時可以成功，有時則會失敗。
這種情況下就可以在關(guān)鍵節(jié)點添加相關(guān)控制，比如添加流程控制if元素，同時配合等待操作來控制提高自動化腳本的質(zhì)量。其作用就是，當(dāng)元素被抓取到了就執(zhí)行，否則就繼續(xù)等待，直到該元素被找到后再執(zhí)行。
2. 手動獲取元素技巧
腳本中書寫的控件，可以點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“復(fù)制JS路徑”選項進(jìn)行獲取。
