如何使用Puppeteer借助外部JSON文件填充表单

没问题，我来一步步教你怎么用Puppeteer读取外部JSON文件来自动填充表单，结合你给出的示例代码调整实现：

步骤1：准备表单数据JSON文件 #

先创建一个存储表单数据的JSON文件，比如命名为formData.json，把需要填充的字段和对应值写进去：

{
  "searchQuery": "Adenosine triphosphate",
  // 如果有其他表单字段，直接添加键值对即可
  "exampleInput": "测试填充内容"
}

步骤2：修改Puppeteer代码读取并使用JSON数据 #

我们需要在代码里加入读取JSON文件的逻辑，用文件里的数据替换原来的硬编码内容。这里用Node.js的异步文件操作模块，避免阻塞流程：

const puppeteer = require('puppeteer');
const fs = require('fs').promises; // 引入异步文件操作模块

(async () => {
  try {
    // 读取外部JSON文件并解析成JS对象
    const formData = JSON.parse(await fs.readFile('./formData.json', 'utf8'));

    const browser = await puppeteer.launch({ headless: false }); // 开启可视化模式方便调试
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', { waitUntil: 'networkidle2' });

    await page.waitFor('input[name=search]');

    // 使用JSON中的数据填充搜索框
    // 注意：page.$eval的第三个参数可以把外部数据传递给页面上下文的回调函数
    await page.$eval('input[name=search]', (inputElement, searchValue) => {
      inputElement.value = searchValue;
    }, formData.searchQuery);

    // 要是有其他表单字段，用同样的方式处理：
    // await page.$eval('input[name=example]', (el, val) => el.value = val, formData.exampleInput);

    // 可选：触发表单提交，比如点击搜索按钮
    await page.click('input[type="submit"]');

    // 停留3秒查看结果，再关闭浏览器
    await page.waitForTimeout(3000);
    await browser.close();
  } catch (error) {
    console.error('操作出错：', error);
    // 出错时确保浏览器关闭
    if (browser) await browser.close();
  }
})();

关键细节说明 #

• JSON读取方式：用fs.promises.readFile是异步读取的最佳实践；如果是静态数据，也可以直接用const formData = require('./formData.json')，但这种方式是同步的且会缓存文件内容，适合数据不常变动的场景。
• 数据传递到页面：page.$eval的第三个参数能把外部的formData数据传入页面上下文的回调函数，避免直接在回调里访问外部变量（页面上下文和Node.js上下文是隔离的）。
• 扩展性：如果表单有多个输入框、下拉框等，只需要在JSON文件里添加对应字段，然后复制page.$eval的逻辑，修改选择器和对应的JSON键名即可。

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