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

Question

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

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

Answer 1

你可以使用 page.evaluate 来操作你认为合适的 DOM:

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

但有时仅操作给定字段可能还不够(目标页面可能是带有事件监听器的 SPA)，因此最好模拟真实的按键操作。以下示例来自 the informative issue在 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");