Puppeteer模态框内滚动点击加载按钮并获取全量账户href实现方法

常见点击失效原因 #

按钮无法触发通常是这几种情况：按钮不在当前视口内、Puppeteer默认点击校验被拦截（比如元素被遮挡、透明度低）、按钮渲染在shadow DOM/iframe内、点击事件绑定的是非click原生事件。

可落地的实现方案 #

方案1：先滚动到按钮位置再触发点击 #

优先试这个方案，大部分点击失效是因为按钮未出现在视口内：

// 替换为你页面实际的按钮选择器，可通过F12右键元素复制selector
const showMoreBtn = await page.$('.show-more-results-btn');
if (showMoreBtn) {
  // 滚动到按钮居中显示
  await showMoreBtn.scrollIntoView({ block: 'center' });
  // 等待滚动动画结束
  await page.waitForTimeout(300);
  // 执行点击
  await showMoreBtn.click();
  // 替换为列表项的选择器，等待新数据加载完成
  await page.waitForSelector('.account-item:last-child', { timeout: 5000 });
}

方案2：用页面原生JS触发点击（绕过Puppeteer校验） #

如果方案1失效，用原生JS触发点击可以绕过Puppeteer的元素可见性校验：

await page.evaluate(() => {
  const showMoreBtn = document.querySelector('.show-more-results-btn');
  if (showMoreBtn) {
    // 触发原生click事件，开启冒泡保证父元素绑定的事件也能触发
    showMoreBtn.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
    // 如果点击没反应可以加一行触发mousedown事件：showMoreBtn.dispatchEvent(new Event('mousedown', { bubbles: true }))
  }
});
await page.waitForTimeout(1000);

方案3：完整的循环加载+全量链接抓取逻辑 #

把点击逻辑封装到循环里，直到没有加载按钮就停止抓取，自动去重：

// 存储所有抓取到的链接，用Set自动去重
const allAccountHrefs = new Set();
// 替换为你页面实际的账户a标签选择器
const ACCOUNT_ITEM_SELECTOR = '.account-item a';
// 替换为你页面实际的加载按钮选择器
const SHOW_MORE_BTN_SELECTOR = '.show-more-results-btn';

// 提取当前页所有账户链接的方法
async function extractCurrentHrefs() {
  const currentHrefs = await page.evaluate((selector) => {
    return Array.from(document.querySelectorAll(selector)).map(item => item.href);
  }, ACCOUNT_ITEM_SELECTOR);
  currentHrefs.forEach(href => allAccountHrefs.add(href));
}

// 第一步：先提取初始加载的前10条链接
await extractCurrentHrefs();

// 第二步：循环点击加载按钮，直到没有更多数据
while (true) {
  try {
    // 等待加载按钮出现，3秒超时说明没有更多数据
    await page.waitForSelector(SHOW_MORE_BTN_SELECTOR, { timeout: 3000 });
    // 用原生JS触发点击
    await page.evaluate((selector) => {
      document.querySelector(selector).dispatchEvent(new Event('click', { bubbles: true }));
    }, SHOW_MORE_BTN_SELECTOR);
    // 等待列表数量更新，确认新数据加载完成
    await page.waitForFunction(
      (selector, oldCount) => document.querySelectorAll(selector).length > oldCount,
      {},
      ACCOUNT_ITEM_SELECTOR,
      allAccountHrefs.size
    );
    // 提取新加载的链接
    await extractCurrentHrefs();
  } catch (err) {
    // 超时跳出循环，说明没有更多数据了
    break;
  }
}

// 输出所有抓取到的链接
console.log('全量账户链接：', Array.from(allAccountHrefs));

额外注意事项 #

• 如果按钮渲染在iframe内，需要先通过page.frames()找到对应的iframe实例，再在iframe内查询元素操作
• 如果按钮是shadow DOM渲染，用page.locator('::-p-shadow(按钮选择器)')定位元素即可
• 可以加重试逻辑，单次点击没加载出新数据就重试2次，避免网络波动导致的抓取中断
• 每次点击后可以加随机等待时长，避免被站点反爬策略拦截

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