How to automate form filling with Puppeteer?

Web scraping can be taken to the next level by automating user interactions, such as filling forms on a webpage. Puppeteer, a Headless Chrome Node.js API, is an excellent tool for this purpose. It provides a high-level API to control headless or non-headless Chrome or Chromium browsers.

Here's a step-by-step guide on how to automate form filling with Puppeteer:

Step 1: Install Puppeteer

To start, you need to install Puppeteer in your project. You can do this using npm (Node Package Manager) with the following command:

npm i puppeteer

Step 2: Launch a Browser

The next step is to launch a browser. You can do this in Puppeteer by calling the puppeteer.launch() function. This function returns a promise that resolves to a Browser object.

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch();
}
run();

Step 3: Open a New Page

After you've successfully launched a browser, you can open a new page with the browser.newPage() function.

const page = await browser.newPage();

Step 4: Go to the Webpage

To go to the webpage where the form you want to fill is located, you use the page.goto() function and provide the URL of the webpage as the argument.

await page.goto('https://www.example.com');

Step 5: Fill the Form

To fill the form, you need to know the selectors of the input fields. You can find the selectors by inspecting the webpage. Once you have the selectors, you can use the page.type() function to fill the input fields.

await page.type('#firstName', 'John');
await page.type('#lastName', 'Doe');

Step 6: Submit the Form

After filling the form, you can submit it by clicking the submit button. You can do this using the page.click() function.

await page.click('#submit');

Step 7: Close the Browser

Finally, after submitting the form, you can close the browser using the browser.close() function.

await browser.close();

Here's the complete code:

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.example.com');
    await page.type('#firstName', 'John');
    await page.type('#lastName', 'Doe');
    await page.click('#submit');
    await browser.close();
}
run();

Please note that the selectors used in this example (#firstName, #lastName, and #submit) are just placeholders. You should replace these with the actual selectors from the webpage you want to automate.

Also, remember that Puppeteer operations are asynchronous, so you should always use await before them or use them inside a then() function to make sure they complete before the next operation starts.