NJOKU SAMSON EBERE

Posted on Jun 29, 2020

JavaScript Bot with Puppeteer - A Soft Introduction

#todayilearned #codenewbie #javascript #tutorial

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

EBEREGIT / js-bot-tutorial

This tutorial teaches us how to create a simple bot in JavaScript with the help of Puppeteer.

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...

Top comments (3)

badreddineouazzani • Jul 22 '21

Hi please I have question . I try to create bot to login into my account yahoo but then I type the username and type enter. the site go to other URL then I can't to type password