UI自动化测试：App的WebView页面中，当搜索栏无搜索按钮时处理方法

lsekfe

一、遇到的问题

在做移动端的UI自动化测试时，经常会遇到上图所示的搜索框，这里有个麻烦就是搜索框没有“搜索”按钮，UI自动化测试时不能确认搜索。

要解决这个问题，我们可以通过 driver.press_keycode('66') 方法模拟键盘回车，具体的使用方法请参考：

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

但是这种方法只能适用于Android环境，iOS环境不能使用。由于我是在Webview环境做UI自动化测试，无论是Android环境，iOS环境都可以使用js方法解决疑难杂症，操作时只需要通过python发送js方法就可以。

二、操作方法

1、找到搜索框元素

通过document对象找到搜索框的元素位置，如上图搜索框：

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

复制代码

2、js模拟回车事件的方法

下面是实现回车事件的JavaScript方法：

1. function inputeven() {
   
2.     let el = document.getElementsByTagName('input')[0];
   
3.     let evtType = 'keyup';
   
4.     let keyCode = 13;
   
5.     let evtObj;
   
6.     if (document.createEvent) {
   
7.         if (window.KeyEvent) {//firefox 浏览器下模拟事件
   
8.             evtObj = document.createEvent('KeyEvents');
   
9.             evtObj.initKeyEvent(evtType, true, true, window, true, false, false, false, keyCode, 0)
   
10.         } else {//chrome 浏览器下模拟事件
    
11.             evtObj = document.createEvent('UIEvents');
    
12.             evtObj.initUIEvent(evtType, true, true, window, 1);
    
13.             delete evtObj.keyCode;
    
14.             if (typeof evtObj.keyCode === 'undefined') {//为了模拟keycode
    
15.                 Object.defineProperty(evtObj, 'keyCode', {
    
16.                     value: keyCode
    
17.                 })
    
18.             } else {
    
19.                 evtObj.key = String.fromCharCode(keyCode)
    
20.             }
    
21.             if (typeof evtObj.ctrlKey === 'undefined') {//为了模拟ctrl键
    
22.                 Object.defineProperty(evtObj, 'ctrlKey', {
    
23.                     value: true
    
24.                 })
    
25.             } else {
    
26.                 evtObj.ctrlKey = true
    
27.             }
    
28.         }
    
29.         el.dispatchEvent(evtObj)
    
30.     } else if (document.createEventObject) {//IE 浏览器下模拟事件
    
31.         evtObj = document.createEventObject();
    
32.         evtObj.keyCode = keyCode;
    
33.         el.fireEvent('on' + evtType, evtObj)
    
34.     }
    
35. }
    
36. inputeven();

复制代码

在进行UI自动化时，使用selenium的 execute_script() 方法发送js指令时，需要是字符串格式的，因此需要将上面的方法压缩：

1. 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自动化测试框架，上面的方法需要进行如下封装：

1. def js_keyboard_enter(self, element_located):
   
2.     """
   
3.     搜索框输入后，通过js方法确认搜索（用于搜索框没有搜索确认按钮）
   
4.     :param element_located:已定位到的搜索框元素document对象
   
5.     :return:
   
6.     """
   
7.        # js方法实现搜索确认事件
   
8.        js = "function inputeven(){let el=%slet evtType='keyup';" \
   
9.          "let keyCode=13;let evtObj;if(document.createEvent){if(window.KeyEvent){evtObj=document.createEvent" \
   
10.          "('KeyEvents');evtObj.initKeyEvent(evtType,true,true,window,true,false,false,false,keyCode,0)}" \
    
11.          "else{evtObj=document.createEvent('UIEvents');evtObj.initUIEvent(evtType,true,true,window,1);" \
    
12.          "delete evtObj.keyCode;if(typeof evtObj.keyCode==='undefined'){Object.defineProperty(evtObj,'keyCode'," \
    
13.          "{value:keyCode})}else{evtObj.key=String.fromCharCode(keyCode)}if(typeof evtObj.ctrlKey==='undefined')" \
    
14.          "{Object.defineProperty(evtObj,'ctrlKey',{value:true})}else{evtObj.ctrlKey=true}}el.dispatchEvent(evtObj)}" \
    
15.          "else if(document.createEventObject){evtObj=document.createEventObject();evtObj.keyCode=keyCode;el." \
    
16.          "fireEvent('on'+evtType,evtObj)}}inputeven();" % (element_located)
    
17.    # 执行搜索确认的js方法
    
18.        self.driver.execute_script(js)

复制代码

这里我将操作的搜索框document对象作为入参，在使用该方法时只需要传入操作的搜索框元素document对象即可。

4、使用举例

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

调用js_keyboard_enter()方法，执行回车事件，确认搜索：

1. @allure.step("搜索框输入后，通过js方法确认")
   
2. def search_enter(self):
   
3.     self.js_keyboard_enter(search_document_loc)

复制代码

bsackk

阿里云的服务器也是真够能偷懒的。