Puppeteer多页面批量打开课程按钮功能实现求助

问题描述 #

我需要实现的功能是：在包含多个课程按钮的页面中，通过多页面并行操作点击每个课程按钮查看详情（单页面操作耗时太长）。具体逻辑是进入课程列表页后，创建与课程数量一致的页面副本，每个页面打开对应的课程。

但目前基于Puppeteer编写的代码无法正常工作：部分页面加载不完整，就算调用了loadElements函数，还是没法成功点击课程。创建多页面的逻辑已经生效，但后续批量点击课程的逻辑失效。

已知问题点 #

• 创建多页面的循环：生成对应数量页面，但加载元素时可能存在索引错误；
• 批量点击课程的循环：尝试在每个页面点击对应索引课程，但未生效；
• loadElements函数：用于滚动加载元素，但仍存在页面未加载完全的问题。

修复方案 #

1. 修正多页面创建与索引绑定逻辑 #

避免依赖循环索引后续查找元素，创建页面时直接绑定对应课程的链接，从根源解决索引错位问题：

// 先获取所有课程的详情页链接
const courseLinks = await page.$$eval('a.course-btn', els => els.map(el => el.href));

// 并行创建页面并直接打开对应课程详情
const pagePromises = courseLinks.map(async (link) => {
  const newPage = await browser.newPage();
  // 等待页面完全加载（networkidle2确保请求基本完成）
  await newPage.goto(link, { waitUntil: 'networkidle2', timeout: 15000 });
  // 此处添加课程详情页的处理逻辑
  return newPage;
});

await Promise.all(pagePromises);

2. 修复批量点击的索引失效问题 #

如果必须在副本页面中点击对应索引的课程，要保证每个页面的元素查找独立，且等待元素可交互后再操作：

const originalListUrl = '你的课程列表页URL';
const courseCount = await page.$$eval('button.course-item', els => els.length);
const pages = [];

// 先批量创建页面并导航到列表页
for (let i = 0; i < courseCount; i++) {
  const newPage = await browser.newPage();
  await newPage.goto(originalListUrl, { waitUntil: 'domcontentloaded' });
  await loadElements(newPage); // 确保当前页面加载完所有课程
  pages.push(newPage);
}

// 并行处理每个页面的点击操作
await Promise.all(pages.map(async (page, index) => {
  // 等待目标课程按钮可见且可交互
  const courseBtn = await page.waitForSelector(
    `button.course-item:nth-child(${index + 1})`, 
    { visible: true, timeout: 10000 }
  );
  await courseBtn.click();
  // 等待详情页跳转完成
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
}));

3. 优化loadElements滚动加载函数 #

确保滚动时等待元素完全加载，避免提前终止滚动：

async function loadElements(page, expectedCourseCount) {
  let previousHeight = 0;
  while (true) {
    // 滚动到页面底部
    await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
    // 等待元素加载（可根据页面加载速度调整时长）
    await page.waitForTimeout(1500);
    const currentHeight = await page.evaluate('document.body.scrollHeight');
    
    // 高度不再变化，说明加载完成
    if (currentHeight === previousHeight) break;
    previousHeight = currentHeight;

    // 如果已知预期课程数量，可提前终止滚动
    if (expectedCourseCount) {
      const loadedCount = await page.$$eval('button.course-item', els => els.length);
      if (loadedCount >= expectedCourseCount) break;
    }
  }
}

额外注意事项 #

• 为每个页面操作设置合理超时时间，避免因页面加载缓慢导致失败；
• 并行操作时注意浏览器资源限制，若课程数量过多可分批处理（比如每次处理10个页面）；
• 优先直接获取课程详情页链接，跳过页面点击步骤，减少交互带来的不稳定因素。

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