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);
puppeteer.js

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.

· · · ·

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.

Agile Scrum Methodology: Scrum Lessons I Learned As A Beginner

When I joined Third Rock Techkno [https://www.thirdrocktechkno.com/] as a junior developer, I was delighted to know that I would be working in a scrum team for the very first project of my life. I knew for sure that agile scrum methodology is a great opportunity to grow as a developer. Scrum lessons I learned as a beginner here have imbibed in me the skills and attitude that I’d otherwise have learned much later in my career. Ever since my engineering college days, I was obsessed with joining

Read More

How to set up a cron job in NodeJS?

Ever wanted to do specific things on your application server at certain times without having to physically run them yourself. Trust me there always comes a time in app development where you will want to automate certain aspects of our project.

Read More

How to set Environment Variable in node js?

Today I will explain how to access the Environment variable in the Node js project. Working with environment variables is a great way to configure different aspects of your Node.js application.

Read More