puppeteer 清空input原本的值

项目场景：

puppeteer 中 使用 page 输入 input 的时候，有可能需要清除 input 原本就有的值。

---

解决方案：

方案1

在浏览器环境中，使用 jquery 或者 js 直接清空 input 的值

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

请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。

方案2

使用 $eval 方法，在它的回调函数中执行

await frame.$eval('inputID', el => el.value = 'xxxxx')

请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。

方案3

模拟键盘删除事件，有多少字符删除多少次

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

方案4

模拟 input多次点击 操作，多次点击后会选中input的值，再次输入你想输入的字符

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

除了这几种方法外，可以熟悉键盘事件，自己创造出更好的方案

替换所有文字：

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

puppeteer 清空input原本的值

---

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。