DEV Community

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on

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

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

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

Enter fullscreen mode Exit fullscreen mode
  • In the folder, create a file and name it index.js
// Mac Users
touch index.js

// Windows Users
echo .>index.js

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

npm init

Enter fullscreen mode Exit fullscreen mode
  • Install puppeteer

npm i puppeteer

Enter fullscreen mode Exit fullscreen mode

Creating our bot

Goto to your index.js

  • Require puppeteer like so:

const puppeteer = require("puppeteer");

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

let page = null;
let browser = null;

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

Enter fullscreen mode Exit fullscreen mode

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)
})

Enter fullscreen mode Exit fullscreen mode
  • In the then block, open a new tab with the following line

    page = await browser.newPage();

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

Enter fullscreen mode Exit fullscreen mode
  • 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",
    });

Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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"]');

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

Enter fullscreen mode Exit fullscreen mode
  • Now, let's locate the search button and target it

Alt Text

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"]');

Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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);
  });


Enter fullscreen mode Exit fullscreen mode

Demo

Alt Text

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

GitHub logo 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)

Collapse
 
badreddineouazzani profile image
badreddineouazzani

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

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

I am not very sure what’s going on there but it seems like you need to understand how the website works normally first

Then you will program the bot properly

Collapse
 
carthex profile image
SpyLoaded

Can this bot be created using proxy and clicking advert on website. if yes how plz?