Puppeteer Type Command: How to type a text in input box in Puppeteer

Puppeteer is a Node.js framework that customers are using extensively to test their web applications. It lets you run tests in headless mode using the Chrome Developer Protocol seamlessly. 

As part of any framework, you would want to automate certain test cases where the form expects input from the user. Modern web applications such as banking, etc often require filling forms online. In such situations, the Puppeteer `type()` method can be used to input text. 

What is Puppeteer Type Method: type()

In Puppeteer, the `type()` method is used to simulate keyboard input on an element. It allows you to programmatically enter text or key sequences into input fields, text areas, or any other focusable element on a web page.

Puppeteer provides two type() methods:

• `page.type()`: This method is a high level method that combines both keyboard input and a series of trigger events, such as `keydown`, `keypress`, and `keyup`.This method is useful when implementing a more realistic user journey. 
• `page.keyboard.type()`: This method is a low level method that directly sends the key sequences to the focussed element on the page. Since the type event is focussed on the element, this method is faster as compared to the `page.type()` method.

Page.type() method in Puppeteer

In most cases, it is recommended that the page.type() method is used. 

Parameters of Page.type() method

Returns of Page.type() method

Returns a Promise<void>

Example of Page.type() method

Here’s an example of page.type() method in Puppeteer.

```

await page.type('#textarea, 'Hello');

// Types instantly

await page.type('#textarea', 'World', {delay: 120});

// Types slower, like a user

```

Keyboard.type() Method in Puppeteer 

For situations where you need to insert text without taking event handling into consideration, use the `page.keyboard.type()`.

Parameters of Keyboard.type()

Returns of keyboard.type() method

Returns a Promise<void>

Example of keyboard.type() method

Here’s an example of keyboard.type() method in Puppeteer.

```

await page.keyboard.type('Hey'); // Types instantly

await page.keyboard.type('World', {delay: 120}); // Types slower, like a user

```

Use the type() method in Puppeteer

In this example, we will login to the website `https://the-internet.herokuapp.com/login` using the username and password. We will use the `page.type()` method to enter the credentials and the `page.keyboard.press()` method to simulate pressing the Enter key on the keyboard.

Talk to an Expert

The following steps describe the logic for each step of the script:

1. Add the Puppeteer dependency, open a new browser, and then go to the website: 

const puppeteer = require('puppeteer');


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


await page.goto('https://the-internet.herokuapp.com/login');

2. Type the username using the `page.type()` method:

// Type username
await page.waitForSelector('#username');
await page.type('#username', 'tomsmith');

3. Type the password using the `page.type()` method:

// Type password
await page.waitForSelector('#password');
await page.type('#password', 'SuperSecretPassword!');

4. Submit the form using the `page.keyboard.press()` method:

// Submit the form
await page.keyboard.press('Enter');


// Wait for navigation to complete
await page.waitForNavigation();

5. Add the logic to verify if login was successful:

// Check if login was successful
const isLoggedIn = await page.evaluate(() => {
return window.location.href === 'https://the-internet.herokuapp.com/secure';
});


if (isLoggedIn) {
console.log('Login successful!');
// Further actions after successful login can be added here
} else {
console.log('Login failed.');
}

6. Take a screenshot and close the browser:

// Capture a screenshot after login (optional)
await page.screenshot({ path: 'login_screenshot.png' });


await browser.close();

Run Puppeteer Tests on Real Devices

The complete script of Puppeteer Type Command example is as follows:

const puppeteer = require('puppeteer');


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


await page.goto('https://the-internet.herokuapp.com/login');


// Type username
await page.waitForSelector('#username');
await page.type('#username', 'tomsmith');


// Type password
await page.waitForSelector('#password');
await page.type('#password', 'SuperSecretPassword!');


// Submit the form
await page.keyboard.press('Enter');


// Wait for navigation to complete
await page.waitForNavigation();


// Check if login was successful
const isLoggedIn = await page.evaluate(() => {
return window.location.href === 'https://the-internet.herokuapp.com/secure';
});


if (isLoggedIn) {
console.log('Login successful!');
// Further actions after successful login can be added here
} else {
console.log('Login failed.');
}


// Capture a screenshot after login (optional)
await page.screenshot({ path: 'login_screenshot.png' });


await browser.close();
}


run();

After your run the script, the `login_screenshot.png` can be seen as follows:

Conclusion

Puppeteer offers many more methods that make it easier to create test scripts for your use cases easily. Its headless mode offers improved performance, efficiency, scalability, and flexibility for automating browser-based tasks. Most web applications need to be tested on varied devices, OS, and browsers for a seamless experience, which might be something Puppeteer expanse might not cover. 

With BrowserStack, you gain the ability to use a device cloud that is compatible with Puppeteer. This cloud empowers you to execute cross browser Puppeteer tests in parallel across multiple browsers and devices simultaneously, 3000+ real devices and browsers available on the cloud.

Puppeteer is a Node.js library that lets you control Chrome or Chromium over the DevTools Protocol. Learn how to install and setup Puppeteer using npm, run your first test, and some best practices while using it.

For web applications that require entering user input or text, Puppeteer provides the type() method. Use the type() method to simulate user input or keyboard interactions. Learn how to use the type() method to enter information on a login screen.

Try BrowserStack Now