Practical Puppeteer: Playing with Puppeteer Core package

If you used to play with Puppetter, you must be already know that when installing Puppeteer (with npm i puppeteer) it will install recent version of Chromium browser. So it's quite big download size and usually takes long time during installation.

As stated on the documentation below.

Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API.

Today we will try to use Puppeteer Core (package name puppeteer-core), a version of Puppeteer that doesn't download Chromium by default. It available since Puppeteer version 1.7.0.

What does it means? It means you can use existing Chrome or Chromium browser for browsing automation with Puppeteer. And again according to documentation said below.

Be sure that the version of puppeteer-core you install is compatible with the browser you intend to connect to.

Okay, no problem we will try first. I am sure for general use case it will work.

The difference between puppeteer and puppeteer-core in the term of launch settings is we have to define the Chrome or Chromium browser executable path. Technically we have to define executablePath option that contains the Chrome or Chromium browser path. We will show this later on the source code.

Let's start.

Scenario

I am using Ubuntu 19.10 eoan and I already have Google Chrome installed and now I want to try puppeteer-core. I don't know what current version of Google Chrome installed. I will create the script that use puppeteer-core to show my Google Chrome version. It's pretty simple.

Preparation

Install Puppeteer Core (puppetter-core) package.

npm i puppeteer-core

Get the executable path for Chrome or Chromium browser.

On my Ubuntu machine, I just type this.

whereis google-chrome-stable

It will print like below.

google-chrome-stable: /usr/bin/google-chrome-stable /usr/share/man/man1/google-chrome-stable.1.gz

OK, it means the Google Chrome available at /usr/bin/google-chrome-stable.

So far we are ready to go.

The code

File puppeteer_core.js

const puppeteer = require('puppeteer-core');

(async () => {
    // set some options (set headless to false so we can see 
    // this automated browsing experience)
    let launchOptions = { headless: false, 
                          executablePath: '/usr/bin/google-chrome-stable', // because we are using puppeteer-core so we must define this option
                          args: ['--start-maximized'] };

    const browser = await puppeteer.launch(launchOptions);
    const page = await browser.newPage();

    // set viewport and user agent (just in case for nice viewing)
    await page.setViewport({width: 1366, height: 768});
    await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');

    // go to the target web
    await page.goto('https://google.com');

    console.log(await browser.version());

    // close the browser
    await browser.close();
})();

Run it

node puppeteer_core.js

On my Ubuntu system it will return below in the console.

Chrome/79.0.3945.88

Oh yeah, now I know my existing Chrome browser exact version.

The source code in this post also available on my GitHub repository at https://github.com/sonyarianto/puppeteer-core-package-example

Thank you and I hope you enjoy it.

Reference

• https://pptr.dev
• https://github.com/puppeteer/puppeteer
• https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#puppeteer-vs-puppeteer-core

Credits

• Cover image by Christina Morillo https://www.pexels.com/photo/photography-of-person-typing-1181675/