如何在Puppeteer中快速填充动态字符串至输入框？

你当前用.type()方法虽然能实现功能，但它本质是模拟真实用户按键输入——哪怕把delay设为0，也会触发一系列键盘事件（keydown、keypress、keyup），所以速度上有天然瓶颈。下面是几种更高效的实现方式：

方法1：直接设置输入框的value属性（最快） #

通过$eval直接操作DOM元素的value，跳过模拟按键的冗余过程，速度提升明显：

// 替换原来的.type()代码块
const inputValue = Object.values(html).join("\n");
await staff.$eval("textarea[name=mail_address]", (el, val) => {
  el.value = val;
  // 如果页面依赖输入/变更事件触发后续逻辑（比如验证、自动保存），手动触发对应事件
  el.dispatchEvent(new Event('input', { bubbles: true }));
  el.dispatchEvent(new Event('change', { bubbles: true }));
}, inputValue);

方法2：使用元素句柄的setValue()方法 #

Puppeteer的ElementHandle提供了setValue()方法，内部封装了设置value+触发必要事件的逻辑，用法更简洁：

const inputValue = Object.values(html).join("\n");
const textarea = await staff.$("textarea[name=mail_address]");
await textarea.setValue(inputValue);
// 若页面需要额外事件触发逻辑，可手动补充：
await textarea.dispatchEvent('input');
await textarea.dispatchEvent('change');

额外优化建议 #

1. 你的代码里page.setDefaultTimeout(0)放在page.goto()之后，建议移到page = await browser.newPage()之后，避免页面跳转过程中超时；
2. while(1)是无限循环，建议添加终止条件（比如pageNum达到阈值、连续N次获取不到邮箱等），防止程序无限制运行；
3. staff.click("input[name=save]")最好加上await，确保点击操作完成后再进入下一次循环。

内容的提问来源于stack exchange，提问作者Muxa