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

Question

我打算使用JQuery通過PhantomJS填寫Form。

我已經爲這樣做，下面的腳本：

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 from the examples，因爲它只要數據可用完成。在這裏我有一些指標的第二個選擇是重新加載時：

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 
};