Simple Puppeteer Screenshot Application

screenshooter.js

const puppeteer = require("puppeteer")
const path = require("path")

const DIRECTORY = "https://ladesignconcepts.com/shop-by-brand/"

const main = async (device) => {

  const browser = await puppeteer.launch()

  try {
    const context = await browser.createIncognitoBrowserContext();
    const page = await context.newPage();

    await page.goto(DIRECTORY)

    const brands = await page.$$(".shop-list a")

    for (let [i, brand] of brands.entries()) {
      const href = await page.evaluate(el => el.href, brand)
      const text = await page.evaluate(el => el.textContent, brand)

      const newPage = await browser.newPage()
      
      await newPage.setViewport({
        width:
          device === "mobile"
            ? 400
            : device === "tablet-h"
            ? 1024
            : device === "tablet-v"
            ? 768
            : 1360,
        height:
          device === "mobile"
            ? 800
            : device === "tablet-h"
            ? 768
            : device === "tablet-v"
            ? 1024
            : 768
      })

      await newPage.goto(href)

      await newPage.screenshot({
        path: path.join(__dirname, "screenshots", device, `${text}.png`)
      })

      console.log(`Screenshot saved for ${text}`)
      
      await newPage.close()
    }

    await browser.close()
  } catch (error) {
    console.log(error)
  } finally {
    console.log(`Screenshots saved to ${path.join(__dirname, "screenshots")}`)
  }
}

main('desktop')