Documenting Problems That Were Difficult To Find The Answer To

Waiting For Page To Load In PhantomJS

Here is a function I’ve created which waits for an element in the DOM to appear in PhantomJS.

Some modern JavaScript-dependant pages will accept your form submission then dynamically load the desired response – but this can take some time.


The following function takes four parameters:

  • page – reference to the PhantomJS webpage object
  • selector – a string to pass to document.querySelector() to wait for
  • expiry – milliseconds past epoch at which waiting should cease
  • callback – the function to call on expiry or selector element found


For example:

    // click button
        function () {

        "span.from", // wait for this object to appear
        (new Date()).getTime() + 5000, // timeout at 5 seconds from now
        function (status) {
            system.stderr.writeLine( "- submission status: " + status );

            if ( status ) {
                // success, element found by waitFor()
                page.render( "/tmp/results.png" );
                process_rows( page );
            } else {
                // waitFor() timed out
                phantom.exit( 1 );


The waitFor() function is defined as:

function waitFor( page, selector, expiry, callback ) {
    system.stderr.writeLine( "- waitFor( " + selector + ", " + expiry + " )" );

    // try and fetch the desired element from the page
    var result = page.evaluate(
        function (selector) {
            return document.querySelector( selector );
        }, selector

    // if desired element found then call callback after 50ms
    if ( result ) {
        system.stderr.writeLine( "- trigger " + selector + " found" );
            function () {
                callback( true );

    // determine whether timeout is triggered
    var finish = (new Date()).getTime();
    if ( finish > expiry ) {
        system.stderr.writeLine( "- timed out" );
        callback( false );

    // haven't timed out, haven't found object, so poll in another 100ms
        function () {
            waitFor( page, selector, expiry, callback );

Some notes should be made. This function actually polls every 100 milliseconds. When it detects the desired object in the DOM it waits a further short period of 50 milliseconds as a precautionary measure in case the page was in the middle of generating at the time the element was detected.

One response to “Waiting For Page To Load In PhantomJS

  1. Jeremy Epstein August 19, 2014 at 2:04 am

    Thanks for this snippet, very handy! I used this to wait for all AJAX-loaded elements on a page to appear, before using PhantomJS to render the page to PDF output. Examples elsewhere indicated that I’d need to use CasperJS for this; but your example shows that it’s possible just with PhantomJS, using page.evaluate and document.querySelector.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: