DEV Community

Cover image for Practical Puppeteer: Playing with Puppeteer Core package
Sony AK
Sony AK

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Get the executable path for Chrome or Chromium browser.

On my Ubuntu machine, I just type this.

whereis google-chrome-stable
Enter fullscreen mode Exit fullscreen mode

It will print like below.

google-chrome-stable: /usr/bin/google-chrome-stable /usr/share/man/man1/google-chrome-stable.1.gz
Enter fullscreen mode Exit fullscreen mode

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();
})();
Enter fullscreen mode Exit fullscreen mode

Run it

node puppeteer_core.js
Enter fullscreen mode Exit fullscreen mode

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

Chrome/79.0.3945.88
Enter fullscreen mode Exit fullscreen mode

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

Credits

Top comments (5)

Collapse
 
vaasudhand profile image
Vaasu Dhand

Thanks man! This was helpful

Collapse
 
sonyarianto profile image
Sony AK

Hi Vaasu, glad to hear that :)

Collapse
 
chan_austria777 profile image
chan 🤖

if i want to deploy an api server that uses puppeteer-core instead of puppeteer, how do i specify the path to the browser?

Collapse
 
paularah profile image
Paul Arah

You'd ave to install chrome/chromium and all the needed dependencies and everything else is the same. I'd advise you use puppeteer over puppeteer-core because of reliability in your server environment.

Collapse
 
desertsniper87 profile image
Samidhya Sarker

Thank you man! After unsuccessfully trying to use chromium-browser in puppeteer, yours is the first post that led me to the right direction.