如何用Puppeteer触发页面标签列表中链接的点击事件

核心错误原因 #

你的代码存在三个关键问题：

1. 操作对象错误：tabs数组存储的是标签的哈希字符串（如#one），而非DOM元素对象，因此调用link.click()会报错——字符串没有click()方法。
2. 上下文混淆：Puppeteer的Node.js环境与浏览器DOM环境完全隔离，你在Node环境中直接调用document、用setTimeout控制浏览器行为的写法完全无效。
3. 异步逻辑错误：forEach无法等待异步操作完成，即便修复上下文问题，components最终也会是空数组，因为所有setTimeout回调还没执行就已经打印结果了。

正确实现方案 #

下面提供两种可靠的实现方式，任选其一即可：

方案一：使用Puppeteer元素句柄（推荐，更易调试） #

通过Puppeteer API获取浏览器中的元素句柄，逐个点击并等待内容加载后收集数据：

const components = [];
// 获取所有tab元素的句柄
const tabElements = await page.$$('[role="tablist"] a');

for (const [index, tab] of tabElements.entries()) {
  // 点击当前tab
  await tab.click();
  // 等待tab切换完成（可替换为更精准的等待逻辑，比如等待元素状态更新）
  await page.waitForTimeout(200);
  // 收集当前页面的.ws-compid非空文本
  const currentComps = await page.evaluate(() => {
    return [...document.querySelectorAll(".ws-compid")]
      .map(el => el.innerText.trim())
      .filter(el => el !== "");
  });
  components.push(currentComps);
}

console.log(components);

方案二：在浏览器上下文内完成所有操作 #

直接在page.evaluate中执行完整的遍历、点击、收集逻辑，减少上下文切换开销：

const components = await page.evaluate(async () => {
  const tabs = [...document.querySelectorAll('[role="tablist"] a')];
  const results = [];

  for (const tab of tabs) {
    tab.click();
    // 等待tab内容切换完成
    await new Promise(resolve => setTimeout(resolve, 200));
    // 收集非空文本
    const comps = [...document.querySelectorAll(".ws-compid")]
      .map(el => el.innerText.trim())
      .filter(el => el !== "");
    results.push(comps);
  }

  return results;
});

console.log(components);

额外优化建议 #

• 避免使用固定时长的waitForTimeout，如果页面有明确的加载状态（比如标签的aria-selected属性变化、内容区域的加载动画消失），改用page.waitForFunction或page.waitForSelector实现精准等待，提升稳定性。
• 若标签点击后会触发网络请求，可配合page.waitForNavigation或page.waitForRequest等待请求完成后再收集数据。

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