ckportfolio.com - Programming Web Browser via Node.js and Puppeteer

Programming Web Browser via Node.js and Puppeteer

npm and Puppeteer

Node.js has a healthy ecosystem of third-party plugins known as packages, and npm is the largest registry that we can use to source the necessary packages from. Within the project folder, we can launch the following command to install Puppeteer:

Terminal Command

npm i puppeteer

If successful, the terminal will display + puppeteer, along with the series of miscellaneous text messages. This means that we can now make a simple application that demonstrates a programmatic browser.

Programming Chrome with Node.js

Now that Puppeteer is available for our use, we can return to the code and start using the package:

main.js

const puppeteer = require('puppeteer');

The above code snippet allows us to start opening up a browser window programmatically. Using the provided documentation, we can construct the following snipppet to take a screenshot of any given website:

main.js

...

var url = "http://ckportfolio.com";
var screenshot = "screenshot.png";

(async () => {

    console.log("Loading the website...");

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url, {waitUntil: 'networkidle2'});

    await page.screenshot({path: screenshot})
    await browser.close();

    console.log("Screenshot successfully created.");

})();

The code snippet achieves the following in order:

  1. Create two variables for the website URL and the screenshot filename
  2. Indicate this code snippet will run asynchronously ("whenever it can, without being bound by a sequence")
  3. Launch a new headless browser, open a new window, and travel to the predefined URL
  4. After waiting for the page to finish loading, take a screenshot of the loaded website
  5. Close the browser

Upon launching the script again via node main.js, the terminal will correctly display the two console messages:

Because the project folder is publicly available online, we can use our own browser to travel to the folder (ex. http://ocad.ckprototype.com/public/{foldername}) and verify whether the screenshot.png file has been created.

Now that we can verify that the screenshot is being correctly generated by Puppeteer, we can move onto making this behaviour more dynamic and interactive by our script to respond to incoming SMS text messages.

Fin