Puppeteer如何基于上下文节点执行XPath查询？

我来帮你分析一下问题所在，以及怎么修正代码拿到你想要的结果。

问题重现 #

你写了一段Puppeteer代码，想获取<p>标签下的所有子节点（包括文本节点和<span>元素），但实际结果却返回了整个页面的<html>标签，完全不符合预期。

你的代码 #

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://personalitycore.com/a.html');
  let p = (await page.$x('/html/body/p'))[0]
  console.log("Var[p] Class: " + p.constructor.name)
  console.log("Var[p] Tag: " + await p.evaluate(e => e.tagName, p))
  let spans = await p.$x('/*')
  for (var i = 0; i < spans.length; i++) {
    console.log("Var[spans] Tag: " + await spans[i].evaluate(e => e.tagName, spans[i]))
    console.log("Var[spans] Text: " + await spans[i].evaluate(e => e.textContent, spans[i]))
  }
  await browser.close();
})();

目标页面结构 #

<head>
</head>
<body>
  <p>
    text_node1
    <span>span_node1</span>
    text_node2
    <span>span_node2</span>
  </p>
</body>

实际输出结果 #

/usr/local/bin/node example.js
Var[p] Class: ElementHandle
Var[p] Tag: P
Var[spans] Tag: HTML
Var[spans] Text: text_node1 span_node1 text_node2 span_node2

问题根源 #

问题出在你写的XPath表达式/*上！这个表达式的含义是选择整个文档的根节点（也就是<html>标签），不管你是在哪个上下文节点下调用$x()，它都会直接跳转到文档根，这就是为什么你拿到了整个HTML标签的原因。

要基于<p>这个上下文节点查询它的子节点，你需要用相对路径的XPath表达式，而不是绝对路径。

解决方案 #

根据你的需求（获取<p>下的所有子节点，包括文本和元素），我们需要把XPath表达式改成./node()，同时做一点小处理来兼容文本节点（因为文本节点没有tagName属性）。

修改后的代码 #

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://personalitycore.com/a.html');
  let p = (await page.$x('/html/body/p'))[0]
  console.log("Var[p] Class: " + p.constructor.name)
  console.log("Var[p] Tag: " + await p.evaluate(e => e.tagName, p))
  
  // 使用./node()获取p的所有子节点（文本+元素）
  let childNodes = await p.$x('./node()')
  for (var i = 0; i < childNodes.length; i++) {
    // 文本节点没有tagName，用#text标识
    const nodeType = await childNodes[i].evaluate(e => e.tagName || "#text");
    // 去除文本前后的空白字符，输出更整洁
    const content = await childNodes[i].evaluate(e => e.textContent.trim());
    console.log(`Var[childNodes] Type/Tag: ${nodeType}`)
    console.log(`Var[childNodes] Text: ${content}`)
  }
  
  await browser.close();
})();

关键知识点说明 #

1. 相对路径XPath：在ElementHandle.$x()中，以.开头的表达式会基于当前节点作为上下文查询，而不是从文档根开始。
   • ./node()：匹配当前节点的所有子节点（包括文本节点、元素节点、注释节点等），完全符合你的需求。
   • 如果只需要元素类型的子节点，可以用./*，这样只会返回两个<span>元素。
2. 文本节点处理：文本节点属于Text类型，没有tagName属性，所以我们在输出时用#text来标识它的类型，避免报错。

运行修改后的代码，你就能得到预期的结果：依次输出text_node1、span_node1、text_node2、span_node2对应的节点信息。

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