如何在Puppeteer中点击保存密码通知弹窗实现自动填充？

你遇到的密码保存弹窗是Chrome浏览器原生级UI，不在页面DOM结构里，没法通过普通的page.click()搭配元素选择器触发点击，按下面的步骤配置就能实现凭证留存、新标签页自动填充：

方案1：启动时直接配置浏览器偏好（最稳定，无需手动点弹窗） #

核心是提前开启浏览器密码存储能力、指定持久化用户数据目录，让浏览器自动同意保存密码，不需要额外处理弹窗：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 新版Chrome用headless: 'new'也支持密码存储
    defaultViewport: null,
    args: ['--start-maximized'],
    // 核心配置1：指定本地用户数据目录，所有密码、cookie、登录态都会持久化存在这个文件夹
    userDataDir: './chrome_user_data',
    // 核心配置2：提前配置浏览器偏好，自动处理密码保存提示
    ignoreDefaultArgs: ['--enable-automation'],
    preferences: {
      credentials_enable_service: true, // 开启浏览器密码管理服务
      credentials_enable_autosignin: true, // 开启自动填充、自动登录能力
      profile: {
        password_manager_enabled: true, // 启用密码管理器
        default_content_setting_values: {
          notifications: 1 // 允许通知，避免其他原生弹窗遮挡
        }
      }
    }
  });

  const page = await browser.newPage();
  await page.goto('你的目标站点地址');
  // 正常执行账号密码输入、登录操作即可，浏览器会自动保存凭证
  // 后续新开标签页访问同站点，会自动填充已保存的账号密码
})();

方案2：手动触发弹窗「保存」按钮点击 #

如果你的Puppeteer版本不支持上面的preferences配置，要手动触发保存，不需要去页面里找元素，直接利用弹窗默认焦点规则触发即可：
Chrome弹出保存密码提示时，默认焦点就在「保存」按钮上，检测到弹窗出现时直接触发回车事件就能完成点击：

// 登录操作提交后，等待弹窗出现，直接按回车确认保存
await page.waitForTimeout(1000); // 等待弹窗弹出，可根据自己页面的响应速度调整时间
await page.keyboard.press('Enter');

避坑说明 #

• 不要加--incognito无痕模式启动参数，无痕模式下不会持久化存储密码
• 不要在登录流程结束后调用page.evaluate(() => localStorage.clear())、browser.deleteCookie()这类清空存储的方法，会把已保存的登录态清掉
• 只要userDataDir配置正确，后续重启Puppeteer也不需要重复登录，凭证会一直存在本地

内容的提问来源于stack exchange，提问作者nguyen truc linh