×
☰ See All Chapters

Puppeteer handling edit boxes

Data for “textbox” or “textarea” HTML elements can be entered with the “type” method of ElementHandle

Example:

const fullname = await page.$("#fullname");

await fullname.type("Manu Manjunatha");

To clear the data from text boxes we don’t have any dedicated methods. We simulate clicks three times on the edit box then pressing backspace. It is like selecting all the data from the edit box and pressing backspace.

const fullname = await page.$("#fullname");

await fullname.type("Manu");

//clear editbox

await fullname.click({clickCount: 3});

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

await fullname.type("Manu Manjunatha");

To check the entered value, read value property of ElementHandle as shown below:

const value = await (await fullname.getProperty("value")).jsonValue();

console.log(value);

You can write the script and test these using our Test Page

puppeteer-handling-editboxes-0
 

Puppeteer edit boxes example

import { launch, Page } from 'puppeteer';

example();

 

async function example() {

    const browser = await launch({headless : false});

    const page = await browser.newPage();

    await page.setViewport({ width: 1366, height: 768});

    await page.goto('https://www.tools4testing.com/contents/puppeteer/testpages/registration-form-testpage');

    await enterDetails(page);

    //wait for some time before closing, specify time in milliseconds

    await wait(5000);

    //Close browser

    await browser.close();

}

 

async function enterDetails(page: Page) : Promise<void> {

    //Edit Box ---------------------------

    const fullname = await page.$("#fullname");

    await fullname.type("Manu");

    //clear editbox

    await fullname.click({clickCount: 3});

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

    await fullname.type("Manu Manjunatha");

    //Check if input entered is correct

    await wait(1000);

    const value = await (await fullname.getProperty("value")).jsonValue();

    console.log(value);

}

 

//wait if needed

async function wait(time) {

    return new Promise(function(resolve) {

        setTimeout(resolve, time)

});

}

Click here to learn to execute puppeteer example using typescript

 

All Chapters
Author