submitting simple form and capturing before and af

问题:

im trying to submit a simple form with phantomjs

here is my code

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

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
page.onLoadFinished = function(){

    page.render("after_post.png");
    console.log("done2!" );
    phantom.exit();

};

page.open('http://localhost/bimeh/phantom/testhtml.php', function(status) {

    page.includeJs("http://code.jquery.com/jquery-latest.min.js", function() {

        page.evaluate(function() {
           $("[name='xxx']").val('okk');
            page.render("pre_post.png");
            console.log('done1!');
            $('#subbtn').click();
        });
    });
});

the problem is i dont get the pre_post.png image her eis my output

$ phantomjs test.js
done2!

it seems onLoadFinished is called before page.evaluate can do anything ... also in the after_post.png i get picture of form before submit action

im using phantomjs 1.98 (i've downgraded from 2.1 becuz it want outputting errors apparently due to some bug in qt )

回答1:

This is wrong:

page.evaluate(function() {
    page.render("pre_post.png"); // <----
});

page.evaluate is as if you loaded a page in a browser and then run scripts in developer tools console. There is no variable page in there. page belongs to a PhantomJS level script:

page.open('http://localhost/bimeh/phantom/testhtml.php', function(status) {

    page.includeJs("http://code.jquery.com/jquery-latest.min.js", function() {
        page.render("pre_post.png");

        page.evaluate(function() {
            $("[name='xxx']").val('okk');
            $('#subbtn').click();
        });
    });
});

page.onLoadFinished is called every time a page has finished loading: the first time PhantomJS opens the script and the second when form is submitted. You may keep your function as it is and in this case if form is submitted the first screenshot of original page will be overwritten with the second screenshot.

However most likely your form won't be submitted because buttons don't have a click method in PhantomJS, it was added in 2.x.

Your script also lacks a crusial thing: error control. Please use page.onError callback to catch any errors on the page (you may simply copy the function from here: http://phantomjs.org/api/webpage/handler/on-error.html )