用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是您要使用的那个，因为另一个是演示。