puppeteer-nvia.ts

import fs from 'fs'
import path from 'path'
import puppeteer from 'puppeteer-core'
import * as browsers from '@puppeteer/browsers'

const VIEWPORT = { width: 1000, height: 1000 }
const OUT_DIR = path.join(process.cwd(), 'out')
const CACHE_DIR = path.join(process.cwd(), '.cache', 'puppeteer')

main(
  'project_602c8a84-5b0d-4850-bab6-1aefb2cfe208',
  'page_f1b94d43-ea6e-43c1-aa4d-b8cb8e37702f'
)

async function main(projectId: string, pageId: string) {
  const browser = await puppeteer.launch({
    executablePath: await getBrowserPath(browsers.Browser.CHROMEHEADLESSSHELL),
    defaultViewport: VIEWPORT,
  })

  console.log('Browser:', await browser.version())
  console.log('Opening browser...')
  const page = await browser.newPage()

  console.log('Opening preview...')
  await page.goto(
    `http://dev.nvia.app/email-editor/${projectId}/preview/raw?page=${pageId}`
  )

  const element = await page.waitForSelector('#preview', { timeout: 10000 })
  if (!element) throw new Error('Target Element not found.')

  console.log('Waiting for rendering...')
  await new Promise((res) => setTimeout(res, 500))
  const output = await element.screenshot({ type: 'jpeg' })

  const outFilePath = confirmDirExists(
    path.join(OUT_DIR, projectId, `${pageId}.jpg`)
  )

  fs.writeFileSync(outFilePath, output)
  await browser.close()
}

async function getBrowserPath(browser: browsers.Browser) {
  let isBrowserDownloading = false
  const installedBrowser = await browsers.install({
    browser: browser,
    cacheDir: CACHE_DIR,
    buildId: await browsers.resolveBuildId(
      browser,
      browsers.detectBrowserPlatform(),
      'latest'
    ),

    downloadProgressCallback: (downloadedBytes, totalBytes) => {
      const percentage = (downloadedBytes / totalBytes) * 100
      const downloadedUnit = convertBytesToUnit(downloadedBytes)
      const totalSizeUnit = convertBytesToUnit(totalBytes)

      if (isBrowserDownloading) {
        process.stdout.cursorTo(0)
        process.stdout.clearLine(0)
      } else {
        console.log('Downloading browser...')
        isBrowserDownloading = true
      }

      process.stdout.write(
        `Downloaded ${percentage.toFixed(
          2
        )}% (${downloadedUnit} / ${totalSizeUnit})`
      )
    },
  })

  if (isBrowserDownloading) console.log('')
  return installedBrowser.executablePath
}

function convertBytesToUnit(bytes: number): string {
  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  let index = 0
  let value = bytes

  while (value >= 1024 && index < units.length - 1) {
    value /= 1024
    index++
  }

  return `${value.toFixed(2)} ${units[index]}`
}

function confirmDirExists(target: string) {
  const dirPath = path.dirname(target)
  if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath, { recursive: true })
  return target
}