Take screenshots of different resolutions of the Web page with JavaScript (Chrome + Puppeteer + Node JS)

What Will We Learn?

In this tutorial, we will cover how we can take a screenshots of a web page of different resolutions using Puppeteer. Puppeteer is the official tool for Chrome Headless by Google Chrome team.

Let say we want to take a screenshot of multiple pages for different resolutions like..

 devices 
 [
    { name 'Highest', width: 1920, height: 1080 },
    { name 'Laptop-1', width: 1366, height: 768 },
    { name 'Laptop-2', width: 1360, height: 768 },
    { name 'Small-Desktop-1', width: 1280, height: 800 },
    { name 'Small-Desktop--2', width: 1024, height: 768 },
    { name 'Ipad-Tab', width: 768, height: 1024 },
    { name 'Android', width: 360, height: 640 },
    { name 'Iphone', width: 375, height: 667 },
];

 urls 
 [
    { name 'Google', link: 'https://www.google.com' },
    { name 'Twitter', link: 'https://www.twitter.com' },
    { name 'Facebook', link: 'https://www.facebook.com' },
    { name 'Third Rock Techkno', link: 'https://www.thirdrocktechkno.com'}
  ];

Problem We Are Solving

We wanted to create a script which can help our Quality Assurance guy. Currently he has to change the resolution of the every page to check the responsiveness. Now using puppeteer we are creating a script which will generate screenshots of all the mentioned URLs and resolutions. So once the script has been executed he can just go through the created screenshots and create bugs for respective designer/developer.

What Tool We Need?

First we need to install node. After that we install puppeteer with the following command.

npm install --save puppeteer

Below gist will generate screenshots of all the specified resolutions and URLs.

const puppeteer = require('puppeteer');
//const mkdirp = require('mkdirp');
const fs = require('file-system');

// Put your custom dimension and name Here
const devices = [
    { name: 'Highest', width: 1920, height: 1080 },
    { name: 'Laptop-1', width: 1366, height: 768 },
    { name: 'Laptop-2', width: 1360, height: 768 },
    { name: 'Small-Desktop-1', width: 1280, height: 800 },
    { name: 'Small-Desktop--2', width: 1024, height: 768 },
    { name: 'Ipad-Tab', width: 768, height: 1024 },
    { name: 'Android', width: 360, height: 640 },
    { name: 'Iphone', width: 375, height: 667 },
];


// Enter URL which will be captured
const urls = [
    { name: 'Google', link: 'https://www.google.com' },
    { name: 'Twitter', link: 'https://www.twitter.com' },
    { name: 'Facebook', link: 'https://www.facebook.com' },
    { name: 'Third Rock Techkno', link: 'https://www.thirdrocktechkno.com'}];

async function setViewports(device, url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.waitFor(500);
    await page.goto(url.link);

    // Setting-up viewports 
    await page.setViewport({
        width : device.width,
        height: device.height
    });
    await getScreenshots(device, url, page, browser);
}


// Directory Create if not exist
async function getScreenshots(device, url, page, browser) {
    var new_location = device.name+`(`+ device.width+`-`+device.height +`)`;
    fs.mkdir(new_location, function (err) {
        if (err) { //console.log(err) 
        }
    });

    await page.screenshot({
        path: new_location +`/`+ url.name + `.png`,
        fullPage: true
    });
    browser.close();
}

async function getUrlAndResolutions(devices, urls) {
    for (let device of devices) {
        for (let url of urls) {
            await setViewports(device, url);
        }
    }
}
getUrlAndResolutions(devices, urls);

You can checkout our code here

We look forward hear your comments about the implementations. If you are looking to get your websites tested and assessed by using the automation testing just drop us a message and experts from Third Rock Techkno will get back to you in 4 hours.

Visit Third Rock Techkno to know more about our expertise in AngularJS, NodeJS and IONIC.

We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best. Planning to build a completely secure and efficient Node app? 'Hire Node JS Developer'.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.