Last updated 3rd June 2021

Objective

Headless Chrome is a headless browser that can be configured on projects like any other service on Web PaaS.

You can interact with the headless-chrome service container using Puppeteer, a Node.js library that provides an API to control Chrome over the DevTools Protocol.

Puppeteer can be used to generate PDFs and screenshots of web pages, automate form submission, and test your project's UI. You can find out more information about using Puppeteer on GitHub or in their documentation.

Supported versions

Relationship

The format exposed in the $PLATFORM_RELATIONSHIPS environment variable:

{
    "service": "headless",
    "ip": "169.254.73.96",
    "hostname": "3rxha4e2w4yv36lqlypy7qlkza.headless.service._.eu-3.platformsh.site",
    "cluster": "moqwtrvgc63mo-master-7rqtwti",
    "host": "headless.internal",
    "rel": "http",
    "scheme": "http",
    "type": "chrome-headless:73",
    "port": 9222
}

Requirements

Puppeteer requires at least Node.js version 6.4.0, while using the async and await examples below requires Node 7.6.0 or greater.

Using the Web PaaS Config Reader library requires Node.js 10 or later.

Other languages

It will be necessary to upgrade the version of Node.js in other language containers before using Puppeteer. You can use Node Version Manager or NVM to change or update the version available in your application container by following the instructions in the Alternate Node.js install documentation.

Usage example

In your .platform/services.yaml:

headlessbrowser:
    type: chrome-headless:73

In your .platform.app.yaml:

relationships:
    chromeheadlessbrowser: "headlessbrowser:http"

You will need to use chrome-headless type when defining the service

```yaml

.platform/services.yaml

service_name: type: chrome-headless:version ```

and the endpoint http when defining the relationship

```yaml

.platform.app.yaml

relationships: relationship_name: “service_name:http” ```

Your service_name and relationship_name are defined by you, but we recommend making them distinct from each other.

After configuration, include Puppeteer as a dependency in your package.json:

{
  "dependencies": {
    "puppeteer": "^1.14.0"
  }
}

Using the Node.js Config Reader library, you can retrieve formatted credentials for connecting to headless Chrome with Puppeteer:

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

const config = platformsh.config();
const credentials = config.credentials('chromeheadlessbrowser');

and use them to define the browserURL parameter of puppeteer.connect() within an async function:

exports.takeScreenshot = async function (url) {
    try {
        // Connect to chrome-headless using pre-formatted puppeteer credentials
        const formattedURL = config.formattedCredentials('chromeheadlessbrowser', 'puppeteer');
        const browser = await puppeteer.connect({browserURL: formattedURL});

        ...

        return browser

    } catch (error) {
        console.error({ error }, 'Something happened!');
        browser.close();
    }
};

Puppeteer allows your application to create screenshots, emulate a mobile device, generate PDFs, and much more.

You can find some useful examples of using headless Chrome and Puppeteer on Web PaaS on the Community Portal:

• How to take screenshots using Puppeteer and Headless Chrome
• How to generate PDFs using Puppeteer and Headless Chrome

These guides might also interest you...