如何在Puppeteer中获取包含message-content的最后一个div元素？

首先你的HTML代码存在语法错误，第二个<message-content>前多了一个闭合的</div>，浏览器会自动修正该错误，但修正后的DOM结构可能和你预期的不一致，直接影响选择器的匹配结果。先把HTML修正为正确结构：

<html lang="en">
  <body>
    <div>
      <message-content>
        ABC
      </message-content>
    </div>
    <div>
      <message-content>
        XYZ
      </message-content>
    </div>
  </body>
</html>

接下来分析选择器失效的问题：div:has(message-content):last-child不生效的核心原因是，:last-child匹配的是父元素的最后一个子元素，如果body内除了div还有其他元素，或者浏览器DOM修正导致结构变化，这个选择器就无法命中目标。

你可以通过以下几种方式解决：

方法1：使用:last-of-type选择器 #

:last-of-type会匹配父元素下最后一个指定类型的元素，结合:has就能精准定位到最后一个包含<message-content>的div，运行命令时使用这个选择器即可：

div:has(message-content):last-of-type

方法2：明确限定父元素范围 #

通过body >指定父元素为body，再结合:nth-last-child(1)选取最后一个符合条件的div，避免其他层级元素干扰：

body > div:has(message-content):nth-last-child(1)

方法3：通过JS手动筛选 #

如果担心选择器兼容性，也可以在Puppeteer中先获取所有符合条件的div，再手动取最后一个，修改后的代码如下：

const puppeteer = require('puppeteer');
const url = process.argv[2]
const selector = process.argv[3]
const browserURL = 'http://127.0.0.1:9222'

;(async () => {
    const browser = await puppeteer.connect({browserURL})
    const page = await browser.newPage()
    await page.goto(url)
    // 手动筛选最后一个包含message-content的div
    const lastDiv = await page.evaluate(() => {
        const divs = Array.from(document.querySelectorAll('div:has(message-content)'))
        return divs.length > 0 ? divs[divs.length - 1].outerHTML : null
    })
    console.log(lastDiv)
    await browser.disconnect()
})();

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