Take a screenshot

A simple guide to take a screenshot and store it in the cloud with Phantombuster

Before starting to learn how to take a screenshot you need to be familiar with the notion of Agent, NickJS and BusterJS. If you don't, take a look at our Quick Start guide.

Why screenshots?

First of all, I want to help you understand what screenshots can be used for.
There are two main usages for screenshots:

  1. Debug use: when navigating through many pages, it's an easy way to verify that you are where you want to be and to be sure elements of the page are correctly loaded. We often see users take screenshots when coding their scripts. Then they remove them (or put them behind a flag) before putting the script in production to avoid data usage.
  2. Data collection use: sometimes you just need to store the rendering of the pages you scrape. Many users do this for reporting purposes (it can be very practical to save a specific page as PDF).

Let's take a screenshot

To take a screenshot from a script, nothing is more simple:

await tab.screenshot("filename.jpg")

Just call tab.screenshot(), the argument being the name of the file. The allowed image types are png, jpg and pdf (yes, you can generate PDFs from pages with Phantombuster).

After taking a screenshot, the file is saved in your agent directory. If you remove the Phantombuster flag save-folder from the beginning of your code, you'll need to use buster.save() to save the screenshot to your cloud storage.

Complete example

I will explain a simple scenario so you can understand how this works.

In this example, we take a screenshot of the homepage of our Scraping Challenges, a simple website you can use to improve your scraping skills.

  1. First of all, we create our agent.
  1. Then we will write a simple script using open(), waitUntilVisible() and screenshot().
"phantombuster command: nodejs"
"phantombuster package: 4"
"phantombuster flags: save-folder"

// The part in the upper part is phantombuster configuration
// Don't bother understanding it all
// just that the flag "save-folder" save all files created
// on the phantombuster cloud (here the screenshot)

const Nick = require("nickjs")
const nick = new Nick()
  
nick.newTab().then(async (tab) => {
  await tab.open("http://scraping-challenges.phantombuster.com/")
  await tab.waitUntilVisible("div.container")
  await tab.screenshot("homepage.png")
})
.then(() => {
  nick.exit(0)
})
.catch((err) => {
  console.log(`An error occured: ${err}`)
  nick.exit(1)
})
"phantombuster command: nodejs"
"phantombuster package: 4"
"phantombuster flags: save-folder"

// The part in the upper part is phantombuster configuration
// Don't bother understanding it all
// just that the flag "save-folder" save all files created
// on the phantombuster cloud (here the screenshot)

const Nick = require("nickjs")
const nick = new Nick()

nick.newTab().then(tab => {
	return tab.open("http://scraping-challenges.phantombuster.com/")
	.then(() => tab.waitUntilVisible("div.container"))
	.then(() => tab.screenshot("homepage.png"))
})
.then(() => {
	nick.exit(0)
})
.catch((err) => {
	console.log(`An error occured: ${err}`)
	nick.exit(1)
})
"phantombuster command: nodejs"
"phantombuster package: 4"
"phantombuster flags: save-folder"

// The part in the upper part is phantombuster configuration
// Don't bother understanding it all
// just that the flag "save-folder" save all files created
// on the phantombuster cloud (here the screenshot)

const Nick = require("nickjs")
const nick = new Nick()

nick.newTab((err, tab) => {
  if (err)
    nick.exit(1)
  tab.open("http://scraping-challenges.phantombuster.com/", (err) => {
    if (err)
      nick.exit(1)
    tab.waitUntilVisible("div.container", 5000, "and", (err) => {
      if (err)
        nick.exit(1)
      tab.screenshot("homepage.png", (err) => {
        if (err)
          nick.exit(1)
        nick.exit(0)
      })
    })
  })
})

Watch your new bot do its job

Launch your bot and enjoy your screenshot!

Take a screenshot

A simple guide to take a screenshot and store it in the cloud with Phantombuster