Skip to content

Instantly share code, notes, and snippets.

@scotthorn
Last active June 29, 2020 08:49
Show Gist options
  • Save scotthorn/b12c2c75d39c17922143 to your computer and use it in GitHub Desktop.
Save scotthorn/b12c2c75d39c17922143 to your computer and use it in GitHub Desktop.
Nightwatch.js script for taking screenshots of a given URL at various browser widths.
/*
* Takes provided URL passed as argument and make full height screenshots of this page
* with several viewport widths using Nightwatch.js with Selenium.
*
* These viewport widths are taken from common android and iOS devices. Modify as needed.
*
* Takes an optional second argument for the path where screenshots are saved.
*
* Usage:
* $ nightwatch -t viewport-shots.js http://example.com
* $ nightwatch -t viewport-shots.js http://example.com directory/to/save
*/
module.exports = {
"Viewport Screenshots" : function (browser) {
// Make sure a URL has been passed
if (process.argv.length < 5) {
console.log('No URL was specified');
browser.end();
}
var url = process.argv[4],
save_directory = 'screenshots',
viewport_widths = [240, 320, 360, 568, 603, 640, 768, 800, 960, 1024, 1280, 1400, 1600, 1920];
// Optional argument - path to save
if (process.argv.length >= 6) {
save_directory = process.argv[5];
}
browser.url(url).waitForElementVisible('body', 1000);
viewport_widths.forEach(function(width){
browser
.resizeWindow(width, 300)
.saveScreenshot(save_directory + '/' + width + '.png')
});
browser.end();
}
};
@quantuminformation
Copy link

Can these screenshots be accessed in a Travis build?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment