JavaScript Bot with Puppeteer - A Soft Introduction
Tags: todayilearned, codenewbie, javascript, tutorial
Published: 2020-06-29 19:10:19

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](https://www.npmjs.com/package/puppeteer). In this tutorial, I will give a very easy introduction to creating a bot. 😊

We will be operating on [GEO SEARCH website](https://eberegit.github.io/Geo-Search/index.html). Do leave a star on the [github repo](https://github.com/EBEREGIT/Geo-Search). Thank You 🤗.

* [Setting our project](#1)
* [Creating our bot](#2)
* [Final Code](#3)
* [Demo](#4)

<a name="1"></a>
## Setting our project
* Create a folder and name it ``js-bot-tutorial``

```javascript

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

```

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

```javascript
// Mac Users
touch index.js

// Windows Users
echo .>index.js

```

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

```javascript

npm init

```

* Install puppeteer

```javascript

npm i puppeteer

```

<a name="2"></a>
## Creating our bot
> Goto to your ``index.js``

* Require puppeteer like so:

```javascript

const puppeteer = require("puppeteer");

```

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

```javascript

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

```javaScript

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:

```javascript

.then( async (browser) => {

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

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

```javascript

    page = await browser.newPage();

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

```javascript

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

```
* Launch the [website](https://eberegit.github.io/Geo-Search/index.html) that we will be using for this tutorial and wait until the network is good and the page is well loaded like so:

```javascript

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wctp94yqv0od6h2r4iqb.JPG)

*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

```javascript

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

```
* Type the location you want to search after 2 seconds delay

```javascript
    
    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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xnh962jhgjluxjmmqxy5.JPG)

*I will also be targetting the ``button`` with the ``name`` attribute*

* Target and click the button like so:

```javascript

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:

```javascript

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

```

<a name="3"></a>
## This is my final code

```javascript

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


```

<a name="4"></a>
## Demo
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/idq29dphttwsc46oceea.gif)

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](https://github.com/EBEREGIT/js-bot-tutorial)

{% github EBEREGIT/js-bot-tutorial no-readme %}

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