如何觸發Ajax請求以填寫表單並等待DOM更改？

Question

我將通過PhantomJS使用JQuery填寫表單 。

我有以下腳本可以做到這一點：

var page = require('webpage').create();

page.open('http://demo.opencart.com/index.php?route=account/register', function() {
    fillTheForm();
    phantom.exit();
});

function fillTheForm () {

    page.evaluate(function() {

        var selectTags = new Array();
        selectTags = document.getElementsByTagName('select');
        $(selectTags[0]).val("38");
        $(selectTags[0]).trigger('change');

        $(selectTags[1]).val('610');
    });         
    page.render('form.png');
};

運行此腳本后，我在控制台內收到以下消息！

警報，JavaScript錯誤

另外，在嘗試填寫表單后，我所擁有的圖片告訴我第二個“選擇”框的現有值尚未更改，然后PhantomJS無法將值分配給第二個字段。

有人可以幫我解決這個問題嗎？ 如何使用JQuery和PhantomJS填寫這兩個字段？

Answer 1

這是連鎖選擇問題。 第二個依賴於第一個，並通過AJAX填充。 這意味着它是異步的。 您必須等待，然后才能設置第二個值。 在PhantomJS中，這也是有問題的，因為您有兩個上下文（頁面上下文和幻像上下文）確實是“同步的”。

例如，您可以使用

function fillTheForm () {
    page.evaluate(function() {
        var selectTags = document.getElementsByTagName('select');
        $(selectTags[0]).val("38");
        $(selectTags[0]).trigger('change');
    });
    setTimeout(function(){
        page.evaluate(function() {
            var selectTags = document.getElementsByTagName('select');
            $(selectTags[1]).val('610');
        });
        page.render('form.png');
        phantom.exit(); // this has to be inside, because everything is asynchronous now
    }, 3000); // assuming 3 seconds are enough time for the request
};

一種更好，更可靠的方法是使用示例中的waitFor ，因為一旦數據可用，它就會完成。 這里有一些重新加載第二選擇的指示器：

var page = require('webpage').create();

page.open('http://demo.opencart.com/index.php?route=account/register', function() {
    fillTheForm(function(){
        page.render('form.png');
        phantom.exit();
    });
});

function fillTheForm(done) {
    page.evaluate(function() {
        var selectTags = document.getElementsByTagName('select');

        // custom indicators, perhaps something more elaborate is needed for general selects
        // in this case it is ok
        window._chainedSelectChildrenLength = selectTags[1].children.length;
        window._chainedSelectFirstChildText = selectTags[1].children[0].innerText;

        $(selectTags[0]).val("38");
        $(selectTags[0]).trigger('change');
    });
    waitFor(function testFx(){
        return page.evaluate(function() {
            var selectTags = document.getElementsByTagName('select');
            // use indicators
            return window._chainedSelectChildrenLength !== selectTags[1].children.length ||
                window._chainedSelectFirstChildText !== selectTags[1].children[0].innerText;
        });
    }, function onReady(){
        page.evaluate(function(){
            // continue
            var selectTags = document.getElementsByTagName('select');
            $(selectTags[1]).val('610');
        });
        done();
    }, 5000); // 3 seconds is the default
};

function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function() {
            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if(!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 250); //< repeat check every 250ms
};