UI自動化測試：App的WebView頁面中，當搜索欄無搜索按鈕時處理方法

一、遇到的問題

 在做移動端的UI自動化測試時，經常會遇到上圖所示的搜索框，這里有個麻煩就是搜索框沒有“搜索”按鈕，UI自動化測試時不能確認搜索。

要解決這個問題，我們可以通過 driver.press_keycode('66') 方法模擬鍵盤回車，具體的使用方法請參考：

http://testingpai.com/article/1595507207594/comment/1595559375540

但是這種方法只能適用於Android環境，iOS環境不能使用。由於我是在Webview環境做UI自動化測試，無論是Android環境，iOS環境都可以使用js方法解決疑難雜症，操作時只需要通過python發送js方法就可以。

二、操作方法

 1、找到搜索框元素

通過document對象找到搜索框的元素位置，如上圖搜索框：

document.getElementsByTagName('input')[0];

2、js模擬回車事件的方法

下面是實現回車事件的JavaScript方法：

function inputeven() { let el = document.getElementsByTagName('input')[0]; let evtType = 'keyup'; let keyCode = 13; let evtObj; if (document.createEvent) { if (window.KeyEvent) {//firefox 瀏覽器下模擬事件
            evtObj = document.createEvent('KeyEvents'); evtObj.initKeyEvent(evtType, true, true, window, true, false, false, false, keyCode, 0) } else {//chrome 瀏覽器下模擬事件
            evtObj = document.createEvent('UIEvents'); evtObj.initUIEvent(evtType, true, true, window, 1); delete evtObj.keyCode; if (typeof evtObj.keyCode === 'undefined') {//為了模擬keycode
                Object.defineProperty(evtObj, 'keyCode', { value: keyCode }) } else { evtObj.key = String.fromCharCode(keyCode) } if (typeof evtObj.ctrlKey === 'undefined') {//為了模擬ctrl鍵
                Object.defineProperty(evtObj, 'ctrlKey', { value: true }) } else { evtObj.ctrlKey = true } } el.dispatchEvent(evtObj) } else if (document.createEventObject) {//IE 瀏覽器下模擬事件
        evtObj = document.createEventObject(); evtObj.keyCode = keyCode; el.fireEvent('on' + evtType, evtObj) } } inputeven();

在進行UI自動化時，使用selenium的 execute_script() 方法發送js指令時，需要是字符串格式的，因此需要將上面的方法壓縮：

js = function inputeven(){let el=document.getElementsByTagName('input')[0];let evtType='keyup';let keyCode=13;let evtObj;if(document.createEvent){if(window.KeyEvent){evtObj=document.createEvent('KeyEvents');evtObj.initKeyEvent(evtType,true,true,window,true,false,false,false,keyCode,0)}else{evtObj=document.createEvent('UIEvents');evtObj.initUIEvent(evtType,true,true,window,1);delete evtObj.keyCode;if(typeof evtObj.keyCode==='undefined'){Object.defineProperty(evtObj,'keyCode',{value:keyCode})}else{evtObj.key=String.fromCharCode(keyCode)}if(typeof evtObj.ctrlKey==='undefined'){Object.defineProperty(evtObj,'ctrlKey',{value:true})}else{evtObj.ctrlKey=true}}el.dispatchEvent(evtObj)}else if(document.createEventObject){evtObj=document.createEventObject();evtObj.keyCode=keyCode;el.fireEvent('on'+evtType,evtObj)}}inputeven();

3、要適應pytest自動化測試框架，上面的方法需要進行如下封裝：

def js_keyboard_enter(self, element_located): """ 搜索框輸入后，通過js方法確認搜索（用於搜索框沒有搜索確認按鈕） :param element_located:已定位到的搜索框元素document對象 :return: """
       # js方法實現搜索確認事件
       js = "function inputeven(){let el=%slet evtType='keyup';" \ "let keyCode=13;let evtObj;if(document.createEvent){if(window.KeyEvent){evtObj=document.createEvent" \ "('KeyEvents');evtObj.initKeyEvent(evtType,true,true,window,true,false,false,false,keyCode,0)}" \ "else{evtObj=document.createEvent('UIEvents');evtObj.initUIEvent(evtType,true,true,window,1);" \ "delete evtObj.keyCode;if(typeof evtObj.keyCode==='undefined'){Object.defineProperty(evtObj,'keyCode'," \ "{value:keyCode})}else{evtObj.key=String.fromCharCode(keyCode)}if(typeof evtObj.ctrlKey==='undefined')" \ "{Object.defineProperty(evtObj,'ctrlKey',{value:true})}else{evtObj.ctrlKey=true}}el.dispatchEvent(evtObj)}" \ "else if(document.createEventObject){evtObj=document.createEventObject();evtObj.keyCode=keyCode;el." \ "fireEvent('on'+evtType,evtObj)}}inputeven();" % (element_located) # 執行搜索確認的js方法
       self.driver.execute_script(js)

這里我將操作的搜索框document對象作為入參，在使用該方法時只需要傳入操作的搜索框元素document對象即可。

4、使用舉例

在前面的第1步中，我們已經通過document對象找到操作的搜索框，search_document_loc = "document.getElementsByTagName('input')[0];"

調用js_keyboard_enter()方法，執行回車事件，確認搜索：

@allure.step("搜索框輸入后，通過js方法確認") def search_enter(self): self.js_keyboard_enter(search_document_loc)

 

>>>>歡迎轉載！轉載請注明以下信息

>>>>本文來自：飛翔的豬~技術博客

>>>>博客地址：https://www.cnblogs.com/zdx20/p/15607139.html