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

Question

我正在尝试在包含当前记录标题的可编辑输入中测试修改文本 - 我希望能够测试编辑此类文本，将其替换为其他内容。

我知道我可以使用 await page.type('#inputID', 'blah'); 将“blah”插入文本框（在我的例子中，有现有文本，只附加“blah”），但是，我找不到任何页面方法 1 允许删除或替换现有文本。

原文由 Javier Arias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 page.evaluate 按照您认为合适的方式操作 DOM：

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

然而，有时仅仅操作一个给定的字段可能是不够的（目标页面可以是一个带有事件监听器的 SPA），所以模拟真实的按键是更可取的。以下示例来自 puppeteer 的 Github 中有关此任务 的信息性问题。

在这里，我们按 Backspace 与该字段中的字符一样多的次数：

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

另一个有趣的解决方案是点击目标字段 3 次，这样浏览器会选择其中的所有文本，然后您可以只输入您想要的内容：

 const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("Blah");

原文由 Vaviloff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 page.keyboard 方法更改输入值，也可以使用 page.evaluate() 。

替换所有文本：

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

原文由 Grant Miller 发布，翻译遵循 CC BY-SA 4.0 许可协议