Visiting multipe different webpages and capturing each doesnt work. Despite synchronous loops and asyncjs...

[Eligible9653]

I know this has been a topic that was opened as an issue a few times. But eventhough I've read through them I havent found out a propper way to fix my problem yet.

Without the asyncjs library

The script

var $ = require('../node_modules/jquerygo/lib/jquery.go.js');
$.config.viewportSizeSet = true;
$.config.width = 991;
var links = [
    {
        url: "http://google.com",
        sitename: "Google"
    },
    {
        url: "http://example.com/",
        sitename: "Example"
    },
    {
        url: "http://phantomjs.org",
        sitename: "PhantomJS"
    }
];

var snapShoot = function ($, siteName, done) {
    $.capture(__dirname + '/screenshot' + siteName + '.png',done);
};

var asynPageCapture = function (i) {
    if (i < links.length) {
        $.visit(links[i].url, function () {
            $.waitForPage(function () {
                snapShoot($, links[i].sitename, function () {
                    console.log('iterator', i + 1);
                    asynPageCapture(i + 1);
                });
            });
        });
    }
};

asynPageCapture(0);

The output in the console

Navigating to http://google.com
Viewport set to: 991x1080
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotGoogle.png
iterator 1
Navigating to http://example.com/
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotGoogle.png
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotExample.png
iterator 1
Navigating to http://example.com/
iterator 2
Navigating to http://phantomjs.org
ERROR: Operation canceled
Closing

With asyncjs

The Script

var $ = require('../node_modules/jquerygo/lib/jquery.go.js');
var async = require('../node_modules/jquerygo/node_modules/async/lib/async.js');
// Add some default configs.
//$.config.site = 'http://localhost';
$.config.viewportSizeSet = true;
$.config.width = 991;
var links = [
    {
        url: "http://google.com",
        sitename: "Google"
    },
    {
        url: "http://example.com/",
        sitename: "Example"
    },
    {
        url: "http://phantomjs.org",
        sitename: "PhantomJS"
    }
];
async.series([
        function () {
            async.eachSeries(links, function (link, done) {
                $.visit(link.url, function () {
                    snapShoot($, link.sitename, done);
                });
            });
        }
    ], function () {
        $.close();
    }
);
var snapShoot = function ($, siteName, done) {
    $.waitForPage(function () {
        $.capture(__dirname + '/screenshot' + siteName + '.png', done);
    });
};

The output

Navigating to http://google.com
Viewport set to: 991x1080
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotGoogle.png
Navigating to http://example.com/
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotGoogle.png
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotExample.png
Navigating to http://phantomjs.org
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotGoogle.png
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotExample.png
Capturing page at C:\phpstorm_projects\RWDTestingTool\probeipa\tool/screenshotPhantomJS.png

Im really wondering what I'm doing wrong here, been going at this for hours now. I haven't found any useful information on the matter and would really appreciate your help. Thanks for taking the time. Cheers Joel

[ColinRoberts]

Any updates on this?

[serraventura]

it's working with async, right? anyway, any news?