PhantomCSS - Unable to invoke function from DOM

Question

I'm trying to invoke moveNext function which is already present on the page. This function helps to navigate to a particular page by passing value as an argument eg: moveNext(2). I want to capture screenshot starting from first page until the last page. However, when I run this command in the terminal casperjs test testsuite.js it captures 10 screenshot only of the first page instead of each from every page.

casper.start('https://example.com');

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

        var currentPage;

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

        casper.then(function now_check_the_screenshots() {
            // compare screenshots
            //phantomcss.compareAll();
            for (var i= 0; i < 10; i++) {
                phantomcss.compareExplicit(['/screenshot/layout/'+ device +'/screenshot-'+ i +'.jpg', '/screenshot/build/'+ device +'/screenshot-'+ i +'.png']);
                phantomcss.compareExplicit(['/screenshot/layout/'+ device +'/screenshot-'+ i +'.jpg', '/screenshot/build/'+ device +'/screenshot-'+ i +'.png']);    
            }
        });
    }

    /* Capture screenshot for desktop and compare them */
    captureScreenshot(1920, 1080, 'desktop', 0, 10);

    /* Capture screenshot for mobile and compare them */
    //captureScreenshot(375, 667, 'mobile');

    /* Casper runs tests */
    casper.run(function () {
        console.log('\nTHE END.');
        // phantomcss.getExitStatus() // pass or fail?
        casper.test.done();
    });

Update:

After adding casper.on("page.error/error"); i'm getting this error:

FAIL addListener only takes instances of Function
#    type: uncaughtError
#    file: testsuite.js:118
#    error: addListener only takes instances of Function
#           addListener@phantomjs://platform/events.js:118:74
#           phantomjs://code/testsuite.js:66:13
#           runStep@phantomjs://platform/casper.js:1577:31
#           checkStep@phantomjs://platform/casper.js:404:28
#    stack: not provided

do you use `casper.on("page.error/error/remote.message")` calback? and/or `verbose: true/logLevel: 'debug'` — , Dec 02 '16 at 11:11
@Igor After adding `casper.on("page.error/error/remote.message")` I'm getting error message. Please refer the updated question. — Rahul Dagli, Dec 02 '16 at 11:21

score 1 · Accepted Answer · answered Dec 21 '16 at 09:59

casper.start('https://example.com');

    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');
                });
            });
        });

        casper.on('remote.message', function (msg) {
            this.echo(msg);
        })

        casper.on('error', function (err) {
            this.die("PhantomJS has errored: " + err);
        });

        casper.on('resource.error', function (err) {
            casper.log('Resource load error: ' + err, 'warning');
        });

        casper.on("page.error", function (msg, trace) {
            this.echo("Page Error: " + msg, "ERROR")
        });

        casper.then(function now_check_the_screenshots() {
            // compare screenshots
            //phantomcss.compareAll();
            for (var i = 0; i < 10; i++) {
                phantomcss.compareExplicit(['/screenshot/layout/' + device + '/screenshot_' + i + '.jpg', '/screenshot/build/' + device + '/screenshot_' + i + '.png']);
                phantomcss.compareExplicit(['/screenshot/layout/' + device + '/screenshot_' + i + '.jpg', '/screenshot/build/' + device + '/screenshot_' + i + '.png']);
            }
        });
    }

    /* Capture screenshot for desktop and compare them */
    captureScreenshot(960, 5000, 'desktop', 10, 17);

PhantomCSS - Unable to invoke function from DOM

1 Answers1