javascript 如何使用 Puppeteer 从输入中删除现有文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52631057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delete existing text from input using Puppeteer?
提问by Javier Arias
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 methods1that allow deleting or replacing existing text.
我知道我可以使用await page.type('#inputID', 'blah');将“blah”插入文本框（在我的情况下，有现有文本，只附加“blah”），但是，我找不到任何允许删除或替换现有文本的页面方法1。
回答by Vaviloff
You can use page.evaluateto manipulate DOM as you see fit:
您可以根据需要使用page.evaluateDOM 操作：
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 issuein puppeteer's Github concerning this task.
然而，有时仅仅操作一个给定的字段可能还不够（目标页面可能是一个带有事件监听器的 SPA），所以最好模拟真实的按键。以下示例来自puppeteer 的 Github 中有关此任务的信息问题。
Here we press Backspaceas many times as there are characters in that field:
在这里，我们按Backspace该字段中的字符数按次数：
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:
另一个有趣的解决方案是单击目标字段 3 次，以便浏览器选择其中的所有文本，然后您只需键入您想要的内容：
const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");
回答by Grant Miller
You can use the page.keyboardmethods to change input values, or you can use page.evaluate().
您可以使用这些page.keyboard方法来更改输入值，也可以使用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);
});
回答by B12Toaster
If you are not interested in simulating the key events, you could also use puppeteer's page.$evalmethod as a concise means to remove the textarea's value...
如果你对模拟关键事件不感兴趣，你也可以使用 puppeteer 的page.$eval方法作为一种简洁的方法来删除 textarea 的值......
await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');
or even completely replace the value in one step, without simulating the subsequent typing:
甚至一步完全替换该值，而无需模拟后续键入：
await page.$eval('#inputID', el => el.value = 'blah');
回答by Tzvika Merchav
above answers has an ESLint issues. the following solution passing ESLint varification:
以上答案有一个 ESLint 问题。以下解决方案通过 ESLint 变体：
await page.evaluate(
(selector) => { (document.querySelector(selector).value = ''); },
inputBoxSelector,
);
回答by Sawan Rawath
someField.type("");
someField.type("");
Pass the empty string before typing your content.
在输入内容之前传递空字符串。
This worked for me.
这对我有用。
回答by levy9527
Well, the reason you want to delete existing text generally may be want to replace it.
好吧，您要删除现有文本的原因通常可能是要替换它。
You can use page.evalute
您可以使用 page.evalute
let title = getTitle()
let selector = getSelector()
await page.evaluate(
({selector, title}) => {
let el = document.querySelector(selector)
if ('value' in el) el.value = title
else el.innerText = title
},
{selector, title}
)
