I'm trying to test amending text in an editable input which contains the title of the current record - and I want to able to test editing such text, replacing it with something else.
I know I can use await page.type('#inputID', 'blah');
to insert "blah" into the textbox (which in my case, having existing text, only appends "blah"), however, I cannot find any page methods1 that allow deleting or replacing existing text.
Backing up a minute, Puppeteer is a library that enables you to automate a Google Chrome browser using server-side JavaScript (Nodejs). It's pretty cool. However, you CAN clear it as you would if you were using Google Chrome, a triple click and a backspace.
Just set value of input like this: await page. $eval('#email', el => el. value = '[email protected]');
You can use page.evaluate
to manipulate DOM as you see fit:
await page.evaluate( () => document.getElementById("inputID").value = "")
However sometimes just manipulating a given field might not be enough (a target page could be an SPA with event listeners), so emulating real keypresses is preferable. The examples below are from the informative issue in puppeteer's Github concerning this task.
Here we press Backspace
as many times as there are characters in that field:
const inputValue = await page.$eval('#inputID', el => el.value); for (let i = 0; i < inputValue.length; i++) { await page.keyboard.press('Backspace'); }
Another interesting solution is to click the target field 3 times so that the browser would select all the text in it and then you could just type what you want:
const input = await page.$('#inputID'); await input.click({ clickCount: 3 }) await input.type("Blah");
You can use the page.keyboard
methods to change input values, or you can use page.evaluate()
.
Replace All Text:
// Using page.keyboard: await page.focus('#example'); await page.keyboard.down('Control'); await page.keyboard.press('A'); await page.keyboard.up('Control'); await page.keyboard.press('Backspace'); await page.keyboard.type('foo'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = 'foo'; });
Append Text:
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('End'); await page.keyboard.type(' bar qux'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value += ' bar qux'; });
Backspace Last Character:
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('End'); await page.keyboard.press('Backspace'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = example.value.slice(0, -1); });
Delete First Character:
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('Home'); await page.keyboard.press('Delete'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = example.value.slice(1); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With