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

Question

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

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

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);
for (let i = 0; i < inputValue.length; i++) {
  await page.press('Backspace');
}

另一个有趣的解决方案是单击目标字段3次,以便浏览器选择其中的所有文本,然后您可以只键入您想要的内容:

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

Answer 2

如果你对模拟关键事件不感兴趣，你也可以使用 puppeteer 的page.$eval方法作为一种简洁的方法来删除 textarea 的值......

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

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

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

Answer 3

您可以使用这些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 );
});

Answer 4

这非常适合“仅清除”方法：

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await page.keyboard.press('Backspace')