CasperJS navigation requested on every step with injected script

Question

I have recently started using CasperJS to test a piece of JavaScript that inserts a button and does some AJAX requests on a page. What I am seeing with my code that I am not seeing with the examples in the documentation is that it seems like CasperJS is reloading the original page at every step.

This resembles my code:

var casper = require('casper').create({
    clientScripts: ['MyScript.js'],
    verbose: true,
    logLevel: "debug"
});

casper.on('remote.message', function(msg) {
    this.log('Remote console message: ' + msg, 'warning');
});

casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36');

casper.start('http://www.wikipedia.org');

casper.then(function(){
    if (this.exists('div#my_btn')){
        this.click('#my_btn');
        this.capture('wikipedia.png', undefined, {
            format: 'jpg',
            quality: 75
        });
        this.waitFor(function check() {
            return this.evaluate(function() {
                return this.getHTML('div#my_btn_status').length > 0;
            }, function then() {
                this.echo('Key: ' + this.getHTML('div#my_btn_status'));
            });
        });
    } else {
        this.log('My btn not here', 'error');
    }
});

casper.run();

These are the logs I get back:

[info] [phantom] Starting...
[info] [phantom] Running suite: 3 steps
[debug] [phantom] opening url: http://www.wikipedia.org/, HTTP GET
[debug] [phantom] Navigation requested: url=http://www.wikipedia.org/, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://www.wikipedia.org/"
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Successfully injected Casper client-side utilities
[debug] [phantom] start page is loaded
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[info] [phantom] Step anonymous 3/3 http://www.wikipedia.org/ (HTTP 200)
[debug] [phantom] Mouse event 'mousedown' on selector: #my_btn
[debug] [phantom] Mouse event 'mouseup' on selector: #my_btn
[debug] [phantom] Mouse event 'click' on selector: #my_btn
[debug] [phantom] Capturing page to /Users/Me/Documents/Casper/wikipedia.png
[info] [phantom] Capture saved to /Users/Me/Documents/Casper/wikipedia.png
[info] [phantom] Step anonymous 3/3: done in 845ms.
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[info] [phantom] Step _step 4/4 http://www.wikipedia.org/ (HTTP 200)
[info] [phantom] Step _step 4/4: done in 919ms.
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
... (The above two lines get repeated a ton)
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Automatically injected MyScript.js client side
[warning] [phantom] Casper.waitFor() timeout
[error] [phantom] Wait timeout of 5000ms expired, exiting.
Wait timeout of 5000ms expired, exiting.

When #my_btn is clicked, MyScript.js performs an AJAX request which updates #my_btn_status.

As you can see, it seems that the page keeps reloading and MyScript.js keeps getting injected, thus I am never able to see the contents of #my_btn_status because the state of #my_btn keeps getting reset on page load.

I am running the script with this command:

casperjs --ignore-ssl-errors=true casper_test.js

EDIT: I've thought about this further, and I think it might be useful to know that MyScript.js also injects an iframe into the page, in addition to #my_btn. Is it possible that casperjs keeps injecting MyScript.js into every child iframe which would explain the url=about:blank, isMainFrame=false?

Answer 1

First, you capture the image at the same time you click the button, so your screen doesn't contain the updates.

Second, you use getHTML() : a casper function, in the page DOM environment (because of the evaluate function), where this function is unknown. Don't mixt the two context. Here the casper functions injected in the remote DOM environment : http://casperjs.readthedocs.org/en/latest/modules/clientutils.html.

Third, your waitFor() expired, because the check() closure is never true. It can't be true because of the unknow function getHTML(). What is strange is you haven't the error from the remote message event, but i don't think getHTML() exists in pure JS...

So you don't need to use evaluate(), getHTML() is a casper function, stay in the casper context.

After; your condition getHTML('').length is strange : you get back the html, so there is no method 'length' linked to the html content of your selector. Which condition do you want to be true ?

When you click on your button, is the content of another element ('div#my_btn_status') incremented?

Here a better structure :

casper.then(function(){
    if (this.exists('div#my_btn')){
        this.click('#my_btn');
        this.waitFor(function check() {
            return this.fetchText('div#my_btn_status')==='1';
            }, function then() {
                this.echo('Key: ' + this.getHTML('div#my_btn_status'));
                this.capture('wikipedia.png');
            });
        });
    } else {
        this.log('My btn not here', 'error');
    }
});

I've considered click on the button increase the content of 'div#my_btn_status' by 1. That's an exemple. Maybe parsing the string in int is necessary. (parseInt)