Puppeteer点击Div事件触发但容器未展开问题求助

核心问题 #

你当前的代码错误在于：使用JSDOM解析了从页面获取的HTML字符串，操作的是离线的DOM节点，而非Puppeteer控制的浏览器页面中的真实DOM元素。虽然你给离线节点绑定了点击事件并触发，但这只会在JSDOM的独立环境中生效，完全不会影响浏览器里的页面，所以div容器不会展开。

正确实现方式 #

所有需要影响浏览器页面的DOM操作，都必须在浏览器上下文内执行。可以通过Puppeteer的page.evaluate()方法，或者直接使用Puppeteer的选择器API来完成。

重构后的关键代码片段 #

替换你原来的点击逻辑部分：

/** START CLICK ACTION **/
if (content.includes('mehr anzeigen')) {
    // 在浏览器上下文内执行点击操作
    await page.evaluate((currentIndex) => {
        const feed = document.querySelector('div[role=feed]');
        const post = feed.children[currentIndex + 1]; // 用children而非childNodes，避免文本节点干扰
        const button = post.querySelector('div[dir=auto] div[role=button]');
        if (button) {
            button.click();
        }
    }, currentPostCount);
    
    // 等待内容展开后重新获取完整内容（根据实际情况调整等待逻辑）
    await page.waitForTimeout(500); 
    content = await page.evaluate((currentIndex) => {
        const feed = document.querySelector('div[role=feed]');
        const post = feed.children[currentIndex + 1];
        return post.querySelector('div[dir=auto][class]').textContent.toLowerCase();
    }, currentPostCount);
}
/** END CLICK ACTION **/

完整代码优化要点 #

1. 移除JSDOM依赖：所有DOM查询和操作都放在page.evaluate()中，直接操作浏览器里的真实DOM，避免离线节点和页面DOM脱节。
2. 使用children替代childNodes：childNodes会包含文本节点、注释等非元素节点，定位元素不稳定；children只返回元素节点，逻辑更可靠。
3. 添加等待逻辑：点击后如果内容是异步展开的，需要设置延迟或用page.waitForSelector()等待展开后的元素，确保后续获取的是完整内容。
4. 避免重复拉取HTML：不需要把整个feed的HTML拉到Node.js环境解析，直接在浏览器上下文操作更高效准确。

额外建议 #

• 若能直接定位到目标按钮，可简化为Puppeteer内置点击方法：

  await page.click(`div[role=feed] > div:nth-child(${currentPostCount + 2}) div[dir=auto] div[role=button]`);
  

  注意：nth-child从1开始计数，需对应调整索引。
• 对于动态加载内容，优先用page.waitForSelector()等待元素出现后再操作，避免元素未加载完成导致的错误。

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