使用Puppeteer并行填充多输入框时内容串位，如何解决？

你遇到的问题是因为用Promise.all并行执行两个page.type操作时，Puppeteer模拟的键盘输入事件会互相干扰。两个输入操作的按键事件交叉触发，加上焦点切换的影响，最终导致所有输入内容都混入第二个输入框，出现upsaesrsword这类混杂结果。

原因分析 #

page.type()的执行逻辑是：先定位目标元素并聚焦，再模拟键盘逐个输入字符。当两个page.type()并行执行时，第二个操作的聚焦动作可能会抢占第一个操作的焦点，或者两个操作的按键事件交替触发，导致字符被错误地输入到同一个输入框中。

解决方案 #

方案1：串行执行输入操作

放弃并行，按顺序逐个输入，确保前一个输入完成后再执行下一个：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("https://example.com");

  // 先输入用户名，完成后再输入密码
  await page.type("#user", "user");
  await page.type("#password", "password");

  await browser.close();
})();

方案2：使用元素句柄（ElementHandle）并行输入

如果需要保持并行，可以先获取两个输入框的元素句柄，再通过元素句柄执行type操作。每个元素句柄的type方法会先确保对应元素获得焦点，再输入内容，避免焦点冲突：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("https://example.com");

  // 获取两个输入框的元素句柄
  const userInput = await page.$("#user");
  const passwordInput = await page.$("#password");

  // 并行执行输入，每个操作针对各自的元素
  await Promise.all([
    userInput.type("user"),
    passwordInput.type("password")
  ]);

  await browser.close();
})();

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