如何在Puppeteer与Node.js中处理Twitter谷歌登录弹窗？

问题 #

我在Puppeteer和Node.js中处理弹窗时遇到了问题，当前已实现以下流程：

• 访问Twitter页面
• 通过iframe点击“通过谷歌登录”按钮，代码如下：

await page.goto('https://twitter.com');

await sleep(3000);
const frame = page.frames().find(f => f.url().startsWith('https://accounts.google.com/gsi/button'));
const acceptBtn = await frame.$('#container > div > div.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb.oXtfBe-l4eHX > span.nsm7Bb-HzV7m-LgbsSe-BPrWId');
await acceptBtn.click();

• 点击按钮后会弹出新窗口，我需要在该弹窗中执行Puppeteer操作，但无法让Puppeteer识别并使用这个弹窗页面。

我尝试了以下方法但未成功：

browser.on('targetcreated', async (target) => { //
  if (target.type() === 'page') {               // if it tab/page
    const page = await target.page();      // declare it
    const url = page.url();                // example, look at her url
    if (url.search('accounts.google.com/v3/signin') == -1) {     // if url is not like site.com (pop-up window whith ads to anower site)
      await page.close();           // close this page
    }
  }
});

解决方案 #

方法一：修正targetcreated监听逻辑 #

你的监听代码可能因绑定时机过晚或URL判断逻辑问题失效，调整后可正常捕获弹窗：

1. 提前绑定事件：在点击登录按钮前注册targetcreated事件，确保不会错过弹窗创建时机。
2. 优化URL匹配：用更可靠的包含判断，识别到目标弹窗后直接操作页面，操作完成后移除监听避免重复触发。

示例代码：

// 提前绑定弹窗监听
let popupPage;
const targetCreatedHandler = async (target) => {
  if (target.type() === 'page') {
    const url = target.url();
    // 匹配谷歌登录弹窗的URL特征
    if (url.includes('accounts.google.com/v3/signin')) {
      popupPage = await target.page();
      // 执行弹窗内的操作，比如输入邮箱
      await popupPage.waitForSelector('input[type="email"]');
      await popupPage.type('input[type="email"]', 'your-email@gmail.com');
      // 移除监听，避免后续无关弹窗触发
      browser.off('targetcreated', targetCreatedHandler);
    }
  }
};
browser.on('targetcreated', targetCreatedHandler);

// 原有登录流程
await page.goto('https://twitter.com');
await page.waitForTimeout(3000); // 替换自定义sleep为Puppeteer内置方法
const frame = page.frames().find(f => f.url().startsWith('https://accounts.google.com/gsi/button'));
const acceptBtn = await frame.$('#container > div > div.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb.oXtfBe-l4eHX > span.nsm7Bb-HzV7m-LgbsSe-BPrWId');
await acceptBtn.click();

// 等待弹窗加载完成后继续操作
await popupPage.waitForLoadState('networkidle2');
// 后续弹窗操作...

方法二：使用page.waitForTarget主动等待弹窗 #

这种方式比事件监听更可控，适合明确弹窗URL特征的场景：

示例代码：

// 原有登录流程
await page.goto('https://twitter.com');
await page.waitForTimeout(3000);
const frame = page.frames().find(f => f.url().startsWith('https://accounts.google.com/gsi/button'));
const acceptBtn = await frame.$('#container > div > div.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb.oXtfBe-l4eHX > span.nsm7Bb-HzV7m-LgbsSe-BPrWId');

// 点击按钮前，预先等待目标弹窗出现
const popupTargetPromise = page.waitForTarget(target => 
  target.type() === 'page' && target.url().includes('accounts.google.com/v3/signin')
);

// 点击触发弹窗
await acceptBtn.click();

// 获取弹窗页面
const popupTarget = await popupTargetPromise;
const popupPage = await popupTarget.page();

// 执行弹窗内操作
await popupPage.waitForSelector('input[type="email"]');
await popupPage.type('input[type="email"]', 'your-email@gmail.com');
// 后续操作...

关键注意事项 #

• 替换自定义sleep为Puppeteer内置的page.waitForTimeout()，或更精准的等待元素/加载状态方法，提升稳定性。
• 谷歌登录的页面选择器可能随版本更新变化，建议使用通用选择器（如'input[type="email"]'）代替冗长的类选择器。
• 确保browser实例在当前作用域内可访问，否则无法注册事件或调用waitForTarget。

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