config.js

const breakpoints = [
  {
    width: 1440,
    height: 900,
    scale: 1
  },
  {
    width: 1024,
    height: 768,
    scale: 2
  },
  {
    width: 375,
    height: 667,
    scale: 2
  }
];

const urls = ['https://bassam.co', 'https://bassam.co/about'];

const baseURL = 'https://bassam.co';

module.exports = {
  breakpoints,
  baseURL,
  urls
};

index.js

// @ts-check
const puppeteer = require('puppeteer');
const slug = require('slug');
const { breakpoints, baseURL, urls } = require('./config');
  
let count = 0;
const screenshot = async () => {
  const browser = await puppeteer.launch({
    headless: true,
    ignoreHTTPSErrors: true,
    timeout: 0,
    args: ['--no-sandbox']
  });
  const page = await browser.newPage();

  await page.goto(baseURL);
  // await page.click('.cookie-accept');

  for await (const breakpoint of breakpoints) {
    await page.setViewport({
      width: breakpoint.width,
      height: breakpoint.height,
      deviceScaleFactor: breakpoint.scale
    });
    await openPageAndScreenshot(page, urls, breakpoint);
  }

  await browser.close();
};

async function main() {
  await screenshot();
}

main();

async function openPageAndScreenshot(page, urls, breakpoint) {
  for await (const url of urls) {
    const s = slug(url.replace(baseURL, ''));
    console.log(`Starting for ${s} with width ${breakpoint.width}`);
    await page.goto(url);
    await page.screenshot({
      path: `./screenshots/${count}-${s}.jpg`,
      fullPage: true,
      type: 'jpeg'
    });
    console.log('Done for ', s);
    count++;
  }
}