Question

I have a web page where after the dom is loaded javascript continues to run on the page and adds elements onto the page. After all the javascript is run I fire a jquery event page.loaded so that components on the page that are interested in doing something after all my javascripts are run can do so.

I am trying to automate the testing of this webpage using casperjs/phantomjs and I would like to examine elements on the page only after the jQuery page loaded event is fired. How should I go about doing this?

Answer 1

Look at the waitFor family functions in order to wait for something to happen in the page environment. You can either wait for some element or text to be available in the DOM, or directly add a specific jQuery listener in order to process further steps:

casper.start('test.html', function() {
    this.evaluate(function() {
        $(document).on('site:loaded', function() {
            window.siteLoaded = true;
        });
    });
});

casper.waitFor(function() {
    return this.evaluate(function() {
        return window.siteLoaded === true;
    });
});

casper.then(function() {
    // process further
});

Note: this is factice pseudo code, purpose is only to picture the concept.