JavaScript Bot with Puppeteer - A Soft Introduction

Robots are all over the internet handling automated tasks. They can be helpful in many ways. But how do we create them?

Many developers had to learn Python to create one but the narrative has changed over the years. JavaScript developers can now create a bot in their own language using Puppeteer. In this tutorial, I will give a very easy introduction to creating a bot. 😊

We will be operating on GEO SEARCH website. Do leave a star on the github repo. Thank You 🤗.

• Setting our project
• Creating our bot
• Final Code
• Demo

Setting our project

• Create a folder and name it js-bot-tutorial

mk dir js-bot-tutorial
cd js-bot-tutorial

• In the folder, create a file and name it index.js

// Mac Users
touch index.js

// Windows Users
echo .>index.js

• Initialize the project. You can hit the Enter button for all the prompts

npm init

• Install puppeteer

npm i puppeteer

Creating our bot

Goto to your index.js

• Require puppeteer like so:

const puppeteer = require("puppeteer");

• Create two variables (page and browser) and set them to null like so:

let page = null;
let browser = null;

• Launch a browser (by default it will launch chromium) and turn the headless off so that you can see what is going on

browser = puppeteer.launch({ headless: false })

To test if it is working, run node index in your terminal

• Add a then...catch... block next like so:

.then( async (browser) => {

})
.catch((error) => {
    console.log(error)
})

• In the then block, open a new tab with the following line

    page = await browser.newPage();

• Set the browser width to desktop size only and turn off mobile view with the following line:

      page.setViewport({
        width: 1280,
        height: 800,
        isMobile: false,
      });

• Launch the website that we will be using for this tutorial and wait until the network is good and the page is well loaded like so:

page.goto("https://eberegit.github.io/Geo-Search/index.html", {
      waitUntil: "networkidle2",
    });

We now want to search for a location by typing into the search input and clicking the search button

• Let's locate the input using the inspect element

To be able to target an element, we need to find a unique attribute. In this case, name and class attributes are unique. I will be using the name attribute since it is more specific

• Wait for the search input to have finished loading on the page with the following line of code

await page.waitFor('input[name="search-field"]');

• Type the location you want to search after 2 seconds delay

    await page.waitFor(2000);
    await page.type('input[name="search-field"]', "Obudu Cattle Ranch, Obudu, Nigeria", {
        delay: 5,
      });

• Now, let's locate the search button and target it

I will also be targetting the button with the name attribute

• Target and click the button like so:

await page.click('input[name="submit-button"]');

This brings up the location on the map

• Finally, wait 5 seconds and shutdown the bot by closing the browser like so:

    await page.waitFor(5000);
    await browser.close();

This is my final code

const puppeteer = require("puppeteer");

// set variables
// handles the new tab or page where the website is/will be loaded
let page = null;
// handles the browser
let browser = null;

// Launch a browser and turn the headless off so that you can see what is going on
browser = puppeteer
  .launch({ headless: false })
  .then(async (browser) => {
    // open a new tab in the browser
    page = await browser.newPage();
    // set device size to stick to only desktop view
    page.setViewport({
      width: 1280,
      height: 800,
      isMobile: false,
    });
    // open a URL
    page.goto("https://eberegit.github.io/Geo-Search/index.html", {
      waitUntil: "networkidle2",
    });

    // wait for the search input to have finished loading on the page
    await page.waitFor('input[name="search-field"]');
    // Delay 2seconds before typing
    await page.waitFor(2000);
    // target the search input and type into the field with a little delay so you can see whats going on
    await page.type('input[name="search-field"]', "Obudu Cattle Ranch, Obudu, Nigeria", {
        delay: 5,
      });
    // target and click the search button
    await page.click('input[name="submit-button"]');
    // wait 5 seconds
    await page.waitFor(5000);
    // close the browser
    await browser.close();
  })
  .catch((error) => {
    console.log(error);
  });

Demo

Yaaaaaaeeeeeeyyyyyy... We did it!!! 💃🏻 🥳 🎈

Conclusion

I hope you enjoyed this tutorial as much as I did while preparing it.

All codes can be found here

There will be more on this coming soon as I plan to launch a twitter bot soon.

If you have have questions or comments, I will love to see them in the comment section

See you soon...