Puppeteer点击手风琴元素后页面未加载展开，求解决方案

我通过Puppeteer加载了一个页面，页面中渲染了一组元素，每个元素点击后会展开并添加包含更多数据的元素，类似手风琴组件。我尝试了以下代码，但点击操作未生效，页面仍保持点击前的状态，请问该如何解决？

用户提供的代码：

async function getSite(url) { 
  const browser = await puppeteer.launch(); 
  const page = await browser.newPage(); 
  await page.goto(url, { waitUntil: "networkidle0" }); 
  const parentElements = await page.$$(".feeditem"); 
  await Promise.all(parentElements.map(parentElement => parentElement.click())); 
  await page.waitForFunction( 
    parentNumber => document.querySelectorAll(".accordion_opened").length === parentNumber, 
    { timeout: 20000 }, 
    parentElements.length 
  ); 
  await page.waitFor(5000); 
  const elementsExtcArr = await page.evaluate(() => { 
    let elements = Array.from(document.querySelectorAll(".accordion_opened")); 
    const elementsExtc = elements.map(i => i.innerHTML); 
    return elementsExtc; 
  }); 
  console.log(elementsExtcArr); 
  await browser.close(); 
} 
getSite(url);

Hey，我看了你的代码，点击没生效大概率是这几个常见原因导致的，咱们一个个来排查修复：

1. 元素不在视口内，导致点击失败 #

很多手风琴元素如果在页面下方，不在当前可视区域的话，Puppeteer的click()会直接失效——浏览器没法点击看不见的元素。你可以在点击前先把元素滚动到视口中央，再执行点击：

await Promise.all(parentElements.map(async parentElement => {
  // 滚动到元素可见位置
  await parentElement.evaluate(el => el.scrollIntoView({ block: 'center' }));
  // 模拟人类点击的延迟，避免触发页面的防爬或防抖逻辑
  await parentElement.click({ delay: 100 });
  // 给组件一点展开的缓冲时间，避免连续点击冲突
  await page.waitForTimeout(500);
}));

2. 点击事件绑定在子元素上，而非父元素.feeditem #

很多手风琴的触发点不是父容器本身，而是内部的子元素（比如标题栏、展开按钮）。直接点击.feeditem可能根本没触发绑定的事件。你可以先在浏览器控制台里检查下，实际能触发展开的元素是哪个，然后定位它：

// 假设实际触发元素是.feeditem下的.accordion-btn
const triggerElements = await page.$$(".feeditem .accordion-btn");
await Promise.all(triggerElements.map(async el => {
  await el.scrollIntoView();
  await el.click({ delay: 100 });
  await page.waitForTimeout(500);
}));

3. 等待条件不够精准，误判了展开状态 #

你的waitForFunction是等待.accordion_opened的数量等于父元素总数，但可能存在两个问题：一是有些组件展开后不会立刻加上这个类；二是类名可能和实际不符。建议换成针对每个元素的展开状态做单独等待，比如等待展开后的内容容器出现：

await Promise.all(parentElements.map(async parentElement => {
  await parentElement.scrollIntoView();
  await parentElement.click({ delay: 100 });
  // 等待当前元素展开后的内容容器加载完成
  await parentElement.waitForSelector(".accordion-content", { timeout: 10000 });
}));

4. 开启可视化调试，直观排查问题 #

你可以暂时关闭headless模式，让浏览器窗口显示出来，看看点击动作是否真的执行了——这能快速定位是元素没找到，还是点击没触发事件：

const browser = await puppeteer.launch({ headless: false }); // 或者用headless: 'new'

调整后的完整参考代码：

async function getSite(url) { 
  const browser = await puppeteer.launch({ headless: false }); // 开启可视化调试
  const page = await browser.newPage(); 
  await page.goto(url, { waitUntil: "networkidle0" }); 

  const parentElements = await page.$$(".feeditem"); 
  await Promise.all(parentElements.map(async parentElement => {
    try {
      // 滚动到元素可见
      await parentElement.evaluate(el => el.scrollIntoView({ block: 'center' }));
      // 模拟人类点击
      await parentElement.click({ delay: 100 });
      // 等待当前元素展开完成
      await parentElement.waitForSelector(".accordion_opened", { timeout: 10000 });
    } catch (e) {
      console.log(`处理元素时出错: ${e.message}`);
    }
  })); 

  // 获取展开后的元素内容
  const elementsExtcArr = await page.evaluate(() => { 
    return Array.from(document.querySelectorAll(".accordion_opened")).map(item => item.innerHTML); 
  }); 
  console.log(elementsExtcArr); 
  await browser.close(); 
} 
getSite(url);

先试试可视化模式，看看页面上的点击动作是否正常，这样能最快找到问题所在哦~

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