使用Puppeteer批量填充多个输入框的简洁方法

在使用Puppeteer时，通过page.type()填充输入框时，处理多个输入框会导致代码大量重复，示例代码如下：

await page.type('#idFirstName', user.first_name);
await page.type('#idEmailAddress', user.email);
await page.type('#idLastName', user.last_name);
await page.type('#idCity', user.city);

请问是否存在无需重复编写await page.type()即可批量填充多个输入框的方法？

当然有，下面是几种实用的优化方案：

方法一：数组映射+循环执行 #

把每个输入框的选择器和对应的值整理成数组，通过循环批量执行page.type()，避免重复代码：

const inputFields = [
  { selector: '#idFirstName', value: user.first_name },
  { selector: '#idEmailAddress', value: user.email },
  { selector: '#idLastName', value: user.last_name },
  { selector: '#idCity', value: user.city }
];

// 串行执行（按顺序填充，适合有依赖的场景）
for (const field of inputFields) {
  await page.type(field.selector, field.value);
}

// 并行执行（无顺序要求时可用，效率更高）
await Promise.all(
  inputFields.map(field => page.type(field.selector, field.value))
);

方法二：封装可复用的批量填充函数 #

如果需要频繁做这类操作，可以封装一个函数，后续直接传入参数调用即可：

async function fillInputs(page, fieldList) {
  for (const { selector, value } of fieldList) {
    await page.type(selector, value);
  }
}

// 调用示例
await fillInputs(page, [
  { selector: '#idFirstName', value: user.first_name },
  { selector: '#idEmailAddress', value: user.email },
  { selector: '#idLastName', value: user.last_name },
  { selector: '#idCity', value: user.city }
]);

方法三：利用字段名与选择器的对应关系简化 #

如果选择器命名和user对象的字段名有规律（比如#idFirstName对应user.first_name），可以用对象映射进一步简化：

const selectorToField = {
  '#idFirstName': 'first_name',
  '#idEmailAddress': 'email',
  '#idLastName': 'last_name',
  '#idCity': 'city'
};

for (const [selector, fieldName] of Object.entries(selectorToField)) {
  await page.type(selector, user[fieldName]);
}

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