Modifying existing text in input fields with Puppeteer

Other Questions Puppeteer
1

Hey everyone,

I’m working on a Puppeteer project and I’m stuck on how to change text in an input field that already has content. I want to test editing the title of a record, but I can’t figure out how to replace the existing text.

I know I can add text to the end of what’s already there using page.type(), but that’s not what I need. Is there a way to clear out the old text and put in something new? Or maybe just replace everything in one go?

I’ve looked through the Puppeteer docs but couldn’t find anything obvious. Any tips or tricks would be super helpful!

Here’s a quick example of what I’ve tried:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

// This adds text to the end
await page.type('#titleInput', 'New Title');

// But how do I replace the existing text?

Thanks in advance for any help!

2

hey, i found a quick way to do this. try using page.$eval() method. it’s pretty neat:

await page.$eval('#titleInput', el => el.value = 'New Title');

this’ll replace the text in one go. no need for complex key presses or anything. just make sure ur selector is right. hope this helps!

3

I’ve dealt with this exact issue in my Puppeteer projects! Here’s what worked for me:

You can use a combination of page.click() to focus the input field, keyboard.down() and keyboard.up() to simulate pressing Ctrl+A to select all text, and then keyboard.press() to hit Backspace. After that, just type your new text.

Here’s a code snippet that should do the trick:

await page.click('#titleInput');
await page.keyboard.down('Control');
await page.keyboard.press('A');
await page.keyboard.up('Control');
await page.keyboard.press('Backspace');
await page.type('#titleInput', 'New Title');

This approach mimics how a user would manually edit the field. It’s been reliable for me across different websites and input types. Just remember to adjust the selector to match your specific input field.

Hope this helps solve your problem!

4

Another approach you could try is using the page.evaluate() method to directly manipulate the input field’s value. This can be more efficient and reliable in some cases. Here’s how you might do it:

await page.evaluate(() => {
    document.querySelector('#titleInput').value = 'New Title';
});

This method bypasses the need to simulate keystrokes and can be faster. It’s particularly useful if you’re dealing with complex input fields or dynamic web applications where direct DOM manipulation is more reliable.

Remember to adjust the selector to match your specific input field. Also, depending on the website, you might need to trigger a change event after setting the value to ensure the application recognizes the change:

await page.evaluate(() => {
    const input = document.querySelector('#titleInput');
    input.value = 'New Title';
    input.dispatchEvent(new Event('change', { bubbles: true }));
});

This approach has worked well for me in various Puppeteer projects, especially when dealing with React or Angular applications.