Casperjs中fill提交表單遇到的問題

sqzhao發表於2015-07-23
JS

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 {
            // http://www.spiration.co.uk/post/1232/Submit-is-not-a-function
            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();
});

相關文章