Using Puppeteer and JavaScript to Automate Form Filling on Any Website

Table of Contents

Prerequisites
Basic Methods
Launching Puppeteer
Conclusion

Puppeteer is a Node.js library that allows you to control a headless Chrome or Chromium browser. This means you can automate tasks typically requiring a human to interact with a web browser, such as filling out forms.

This tutorial will show you how to use Puppeteer and JavaScript to automate form filling on any website. By the end of this tutorial, you will be able to:

Launch Puppeteer and create a new browser instance.

Navigate to a website and find a form.

Fill out the form with the desired information.

Submit the form.

Close the browser.

This tutorial is for beginners who are new to Puppeteer and JavaScript. However, even with experience with these technologies, you may find this tutorial helpful.

Prerequisites

• You will need to have the latest version of Node.js installed on your computer.

• You will need to have the Puppeteer package installed. You can install it by running the following command in your terminal:

npm install puppeteer

Basic methods

title()
This command is used to obtain the title of the present page.
Syntax
The syntax is as follows;
await page.title()

URL()
This command is used to obtain the URL of the application currently launched in the browser.
Syntax
The syntax is as follows;
await page.url()

content()
This command is used to obtain the page source code.
Syntax
The syntax is as follows;
await page.content()

goto()
This command is used go to your site.
Syntax
The syntax is as follows;
await page.goto()

browser()
This command is used to create a page
Syntax
The syntax is as follows;
await browser.newPage()

type()
This command is used to type into search box
Syntax
The syntax is as follows;
await page.type()

To explore more about the various methods and capabilities of Puppeteer, you can refer to the official Puppeteer documentation.

Launching Puppeteer and Navigating to a Web Page

1. Create a new directory for your project and navigate to it in the terminal.

2. Create a new JavaScript file called index.js, in your project directory.

3. Open the file in any text editor you choose, but you will use Vscode for this tutorial. Then import Puppeteer by adding the following line at the beginning:
   const puppeteer = require('puppeteer');

4. Create a new browser instance
   const browser = await puppeteer.launch();

5. Navigate to a website.
   

 const page = await browser.newPage();
 await page.goto('https://example.com/');

1. Define an asynchronous function.

async () => {}

1. Inside the async function, launch Puppeteer, and create a new browser instance

  const browser = await puppeteer.launch({ headless: false });
   const page = await browser.newPage();

1. Navigate to your desired web page using page.goto method
   await page.goto("Example.com/login");

2. Fill the input fields in the browser using page.type method

Example:

await page.type("#selector", "value");
await page.type("#selector", "Egeg545heehew222");

1. Use page.select method to fill dropdown menus

Example:
await page.select("#dropwdown selector", "dropdown value");

1. Use page.click method to click checkboxes and radio buttons

Example:
await page.evaluate(() => document.querySelector("#selector").click());


1. Use page.keyboard.press method to simulate clicking the submit button
   await page.keyboard.press("Enter");

2. Use page.waitForNavigation() method to wait for a page to navigate to a new URL or to reload.
   await page.waitForNavigation();

Complete Code

const puppeteer = require("puppeteer");

(async () => {

  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("https://jobs.careeraddict.com/login");

  await page.type("#user_email", "[e-mail]");
  await page.type("#user_password", "Egeg545heehew222");

  await page.keyboard.press("Enter");

  await page.waitForNavigation();

  console.log("Successfully signed in!");

  await browser.close();
})();

Conclusion

This tutorial shows you how to use Puppeteer and JavaScript to automate form filling on any website. We have covered the basics of Puppeteer and JavaScript, and we have shown you how to write a script that can fill out a simple form.