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:
npm i puppeteer@18.1.0
(Note the specific version number, given the "unstable" status of the project)
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.
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:
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.