Casperjs中fill的作用是填充表单值，并可以提交（可选），API：http://docs.casperjs.org/en/latest/modules/casper.html#fill，这里不详述它的用法。
今天遇到一个问题，在此记录一下。问题是这样的：我一个可以正常提交form的casperjs脚本，在windows可以正常工作，之前在一台centos的linux服务器上也可以正常工作，今天在一台ubuntu12.04的服务器上却不行，尝试过各种办法（降低casperjs/phantomjs版本等）都不行。调用fill方法后，打出warning消息：[warning] [remote] unable to submit form。为了查找原因，我都去翻看了它git上的源码，想知道是哪块儿出了问题,找到以下代码块儿：
|
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的click 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();
});
|
1906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
