PhantomCSS screenshot not working correctly inside for loop

Question

I would like to capture a screenshot on every page. In order to navigate to a different page there is a function moveNext(). When I check in the console I am able to see that its navigating to all the pages in sequence. However, its not taking screenshot simultaneously at every page instead, it takes multiple screenshots of the last page. Does casperjs offer callback or waiting option?

casper.then(function () {
            for (var currentPage = startPage; currentPage < lastPage; currentPage++) {              
                this.page.evaluate(function(currentPage) {
                    moveNext(currentPage);
                }, currentPage);
                phantomcss.screenshot('html', 'screenshot');
                console.log(currentPage);
            }
        });

score 0 · Answer 1 · 2016-12-06T05:33:30.943

The for loop won't work cuz it is too fast. You could use something like:

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    viewportSize:{width: 1600, height: 900}
});
var currentPage = 0,lastPage=5;
casper
     .start()
            .then(function to_call() {
                      if(currentPage<lastPage){
                         currentPage++;
                       /*  this.page.evaluate(function(currentPage) {
                         moveNext(currentPage);
                         }, currentPage);
                         phantomcss.screenshot('html', 'screenshot');*/
                         this.echo("The currentPage number is: "+currentPage,"INFO");
               this.wait(3000).then(to_call)
               }

        })

 .run();

score 0 · Accepted Answer · answered Dec 21 '16 at 09:57

function captureScreenshot(width, height, device, startPage, lastPage) {
        casper.viewport(width, height);

        casper.then(function () {
            var currentPage = startPage - 1;

            /* Capture screenshot of footer */
            phantomcss.screenshot('footer', 'footer');

            /* Capture screenshot of header */
            phantomcss.screenshot('header', 'header');

            /* Capture main content screenshot */
            casper.repeat(lastPage, function () {
                this.page.evaluate(function (currentPage) {
                    moveNext(currentPage);
                }, ++currentPage);

                this.wait(8000, function () {
                    phantomcss.screenshot('#NavForm > .container', 'main-content');
                });
            });
        });
}

PhantomCSS screenshot not working correctly inside for loop

2 Answers2