How to take screenshots using Puppeteer and Headless Chrome


To use Puppeteer and headless Chrome to create an ExpressJS application that takes website screenshots on


You will need:


Using headless Chrome to take screenshots of a website requires properly connecting the chrome-headless service container to the Node library Puppeteer by passing its credentials using the Node.js Config Reader libary.


The project will ultimately have the following structure:

├── .platform
│   ├── routes.yaml
│   └── services.yaml
├── index.js
├── package.json
├── package-lock.json
└── screenshots.js

1. Initialize the project

Create an empty project on using the CLI.

$ platform create

Create a new project directory for the application on your local machine called screenshots and cd into it. Initialize the directory as a Git repository and set its remote to the newly created project using the outputted project ID.

$ git init
$ platform project:set-remote <project ID>

2. Create the configuration files

  1. .platform/services.yaml

    Define the chrome-headless container using the supported version outlined in the Headless Chrome documentation.

        type: chrome-headless:73

    Configure the application nodejs:

    name: nodejs
    type: nodejs:10
      headless: "headless:http"
        spec: '*/30 * * * *'
        cmd: rm screenshots/*
        start: "nodejs index.js"
      "/screenshots": "shared:files/screenshots"
    disk: 512

    The configuration uses nodejs 10, since it is required to use the Config Reader library with Puppeteer. It defines the mount screenshots which will be the writable directory to save the screenshots the application takes.

    In order to prevent screenshots/ from filling up as people use it, a cron job is also defined that removes its contents every 30 minutes.

  3. .platform/routes.yaml

    Lastly, set up a basic routes configuration file, using the name of the application nodejs

        id: main
        type: upstream
        upstream: "nodejs:http"
        type: redirect
        to: "https://{default}/"

3. Write the screenshots.js file

Create a file in the project directory called screenshots.js with the following contents:

const puppeteer = require('puppeteer');
const platformsh = require('platformsh-config');

var exports = module.exports = {};

// Create an async function
exports.takeScreenshot = async function (url, screenshotID) {

    try {
        // Connect to chrome-headless using pre-formatted puppeteer credentials
        let config = platformsh.config();
        const formattedURL = config.formattedCredentials("headless", "puppeteer");
        const browser = await puppeteer.connect({browserURL: formattedURL});

        // Open a new page to the given url and take the screenshot
        const page = await browser.newPage();
        await page.goto(url);
        await page.screenshot({
            fullPage: true,
            path: `screenshots/${screenshotID}.png`

        await browser.close();

        return browser

    } catch (e) {
        return Promise.reject(e);


It defines an async function called takeScreenshot as a module export. The Node.js Config Reader retrieves the library’s formatted credentials for Puppeteer to create the formattedURL string.

path defines the saved location of the screenshot, while fullPage configures Puppeteer to take a screenshot of the entire page, not just the view seen within a window. Additional parameters for page.screenshot() can be found in the Puppeteer documentation.

4. Define index.js

Create the file index.js that defines the ExpressJS application app:

const fs = require('fs');
const uuidv4 = require('uuid/v4')
const platformsh = require('platformsh-config');
const express = require('express');

// Require screenshot file and its function
var screenshot = require("./screenshots.js");

// Build the application
var app = express()

// Define the index route
app.get('/', (req, res) => {
  res.writeHead(200, {"Content-Type": "text/html"});
    <title>Headless Chrome on</title>

<h1>Headless Chrome on</h1>

<h2>Take a screenshot of a page</h2>

Click submit to generate a png of the <a href=""> website</a>, or paste in another URL.


<form method="get" action="/result">
    <input type="text" name="screenshotURL" value="">
    <input type="submit">


// Define screenshot result route
app.get('/result', async function(req, res){
  // Create a randomly generated ID number for the current screenshot
  var screenshotID = uuidv4();
  // Take the screenshot
  await screenshot.takeScreenshot(req.query['screenshotURL'], screenshotID)
  // Define and download the file
  const file = `screenshots/${screenshotID}.png`;;

// Create config object to get PORT credentials
let config = platformsh.config();

// Start the server.
app.listen(config.port, function() {
    console.log(`Listening on port ${config.port}`)

In addition to the home route, index.js defines a /results path that calls takeScreenshot() and passes a randomly generated ID that will become part of the name for the generated png file.

5. Define the application’s dependencies

Include the application’s dependencies in package.json:

  "name": "chrome_headless",
  "version": "1.0.0",
  "description": "A simple example for taking screenshots with Puppeteer and headless Chrome on",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "Chad Carlson",
  "license": "MIT",
  "dependencies": {
    "platformsh-config": "^2.0.0",
    "puppeteer": "^1.14.0",
    "express": "^4.16.4",
    "uuid": "^3.3.2"

Then create the package-lock.json file by running

$ npm install

6. Push to

Commit the changes and push master to

$ git add .
$ git commit -m "Create screenshot application."
$ git push platform master

7. Verify

Use the command platform url when the build process has completed to visit the site. Click submit to take a screenshot of the website, or copy in another url to test the application.


Using ExpressJS, Puppeteer, and headless Chrome as a service, a simple application can be made that takes screenshots of an inputted url.

If you don’t want to use nodejs for it but prefer php, check out

use Nesk\Puphpeteer\Puppeteer;

$puppeteer = new Puppeteer;
$browser = $puppeteer->launch();

$page = $browser->newPage();
$page->screenshot(['path' => 'example.png']);