Grab HTML

Grab HTML

Create an account

Ensure you have created your account on ScreenGrab.cloud

https://screengrab.cloud/login (opens in a new tab)

Login, create a project and can get your api key.

https://screengrab.cloud/dashboard/projects (opens in a new tab)

ScreenGrab.js can also grab HTML

Grab the whole page HTML of the producthunt screengrab page.

import { ScreenGrab, Share } from "screengrab.js"
 
const screengrab = ScreenGrab('api-key')
 
const grab = await screengrab
  .url('https://www.producthunt.com/posts/screen-grab')
  .grabHTML()
 
console.log('html', grab.innerHTML) // html string

or grab only the comments with the CSS selector #comments

import { ScreenGrab, Share } from "screengrab.js"
 
const screengrab = ScreenGrab('api-key')
 
const grab = await screengrab
  .url('https://www.producthunt.com/posts/screen-grab')
  .grabHTML('#comments')

No need for an API. Just quick screengrabs!

Traversing the DOM

The returned HTML is a string. You can convert it to DOM with jsdom.

In the future we will implement this within the library once we have a solid tested API.

import { ScreenGrab, Share } from "screengrab.js"
import { JSDOM } from 'jsdom'
 
const screengrab = ScreenGrab('api-key')
 
const grab = await screengrab
  .url('https://www.producthunt.com/posts/screen-grab')
  .grabHTML('#comments')
 
const dom = new JSDOM(grab.innerHTML)
const paragraphs = dom
  .window.document.querySelectorAll("p")
  .map(p => p.textContent)
 
console.log('dom', dom)
console.log('paragraphs', paragraphs)