Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This script screenshots an array of URLs against an array of viewports after dynamically scrolling through the entire page using jQuery.
'use strict';
var page = require('webpage').create();
var loadInProgress = false;
var pageIndex = 0;
var viewportIndex = 0;
var urls = [
'https://google.com',
'https://kokorugs.com'
];
var viewports = [
{ width: 1440, height: 805 },
{ width: 768, height: 1024 },
{ width: 320, height: 568 }
];
page.onLoadStarted = function() {
loadInProgress = true;
console.log('Page ' + (pageIndex + 1) + ' of ' + urls.length + ' (' + page.viewportSize.width + ' x ' + page.viewportSize.height + ') load started.');
};
page.onLoadFinished = function() {
page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', function() {
page.evaluate(function() {
$('html, body').animate({ scrollTop: $(document).height()-$(window).height() }, 1000);
});
setTimeout(function() {
loadInProgress = false;
page.render('images/' + (pageIndex + 1) + '_' + page.viewportSize.width + 'x' + page.viewportSize.height + '.png');
console.log('Page ' + (pageIndex + 1) + ' of ' + urls.length + ' (' + page.viewportSize.width + ' x ' + page.viewportSize.height + ') load finished.');
pageIndex++;
}, 2000);
});
};
setInterval(function() {
if (viewportIndex < viewports.length) {
page.viewportSize = viewports[viewportIndex];
if (!loadInProgress && pageIndex < urls.length) {
page.open(urls[pageIndex]);
}
if (pageIndex === urls.length) {
pageIndex = 0;
viewportIndex++;
console.log('Viewport ' + page.viewportSize.width + ' x ' + page.viewportSize.height + ' complete.');
}
} else {
console.log('Done.');
phantom.exit();
}
}, 250);
console.log('Number of URLs: ' + urls.length);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment