使用Puppeteer填充登录弹窗输入元素时超时，如何解决？

我使用Puppeteer 19.8.5自动化访问某报纸网站，流程是点击登录按钮打开弹窗后输入邮箱和密码，但等待弹窗内的选择器时出现超时错误：

UnhandledPromiseRejectionWarning: TimeoutError: Waiting for selector input[fieldloginemail] failed: Waiting failed: 30000ms exceeded.

我的代码如下：

const puppeteer = require("puppeteer");

puppeteer
  .launch({ headless: false, defaultViewport: null })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://pressreader.df.cl/diario-financiero");
    await page.waitForSelector(".btn-login, .toolbar-button-signin", {
      visible: true,
    });
    await page.click(".btn-login, .toolbar-button-signin");

    const emailSelector = 'input[fieldloginemail]'
    const passwordSelector = 'input[fieldloginpassword]'

    await page.waitForSelector(emailSelector)
    await page.waitForSelector(passwordSelector)

    await page.type(emailSelector, 'foo@bar.com')
    await page.type(passwordSelector, 'myPassword')
    await page.click('button[actionlogin]')

    await browser.close();
  });

解决方法 #

1. 检查登录弹窗是否在iframe中 #

很多网站会把登录弹窗放在iframe里，直接在主页面查找元素肯定找不到。先定位iframe再切换进去操作：

const puppeteer = require("puppeteer");

puppeteer
  .launch({ headless: false, defaultViewport: null })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://pressreader.df.cl/diario-financiero");
    await page.waitForSelector(".btn-login, .toolbar-button-signin", {
      visible: true,
    });
    await page.click(".btn-login, .toolbar-button-signin");

    // 等待并切换到登录iframe
    const loginFrame = await page.waitForFrame(frame => frame.url().includes("login"));
    
    const emailSelector = 'input[fieldloginemail]'
    const passwordSelector = 'input[fieldloginpassword]'

    // 在iframe内等待元素并操作
    await loginFrame.waitForSelector(emailSelector, { visible: true });
    await loginFrame.type(emailSelector, 'foo@bar.com');
    await loginFrame.waitForSelector(passwordSelector, { visible: true });
    await loginFrame.type(passwordSelector, 'myPassword');
    await loginFrame.click('button[actionlogin]');

    await browser.close();
  });

2. 优化等待条件或延长超时 #

弹窗加载可能慢于预期，默认30秒不够，或者需要等待元素可见而非仅仅存在：

// 等待元素可见，超时设为60秒
await page.waitForSelector(emailSelector, { visible: true, timeout: 60000 });
await page.waitForSelector(passwordSelector, { visible: true, timeout: 60000 });

3. 验证选择器准确性 #

打开浏览器开发者工具，弹窗出现后搜索input[fieldloginemail]，确认是否能匹配到目标元素。如果是自定义属性，可能需要调整选择器写法，比如input[fieldloginemail=""]，或者检查是否有拼写错误。

4. 等待网络状态稳定 #

点击登录按钮后页面可能有异步请求，先等网络 idle 再查找元素：

await page.click(".btn-login, .toolbar-button-signin");
// 等待网络请求完成，超时30秒
await page.waitForNetworkIdle({ timeout: 30000 });
// 再等待选择器
await page.waitForSelector(emailSelector);

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