使用Puppeteer实现Twitter谷歌邮箱注册的元素点击问题及解决

AI 小北

2026-8-2

问题：Puppeteer操作Twitter谷歌登录按钮时，DevTools可见元素在页面源码中无法定位

我在使用Puppeteer通过谷歌邮箱注册Twitter时遇到一个问题：开发者工具里能看到的谷歌登录按钮元素，在页面源码里找不到，导致初始代码无法定位并点击该按钮。

初始代码（无法正常工作）

async function twitter(browserID) {
  const browserData = await getProfileData(browserID);
  const port = browserData.automation.port;
  const wsEndpoint = browserData.automation.wsEndpoint;

  // temp
  // let port = "52654";
  // let wsEndpoint = "/devtools/browser/7e7701c5-64c1-4d32-be9a-6198c58d58ae";

  const browser = await puppeteer.connect({
    browserWSEndpoint: `ws://127.0.0.1:${port}${wsEndpoint}`,
  });

  const page = await browser.newPage();
  await page.setViewport({
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
  });

  await page.goto('https://twitter.com', { waitUntil: 'networkidle2' });
  await sleep(5000);
  await page.click('span[class^="nsm7Bb-HzV7m-LgbsSe-"]');
  await sleep(3000);
};

问题原因

谷歌登录按钮是嵌入在独立的iframe中的，主页面的DOM结构并不包含iframe内部的元素。直接在主页面的page上下文里查找这些元素，自然会找不到——因为它们属于另一个独立的文档环境。

修复后的代码

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();