Puppeteer Tutorial #8 – Mastering Forms and Keyboard Interactions

Automating form interactions on websites is an essential skill for developers, testers, and anyone involved in web-related tasks.

Puppeteer, an influential Node.js library developed by the Chrome team, simplifies this process by providing an intuitive API to control browsers.

In this tutorial, we’ll explore how to use Puppeteer to interact with and submit data via a web form.

By following these steps, you’ll gain hands-on experience in automating form submissions for various web scenarios.

The final completed source code is given at the end of the article.

Automating web form submissions can streamline processes and save time when dealing with repetitive tasks.

Puppeteer’s capabilities allow you to simulate user interactions seamlessly, making it an ideal choice for automating form submissions.

1. Setting Up Puppeteer

Before we dive into the code, ensure you have Node.js installed on your system.

You can install Puppeteer using the following command:

npm install puppeteer

2. Navigating to the Form Page

Let’s start by creating a function that navigates to a URL containing the desired form.

This function will launch a browser instance, navigate to the specified URL, and prepare the browser to interact with the form.

const puppeteer = require("puppeteer");

async function enterFormData(url, searchQuery) {
    try {
        const browser = await puppeteer.launch({ headless: false });
        const page = await browser.newPage();
        
        await page.goto(url);
        
        // Rest of the code...
    } catch (error) {
        console.log(error);
    }
}

const url = "https://yahoo.com";
const query = "sunrise";

enterFormData(url, query);

3. Entering Data and Submitting the Form

Continuing from where we left off, we’ll extend our function to interact with the form.

We’ll focus on entering data into the form input and simulating a submission.

await page.focus('input[name="p"]');
await page.keyboard.type(searchQuery);

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

4. Capturing Results and Screenshots

After submitting the form, we’ll capture the results page that follows.

Puppeteer’s waitForNavigation function ensures that the navigation is complete before proceeding.

await page.waitForNavigation({ waitUntil: 'networkidle2' });

await page.screenshot({ path: 'query-results.png' });

await browser.close();
console.log("Form Data Submitted Successfully");

5. Final Complete Source Code

The final complete source code is given below for reference.

const puppeteer = require("puppeteer");

async function enterFormData(url, searchQuery){
    try {
        const browser = await puppeteer.launch({headless: false});
        const page = await browser.newPage();
        
        await page.goto(url);
        
        await page.focus('input[name="p"]');
        await page.keyboard.type(searchQuery);

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

        await page.waitForNavigation({waitUntil: 'networkidle2'});

        await page.screenshot({path: 'query-results.png'});

        await browser.close();

        console.log("Form Data Submitted Successfully");
    } catch(error){
        console.log(error);
    }
}

const url = "https://yahoo.com";
const query = "sunrise";

enterFormData(url, query);

Puppeteer’s power lies in its ability to automate complex browser interactions, such as form submissions.

In this tutorial, we learned how to set up Puppeteer, navigate to a form page, enter data into a form input, submit the form, and capture the results.

This knowledge equips you with a valuable skill for automating user interactions on the web.

As you delve further into Puppeteer, you’ll discover its potential for a wide range of automation tasks, from web scraping to performance testing.

Happy automating and exploring the capabilities of Puppeteer!