本文共 1952 字,大约阅读时间需要 6 分钟。
Casperjs中fill的作用是填充表单值,并可以提交(可选),API:,这里不详述它的用法。
今天遇到一个问题,在此记录一下。问题是这样的:我一个可以正常提交form的casperjs脚本,在windows可以正常工作,之前在一台centos的linux服务器上也可以正常工作,今天在一台ubuntu12.04的服务器上却不行,尝试过各种办法(降低casperjs/phantomjs版本等)都不行。调用fill方法后,打出warning消息:[warning] [remote] unable to submit form。为了查找原因,我都去翻看了它上的源码,想知道是哪块儿出了问题,找到以下代码块儿:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // Form submission? if (submit) { this .evaluate( function _evaluate(selector) { var form = __utils__.findOne(selector); var method = (form.getAttribute( 'method' ) || "GET").toUpperCase(); var action = form.getAttribute( 'action' ) || "unknown"; __utils__.log( 'submitting form to ' + action + ', HTTP ' + method, 'info' ); var event = document.createEvent( 'Event' ); event.initEvent( 'submit' , true , true ); if (!form.dispatchEvent(event)) { __utils__.log( 'unable to submit form' , 'warning' ); return ; } if ( typeof form.submit === " function ") { form.submit(); } else { // form.submit.click(); } }, selector); } |
看下来似乎是没有办法dispatchEvent “submit”的event。但是此时我的心情是“朕知道了,但朕也无能为力”……
考虑到这应该是兼容性的问题,不能也不好做什么大改动。但又必须让它正常工作。所以尝试寻找其它等同效果的办法。现在的问题是提交,而casperjs的api中除了这个fill方法没有提交直接的submit方法。这该怎么办法呢?接下来,我从casperjs的 api示例代码中得到启发。调用evaluate进入页面然后调用原生js的submit方法提交表单。怀着试一下心态运行了一下,各环境都能正常工作!
所以,为了兼容性,Casperjs中这样的写法:
1 2 3 4 5 6 7 8 9 | this .fill( 'form#contact-form' , { 'subject' : 'I am watching you' , 'content' : 'So be careful.' , 'civility' : 'Mr' , 'name' : 'Chuck Norris' , 'email' : 'chuck@norris.com' , 'cc' : true , 'attachment' : '/Users/chuck/roundhousekick.doc' }, true ); |
应该写成下面这样比较好:
1 2 3 4 5 6 7 8 9 10 11 12 | this .fill( 'form#contact-form' , { 'subject' : 'I am watching you' , 'content' : 'So be careful.' , 'civility' : 'Mr' , 'name' : 'Chuck Norris' , 'email' : 'chuck@norris.com' , 'cc' : true , 'attachment' : '/Users/chuck/roundhousekick.doc' }, false ); this .evaluate( function (){ document.querySelector( 'form#contact-form' ).submit(); }); |
转载地址:http://ynbvi.baihongyu.com/