使用Puppeteer时prompt输入无法填充表单字段的问题

我一眼就看到问题所在啦——你对prompt返回值的处理完全错了！这才导致Puppeteer没法正确填充输入框。

核心问题 #

prompt.get()返回的不是单个字符串，而是一个包含对应字段的对象。比如你调用prompt.get('username')时，返回的result其实是{ username: "你输入的内容" }，这时候用String(result)转成字符串只会得到"[object Object]"，自然没法正确填充到输入框里！

修正步骤 #

1. 正确提取输入值 #

不需要把整个对象转成字符串，直接从对象里取出对应的属性即可：

// 原来的错误写法
const username = String(result); 
// 正确写法
const username = result.username;

密码同理，应该取result2.password。

2. 优化prompt调用（可选） #

其实你可以一次性获取用户名和密码，不用写两个重复的Promise，代码更简洁：

const { username, password } = await new Promise((resolve, reject) => {
  prompt.get(['username', 'password'], (err, result) => {
    if (err) reject(err);
    resolve(result);
  });
});

3. 更可靠的表单填充方式（推荐） #

用page.type()代替page.click() + page.keyboard.type()，它会直接定位到输入框并输入内容，比模拟点击+键盘输入更稳定，还能自动处理输入框的焦点问题：

// 替换原来的click+keyboard.type组合
await page.type(USERNAME_SELECTOR, username);
await page.type(PASSWORD_SELECTOR, password);

如果这种方式还是有问题，还可以用page.$eval()直接设置输入框的value属性，兼容性更强：

await page.$eval(USERNAME_SELECTOR, (el, value) => el.value = value, username);
await page.$eval(PASSWORD_SELECTOR, (el, value) => el.value = value, password);

修改后的完整代码 #

const puppeteer = require('puppeteer');
const prompt = require('prompt');
prompt.start();

(async() => {
    // 一次性获取用户名和密码
    const { username, password } = await new Promise((resolve, reject) => {
        prompt.get(['username', 'password'], (err, result) => {
            if (err) reject(err);
            resolve(result);
        });
    });

    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('你的目标URL'); // 记得填写实际的页面URL

    const BUTTON_SELECTOR1 = '#post-3782 > div > div > p.clear > span > a > img';
    await page.click(BUTTON_SELECTOR1);

    const USERNAME_SELECTOR = '#username';
    const PASSWORD_SELECTOR = '#password';
    const BUTTON_SELECTOR = '#col2 > form > div:nth-child(3) > button';

    // 等待输入框加载完成（可选但推荐）
    await page.waitForSelector(USERNAME_SELECTOR, { visible: true });
    // 用更可靠的方式填充
    await page.type(USERNAME_SELECTOR, username);
    await page.type(PASSWORD_SELECTOR, password);

    await page.click(BUTTON_SELECTOR);
    await page.waitForNavigation();
    await page.goto('跳转后的目标URL'); // 填写实际跳转地址

    /* await page.close();
    await browser.close(); */
})();

额外小提示 #

• 如果页面是动态渲染的（比如用React/Vue），记得加上await page.waitForSelector(SELECTOR, { visible: true });确保元素完全加载并可交互后再操作。
• 检查你的选择器是否正确，有时候页面结构变化会导致选择器失效，可以用Chrome开发者工具的元素选择器功能验证。

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