Javascript 如何使用Puppeter从输入中删除现有文本？

我试图在一个包含当前记录标题的可编辑输入中测试修改文本，我希望能够测试编辑这样的文本，用其他内容替换它

---

我知道我可以使用

wait page.type（'inputID'，'blah'）

将“blah”插入文本框（在我的情况下，文本框中包含现有文本，仅附加“blah”），但是，我找不到任何允许删除或替换现有文本的页面方法。

您可以使用

页面。评估
以根据需要操作DOM：

await page.evaluate( () => document.getElementById("inputID").value = "")

然而，有时仅仅操作一个给定的字段可能是不够的（目标页面可以是一个带有事件侦听器的SPA），所以模拟真实的按键是更好的选择。下面的例子来自木偶演员的Github中关于此任务的内容

在这里，我们按
Backspace
的次数与该字段中的字符数相同：

const inputValue = await page.$eval('#inputID', el => el.value);
for (let i = 0; i < inputValue.length; i++) {
  await page.keyboard.press('Backspace');
}

您可以使用这些方法更改输入值，也可以使用

替换所有文本：

// 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';
});

// 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';
});

// 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);
});

// 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);
});

追加文本：

// 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';
});

// 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';
});

// 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);
});

// 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);
});

退格最后一个字符：

// 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';
});

// 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';
});

// 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);
});

// 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);
});

删除第一个字符：

// 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';
});

// 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';
});

// 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);
});

// 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);
});

如果您对模拟关键事件不感兴趣，还可以使用Puppeter的方法作为删除textarea值的简明方法

await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');

甚至在一个步骤中完全替换该值，而无需模拟后续键入：

await page.$eval('#inputID', el => el.value = 'blah');

嗯，你想删除现有文本的原因通常是想替换它

您可以使用
page.evalute

let title=getTitle（）
让选择器=getSelector（）
等待第页(
（{选择器，标题}）=>{
设el=document.querySelector（选择器）
如果el中的（'value'）el.value=标题
else el.innerText=标题
},
{选择器，标题}
)
以上答案有一个ESLint问题。
以下溶液通过ESLint变异：

await page.evaluate(
  (selector) => { (document.querySelector(selector).value = ''); },
  inputBoxSelector,
);

someField.type（“”）

在键入内容之前传递空字符串

这对我有用
 使用模拟击键的：

await page.focus(css);            // CSS selector of the input element
await page.keyboard.down('Shift'); 
await page.keyboard.press('Home');
await page.keyboard.up('Shift');  // Release the pressed 'Shift' key
await page.keyboard.press('Backspace');

此按键是跨平台的，而不是使用ctrl+A（在Mac中无法选择输入字段中的所有字符）
此功能非常适合“仅清除”方法：

对我来说，最干净的方式是：


设置

constClearInput=async（第页，{selector}）=>{
常量输入=等待页面。$（选择器）
等待输入。单击（{clickCount:3}）
等待页面。键盘。按（'退格'）
}


用法

const page=wait context.newPage（）
等待clearInput（第页，{selector:'input[name=“session[username\u或电子邮件]”]}）
等待clearInput（第页，{selector:'input[name=“session[password]”“]}）
等待输入。单击（{clickCount:3}），这很有趣！就像我们使用浏览器一样！请注意，三次单击解决方案这不适用于包含多行的文本区域，因为这只会突出显示一行。@vsync 2次单击仅选择一个单词，3次单击选择输入中的所有文本，这就是问题的所在：）退格的想法很好，但现在（Puppeter 2）它必须是
wait page.keyboard.press（'Backspace'）；
代替
等待页面。按（'Backspace'）；
等待输入。单击（{clickCount:4}）
对于多行选择，Windows控件+A is命令+A可能与Mac等效。对于跨平台键盘解决方案，您可以使用
page.keyboard.down（'Shift'））
，
page.keyboard.按（'End'）
，然后按
page.keyboard.按（'Backspace'）
替换所有文本在Mac中不起作用，因为在Mac中按ctrl+A键不会选择整个文本，而是将光标放在字段的开头这对我不起作用。