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

Before we begin, make sure you have the following installed:

• 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 at Link

The documentation provides detailed information about the methods and many other useful functions. It is a valuable resource to enhance further your understanding and proficiency in automating web interactions with Puppeteer.

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/');
   

6. Define an asynchronous function named

    async () => {}
   

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

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

8. Navigate to your desired web page using page.goto method

    await page.goto("Example.com/login");
   

9. The next step is to extract the website form details CSS select you want to automate the form

   Puppeteer uses CSS selector to get the exact field to fill.

   If you want to learn how to extract CSS selectors using Chrome, you can refer to the tutorial provided by ScrapingBee

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

    Example:

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

11. Use page.select method to fill dropdown menus

    Example:

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

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

    Example:

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

13. Use page.keyboard.press method to simulate clicking the submit button

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

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

    await page.waitForNavigation();
    

Add the following code at the end of the async function to close the browser after form submission:

await browser.close();

Complete codebase

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", "wise4rmgod@yahoo.com");
  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.