如何使用phantomjs在JS事件后获取更新的页面内容？

Question

I have a page with a simple form. This form has ONE input text.

I have this code:

page.open("http://www.example.com", function (status) {    
    page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
        page.evaluate(function() {
            $('input[name=myText]').val('my content');
        });     
    });     
});

(as you can see i also loaded jquery)

Now, when i set the content of this input text, the page changes, the content of the page changes.

My question is: how can I get the updated content? The problem is that i need to submit the form but i can not do it after:

$('input[name=myText]').val('my content');

because when i set it there is an JS event on the page that changes the content.

SO I must read the new content, find the form using JQuery and then submit it.

Could someone help me?

Thank you!

Answer 1

So your page.evaluate() call has a side effect and that changes the page. The question is whether this change occurs instantaneously. But you cannot assume that it does - particularly if it causes a fetch of new content from a remote webserver.

That being the case the best thing you can try is to sleep for a while and then assume your page has the new content. Or alternatively, when you feel more advanced, poll on a regular basis for a DOM object you are expecting to appear. But the beginner should try a sleep:

....
page.evaluate( function() { ... } );
window.setTimeout(
    function() {
        /* press submit button */
    },
    5000 /* wait 5 seconds (5,000ms) */
);
....