用CasperJs本身加載頁面時加載頁面的Javascript

Question

我正在嘗試提交表格。 當我使用firefox時，頁面將被加載，然后打開firebug，我可以看到一個名為“ content_html”的輸入字段，但是當我從“查看頁面源代碼”中查看頁面的源代碼時，我看不到輸入字段“ content_html” 。 我進一步檢查，發現有一個javascript將在瀏覽器中加載以顯示該輸入字段。 代碼就像

geteditorinit("http://example.com/pub","data[content_html]",298996,1,750,350,0,0,"content_html");

因此，我可以得出結論，當我訪問包含此表單的頁面時，僅在執行此javascript代碼之后才會加載“ content_html”隱藏的輸入字段。 我需要為該輸入字段分配一些值才能提交表單。 由於我無法像在瀏覽器中那樣獲得可操縱的Javascript HTML，因此使用CasperJs無法使用CSS選擇器為其分配任何值。 因為CSS選擇器找不到此隱藏的輸入字段。 如何加載包含其中的javascript的頁面，以便獲得類似於firebug的HTML，該HTML會向我顯示輸入字段以便提交？
登錄后，我轉到包含要提交的表單的頁面

casper.thenOpen(POST_URL, function(){
          //Here I type the code to fill the form
});

PS [1]如果PhantomJS是完整的瀏覽器，並且我不需要運行Javascript，那么為什么不能使用CSS選擇器獲取此隱藏的輸入字段呢？
上圖是從Firebug拍攝的。 如您所見，它以無色模式顯示輸入字段。 我希望能夠選擇“ content1_html”並為其設置值，然后提交我的表單。
PS [2]我發現，當我加載發布頁面時，它將單獨向另一個頁面發出ajax請求以自動保存“ content1_html”的內容 。 我需要打開發布頁面，向另一個頁面發出“ content_html”的發布請求，然后單擊我已經加載的頁面上的提交。 我可以制作另一個標簽或打開另一個網址，而不會丟失已有的數據嗎？ 因為每次刷新后，表單令牌都會更改，而我將無法成功提交該帖子。

Answer 1

有多種選擇該元素的方法。 您可以嘗試例如以下CSS選擇器，它們將根據頁面上的哪些元素而起作用：

• 基於確切名稱屬性匹配的"input[name = 'data[content1_html]']"
• 基於id屬性開頭的"input[id ^= 'hdndata[content1_html]']"

現在，要更改值，您需要使用casper.evaluate() ，因為只能通過此功能訪問DOM，而CasperJS在這種情況下不提供任何便利功能。 它是沙盒，因此您需要顯式傳遞值。

casper.evaluate(function(selector, value){
    document.querySelector(selector).value = value;
}, selector, value);

可能需要等到頁面中出現該輸入字段：

casper.waitForSelector(selector, function then(){
    this.evaluate(function(selector, value){
        document.querySelector(selector).value = value;
    }, selector, value);
    // Do something to submit the form
});

如果足以在提交表單之前將此隱藏輸入添加到DOM，則此代碼如下：

casper.evaluate(function(value){
    var parent = document.querySelectorAll(".rteDiv")[1];

    // get dynamic ID
    var id = parent.querySelector("[id ^= 'Buttons1_']").id.replace("Buttons1_rte", "");

    var input = document.createElement("input");
    input.type = "hidden";
    input.id = "hdndata[content1_html]_" + id;
    input.value = value;
    input.name = "data[content1_html]";

    parent.appendChild(input);
}, value);

我假設第二個.rteDiv是您要使用的那個，因為另一個是演示。