Home » Node.js

Interacting with forms and web pages using Node.js and Puppeteer – 2

Here, we are going to learn about the another powerful function of the puppeteer API using Node.js – commands for keystroke control and typing as we'll normally do with an opened browser.
Submitted by Godwill Tetah, on May 30, 2019

Hi guys! Today let's look at another powerful function of the puppeteer API using Node.js part 2.

In the first part of this section, was talking about commands for keystroke control and typing as we'll normally do with an opened browser.

Here's the link to part 1: INTERACTING WITH FORMS AND WEB PAGES USING NODE-JS AND PUPPETEER- 1

Imagine for a moment if it's possible to open a website, log in and take a screenshot of your dashboard.

?????

Take Note! You should have Node-js and puppeteer installed in your PC.

With Node-js and puppeteer already up and running, let's get started.

*NB: If you don't yet have Node-js/ puppeteer installed in your PC, read the article NODE & GOOGLE PUPPETEER API SERIES

Today, let's continue from our last part where we saw how to type o fill the form.

Now let's see how to submit..

But there's a problem!!!! Most often, the submit button has no id or class.

Indeed, the puppeteer has made work easy for you and me.

Let's see how this can be done.

Now, let's get started.

Since we can't get the id or class of the submit button from inspecting, we will use a command on the web browser's console which will return what we'll use at the place of id/class.

Open your browser, move to the console and type

    document.querySelectorAll('input[type="submit"]') [0]

It's going to output the input type and value of your own submit button.

Use the input type at the await.page.click parameter as seen in the code below.

Open a text editor and type the following code and save it with the file name app.js:

The code below fills the form and submits and takes a screenshot of action after submitting.

const puppeteer = require('puppeteer');

(async () => {
	const browser = await puppeteer.launch()
	const page = await browser.newPage()
	await page.goto('file:///H:/js-form-validator-master/index.html')
	// focus on the element with id  specified in bracket
	await page.focus('#example-1-name') 
	// types the sentence in bracket 
	await page.keyboard.type('ENGINEER GODWILL') 
	await page.focus('#example-1-email') 
	await page.keyboard.type('[email protected]')
	await page.focus('#example-1-password')
	await page.keyboard.type('admin123')
	// clicks on the submit button of the form
	await page.click ('input[type="submit"]') 
	// captures a screenshot
	await page.screenshot({ path: 'keyboard.png' }) 
	console.log ('done');
	await browser.close()
})()

NB: You can use any URL of your choice,

I this example, I used a webpage that was already downloaded to facilitate the tutorial but if it concerns a URL on the www, internet connection is required to navigate to the website/web page.

The file should be saved in your default Node-js directory.

Run the code by initiating the file at the command prompt like a regular Node-js file.

The Screenshot ( image file) is then stored in the default Node-js directory with name keyboard.png

Output image file: