DEV Community

Cover image for develop & implement some of the most common uses of puppeteer via pptr.io
Sourabh Choraria
Sourabh Choraria

Posted on

develop & implement some of the most common uses of puppeteer via pptr.io

background

in case this is the very first time you're hearing about puppeteer, i'd highly recommend googling what it does first and also refer to the official documentation to get a quick sense of what it's all about.

here's a video from the docs that should help you get started too β€”

intro

a couple days ago, i launched pptr.io with the purpose to deliver a free & open source api that runs puppeteer as a service β€” think of it a spin-off of the original pptraas.com (defunct) tool.

the entire service is powered by vercel β€” specifically, it's serverless functions offering.

as of this post, the api is able to deliver the following β€”

  1. capture a screenshot from a given url
  2. fetch metrics of a page
  3. get a timeline trace
  4. render page as a pdf

...more to be added soon πŸ˜‰

i've ensured to keep the documentation as simple as possible and you can find all you need on that here β€”

GitHub logo choraria / pptr-io

puppeteer as a service.

pptr.io

a free and open-source api that runs puppeteer as a service.

License vercel puppeteer-core chrome-aws-lambda twitter

powered by vercel

table of contents

usage

  • base url
    • production: https://pptr.io/
    • preview (staging): https://dev.pptr.io/
  • default path: api/
  • endpoint: any one of the individual .js files in the api folder
    • ignore the index.js file inside the api folder

endpoints

screenshot

  • task: takes a screenshot of the input url
  • class: page.screenshot
  • method: GET
  • api: https://pptr.io/api/screenshot?url=https://dev.to
  • source: screenshot.js
optional params type description default
width number width of the screenshot. 1920
height number height of the screenshot. 1080
deviceScaleFactor number device scale factor (can be thought of as DPR). 1
fullPage boolean when true, takes a screenshot of the full scrollable page. false
type string can be either jpeg, png or webp. png
sample output of the screenshot endpoint

screenshot

metrics

  • task: fetch metrics of the page
  • class: page.metrics
  • …

contribute

i'm actively working to β€”

  1. partner with folks who'd want to add more methods to the api.
  2. check-in with the community on some feedback & inspiration on what new can be done.

discuss

feel free to reach out in case you have any cool problem statements that you'd like to see solved using this api β€”

Discussion (0)