Selenium JavaScript - 模拟键盘输入支付密码

229max · 发布于 2016年12月29日 · 最后由 seveniruby 回复于 2017年1月06日 · 625 次阅读
本帖已被设为精华帖!

JavaScript - 模拟键盘输入支付密码

Max.Bai
2016-12-29

0x00. 发生了什么事

我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面:

有没有很像支付宝的支付密码输入框

0x01. 密码输入框后面的input

其实说到底他后面就是个input,来看下这个例子的源码什么样子的:

<div class="wallet-input clear">  
 <input id="wallet-pwd" name="wallet-pwd" type="tel" maxlength="6" pattern="d*" autocomplete="off" />  
 <ul>  
  <li class="active"><i></i></li>  
  <li><i></i></li>  
  <li><i></i></li>  
  <li><i></i></li>  
  <li><i></i></li>  
  <li><i></i></li>  
 </ul>  
</div>

那么你输入的密码是保存的input 的value里面的。。。

0x02. 确定input的监听事件是什么

那么他如何实现这个效果的那,没错javascript脚本了,找到对应的脚本

$("#wallet-pwd").click();  
$("#wallet-pwd").on('keyup',function(e){  

    var ul=$(".wallet-input ul li");  
    var pwd=$(this).val();  
    var len=pwd.length;  
    for(var i=0;i<6;i++){  
        if(i<len){  
            $(ul[i]).addClass("active");  
        }else{  
            $(ul[i]).removeClass("active");  
        }  
    }  
    if(len==6){  
            //第三方支付  
        setTimeout(function(){  
             //存支付密码  
            $("#wallet_passwd").val(hex_md5(pwd));  
            payxxxxx();  
        },100);  
    }  
})  

现在知道了,他上面其实是绑定了一个keyup事件,当输入的密码达到6位的时候执行提交

0x03. 在input上触发键盘事件

弄清楚之后那就简单了,我们只要两步就解决了,

  1. 用JavaScript给input赋值
  2. 触发keyup事件就解决问题了。 javascript 模拟键盘时间触发keyup就成了关键的步骤,各种查找,终于找到一个可用的。。。
$("#wallet-pwd").val(888888);  
Podium = {};  
Podium.keyup = function(k) {  
    var oEvent = document.createEvent('KeyboardEvent');  

    // Chromium Hack  
    Object.defineProperty(oEvent, 'keyCode', {  
                get : function() {  
                    return this.keyCodeVal;  
                }  
    });       
    Object.defineProperty(oEvent, 'which', {  
                get : function() {  
                    return this.keyCodeVal;  
                }  
    });       

    if (oEvent.initKeyboardEvent) {  
        oEvent.initKeyboardEvent("keyup", true, true, document.defaultView, false, false, false, false, k, k);  
    } else {  
        oEvent.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, k, 0);  
    }  

    oEvent.keyCodeVal = k;  

    if (oEvent.keyCode !== k) {  
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");  
    }  

    document.getElementById("wallet-pwd").dispatchEvent(oEvent);  
}  

Podium.keyup(48);  

上面的脚本在上面的页面实现中在Chrome 54是成功的。

0x04. 我都看了哪些文章

如果你看到我的记录,但是你的问题还没有解决,那么可能有几种情况你可以考虑:
你可以尝试jquery 来解决,我的没成功,你不防试试,这个依赖jquery的版本,啥版本我也不知道。
http://blog.csdn.NET/lufengsn/article/details/7060626

// jQuery插件。一个jQuery对象,而不是直接调用。    
jQuery.fn.simulateKeyPress = function(character) {    
  // 内部调用jQuery.event.trigger    
  // 参数有 (Event, data, elem). 最后一个参数是非常重要的的!    
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });    
};    

//页面调用    
jQuery(document).ready( function($) {    
  // 绑定事件处理程序    
  $( 'body' ).keypress( function(e) {    
    alert( String.fromCharCode( e.which ) );    
    console.log(e);    
  });    
  // 模拟按键了 x    
  $( 'body' ).simulateKeyPress('x');    
});  

也有可能你的浏览器和我的不一样,这个就尴尬了,每个浏览器实现的方式都不一样,应为内核不一样模拟键盘的方法有所差别。
http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key
http://jsbin.com/awenaq/4 这个页面实现了3种方法,支持在线调试,你可以在你的浏览器里面在线调试,只到找到你合适的脚本,我就是这样干的

共收到 6 条回复
11090
hu_qingen · #1 · 2016年12月29日

点赞

—— 来自TesterHome官方 安卓客户端

3341
jaychang1989 · #2 · 2016年12月29日

老白,这个是web页面的支付吧,APP调用H5支付或者调用支付宝输入有没有解决方案?

104 seveniruby 将本帖设为了精华贴 12月29日 23:24
104
seveniruby · #4 · 2016年12月29日

selenium就是这么做的 可以参考他的代码 robotium里面也有针对移动端h5自动化的实现

104
seveniruby · #5 · 2016年12月29日

加精理由:对js实现输入进行了原理解释,对移动h5的测试有参考价值

1552
229max · #6 · 2016年12月30日

#2楼 @jaychang1989 。。。 你也在这里。。。 app的调支付宝一直用的appium,完全支持,H5的还没搞,直接在浏览器里面调H5支付页面和这个是一样的

104
seveniruby · #7 · 2017年1月06日

记得更新打赏二维码或者个人微信. 你已经错过10元打赏

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册