How to submit a form with puppeteer

How to submit a form with a puppeteer

Introduction

In this article, we’ll take a glance at the way to automate form submission using Puppeteer. Puppeteer is an open-source Node library that gives a high-level API to regulate Chrome or Chromium-based browsers over the DevTools Protocol. Every task that you simply can perform with a Chrome browser is often automated with Puppeteer. This makes Puppeteer a perfect tool for web scraping and test automation.

Automated form submission

Using Puppeteer selectors to focus on form inputs

• Submitting a form with attachments
• Getting started with Puppeteer

In this section, we’ll get our project setup. As mentioned above Puppeteer may be a node library. So we will simply add it to our node project with npm install or yarn add command. Let’s start by creating a replacement folder.

# create a new folder and navigate inside it
   mkdir form_demo
   cd form_demo

Inside our new project folder, we will initialize a replacement Node project by running the subsequent command.

npm init --yes

Once the project is made we’ll install Puppeteer.

npm i puppeteer --save

Once the package is installed we will create a replacement file called index.js. This is often getting to be our main script. to form sure everything is functioning needless to say let’s create an easy automation script with Puppeteer and run it.

<code class="language-javascript" data-lang="javascript">const puppeteer = require('puppeteer');
    async function main() {
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('https://www.scrapingbee.com/');
        await page.waitForTimeout(5000); // wait for 5 seconds
        await browser.close();
    }
    main();

Automating form submission

We verified Puppeteer is installed and dealing needless to say. Now we will move forward with our first form submission. The primary example is super simple. we’ll navigate to the yelp.com website and look for pizza delivery near Toronto, Canada.

If we open our Dev Tools in Chrome and begin inspecting the webpage we will see that the find input has an id called find_desc. we will also see that the near input has an ID of dropperText_Mast and therefore the search button has an id of header-search-submit. We will use this information to write down our automation script.

<code class="language-javascript" data-lang="javascript"> const puppeteer = require('puppeteer');
    async function main() {
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('https://www.yelp.com/');
        await page.type('#find_desc', 'Pizza Delivery');
        await page.type('#dropperText_Mast', 'Toronto, ON');
        await page.click('#header-search-submit');
        await page.waitForTimeout(5000); // wait for 5 seconds
        await browser.close();
    }
    main();

In the script above we are opening up a replacement browser instance. We are grabbing the inputs by id. We are using the sort function from Puppeteer to populate the inputs. The primary parameter of the sort function is the targeted DOM element and therefore the second argument is the string that we would like Puppeteer to type for us. Note that we will also pass class names as a primary argument. as an example, if find_desc was a category rather than an Id name, we could have done this

await page.type('.find_desc', 'Pizza Delivery');

Let’s run this script and see it in action here

Let’s take a glance at another example where we are getting to target the input by name. For this next example, I’m going to be using Github’s login page.

If we open Google Dev Tools and inspect the shape here we’ll see that this type of inputs has name property also as id. Take a glance at the code snippet below.

<code class="language-javascript" data-lang="javascript"> async function withInputName() {
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('https://github.com/login');
        
        await page.type('input[id=login_field]', 'John');
        await page.type('input[name=password]', 'Password');
        await page.evaluate(() => {
            document.querySelector('input[type=submit]').click();
        });
    }
    withInputName();

As you’ll see we are employing a different sort of syntax here. On line 8 we are targeting input by id then on line 9 targeting the input element by name property. we will also target input by type as you’ll see online 11.

Submitting a form with attachments

Next, we are getting to take a glance at how we will upload a file Puppeteer. We are getting to use this demo form from the W3school to demonstrate this. Let’s dive into the code.

<code class="language-javascript" data-lang="javascript"> async function uploadFile() {
        const browser = await puppeteer.launch({
            headless: false
        });
        const page = await browser.newPage();
        await page.goto('https://www.w3schools.com/howto/howto_html_file_upload_button.asp');
        const element = await page.$("input[type=file]");
        await element.uploadFile('./myfile.pdf');
    }
    uploadFile();

Notice that we are selecting the input element with page.$ function provided by Puppeteer. This returns the native DOM element. This element is in a position to access all the native browser APIs. Within the next line, we are using the upload file function to connect a file from the local filing system.

When you run the script you’ll see that the file from the local path is getting attached to the shape as shown below.