网页爬虫场景下如何使用Puppeteer或Node.js获取所有可点击元素

核心问题原因 #

原有采集逻辑仅遍历a标签的href属性，存在两类漏抓场景：

• 大量跳转逻辑绑定在非a标签元素上（如自定义按钮、带onclick事件的div、框架渲染的路由入口），URL不会直接写在静态属性里，必须触发点击事件才会暴露
• 部分可交互元素初始状态被CSS隐藏，不会出现在可视区域的常规交互流里，常规视口查询无法覆盖

全量可点击元素采集实现 #

1. 页面端元素遍历逻辑 #

跳出仅查询a标签的限制，用组合选择器覆盖所有可交互场景，同时给每个元素打唯一标记方便后续定位，直接替换原有的page.evaluate逻辑即可：

const clickableList = await page.evaluate(() => {
  const collectResult = [];
  // 组合选择器覆盖全量可交互场景
  const clickableSelectors = [
    'a[href]',
    'button:not([disabled])',
    '[onclick]',
    '[role="button"]',
    '[data-href]',
    '[data-url]',
    '[data-link]'
  ];
  const allElements = document.querySelectorAll(clickableSelectors.join(','));
  
  allElements.forEach((element, idx) => {
    // 打唯一标记，后续直接通过标记定位元素，避免选择器匹配失效
    element.setAttribute('data-crawl-uuid', idx);
    // 顺便提取元素自带的静态URL，减少不必要的点击操作
    const staticUrl = element.href 
                      || element.dataset.href 
                      || element.dataset.url 
                      || element.dataset.link 
                      || '';
    const computedStyle = window.getComputedStyle(element);
    collectResult.push({
      uuid: idx,
      tag: element.tagName,
      staticUrl: staticUrl,
      isInitHidden: computedStyle.display === 'none' 
                    || computedStyle.visibility === 'hidden'
    })
  })
  return collectResult;
})

2. 隐藏跳转URL捕获逻辑 #

针对没有静态URL、必须点击才能触发跳转的元素，不需要遍历所有元素手动查找跳转地址，直接在Puppeteer端全局挂事件监听器，自动捕获所有点击触发的跳转行为：

// 捕获主页面跳转的URL
page.on('framenavigated', (frame) => {
  if (frame === page.mainFrame()) {
    console.log('捕获跳转地址:', frame.url())
  }
})
// 捕获点击后新开标签页的URL
page.on('popup', async (newTab) => {
  console.log('捕获新标签页地址:', newTab.url())
})
// 捕获点击触发的接口请求，部分跳转地址会藏在接口响应里
page.on('request', (req) => {
  if (req.resourceType() === 'xhr' || req.resourceType() === 'fetch') {
    console.log('捕获点击触发的请求地址:', req.url())
  }
})

// 过滤出需要点击的无静态URL的元素，逐个触发点击
const needClickElements = clickableList.filter(item => !item.staticUrl);
for (const el of needClickElements) {
  // 通过之前打唯一标记定位元素，避免DOM变动导致定位失效
  const elHandle = await page.$(`[data-crawl-uuid="${el.uuid}"]`);
  if (!elHandle) continue;
  // 滚动到元素位置后触发点击
  await elHandle.scrollIntoViewIfNeeded();
  await elHandle.click({delay: 100});
  // 点击后等待300ms，让跳转逻辑执行完
  await page.waitForTimeout(300);
}

实操避坑要点 #

• 逐次点击元素前，先把页面回退到初始状态，避免上一次点击触发的页面跳转、DOM变动导致后续元素定位失败
• 给所有点击操作设置全局超时，遇到弹窗、广告时自动调用page.keyboard.press('Escape')关闭，避免流程卡死
• 过滤掉已经采集到静态URL的元素，不要重复触发同一个元素的点击逻辑，减少无效请求
• 遇到需要二次确认的跳转弹窗，按真实用户操作路径点击确认按钮，不要直接跳过，否则无法拿到最终的跳转地址

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