我正在尝试在包含当前记录标题的可编辑输入中测试修改文本 - 我希望能够测试编辑此类文本，并将其替换为其他内容。
我知道我可以使用await page.type('#inputID', 'blah'); 将“blah”插入文本框（在我的情况下，现有文本仅附加“blah”），但是，我找不到任何允许删除的页面方法1或替换现有文本。
【问题讨论】：
标签： javascript node.js google-chrome-devtools puppeteer headless-browser
你可以使用page.evaluate来操作你认为合适的DOM：
await page.evaluate( () => document.getElementById("inputID").value = "")
但有时仅操作给定字段可能还不够（目标页面可能是带有事件侦听器的 SPA），因此最好模拟真实的按键操作。以下示例来自 puppeteer 的 Github 中的 the informative issue 关于此任务。
在这里，我们按Backspace 的次数与该字段中的字符一样多：
const inputValue = await page.$eval('#inputID', el => el.value);
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");
【讨论】：
await page.keyboard.press('Backspace'); 而不是 await page.press('Backspace');
await input.click({ clickCount: 4 }) 用于多行选择
您可以使用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);
});
【讨论】：
page.keyboard.down('Shift')、page.keyboard.press('End')，然后是page.keyboard.press('Backspace')
如果您对模拟任何关键事件不感兴趣，您还可以使用 puppeteer 的 page.$eval 方法作为删除文本区域值的简洁方法...
await page.$eval('#inputID', el => el.value = '');
await page.type('#inputID', 'blah');
...甚至一步完全替换值，无需模拟后续输入：
await page.$eval('#inputID', el => el.value = 'blah');
【讨论】：
这非常适合“仅清除”方法：
const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await page.keyboard.press('Backspace')
【讨论】：
以上答案存在 ESLint 问题。 以下通过 ESLint 验证的解决方案：
await page.evaluate(
(selector) => { (document.querySelector(selector).value = ''); },
inputBoxSelector,
);
【讨论】：
好吧，您想要删除现有文本的原因通常可能是想要替换它。
您可以使用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}
)
【讨论】：
someField.type("");
在输入内容之前传递空字符串。
这对我有用。
【讨论】：
使用模拟击键的Keyboard API：
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 中不能选择输入字段中的所有字符）
【讨论】：
对我来说最干净的方式是：
const clearInput = async (page, { selector }) => {
const input = await page.$(selector)
await input.click({ clickCount: 3 })
await page.keyboard.press('Backspace')
}
const page = await context.newPage()
await clearInput(page, { selector: 'input[name="session[username_or_email]"]' })
await clearInput(page, { selector: 'input[name="session[password]"]' })
【讨论】：