Playwright测试库：如何验证两个DOM节点是否相等

错误原因 #

你当前代码的问题在于：通过locator.evaluate(node => node)获取的是Playwright的JSHandle对象，并非浏览器上下文的原生DOM节点，直接将其传入page.evaluate会因为DOM节点无法跨Node.js与浏览器上下文序列化传递而抛出异常。

正确的节点相等验证方式 #

方式1：在浏览器上下文内完成所有操作 #

将元素定位、父元素查找和节点对比逻辑放在同一个page.evaluate中执行，避免跨上下文传递DOM节点：

// 传入所需的选择器和文本参数
const nodesAreEqual = await page.evaluate(({ childSelector, parentRelativeSelector, targetText, targetParentSelector }) => {
  // 找到包含目标文本的子元素
  const childElements = document.querySelectorAll(childSelector);
  const matchedChild = Array.from(childElements).find(el => el.textContent.includes(targetText));
  if (!matchedChild) return false;

  // 从子元素向上查找匹配的父元素（用closest更精准，适合向上遍历）
  const parentFromChild = matchedChild.closest(parentRelativeSelector);
  // 定位目标父元素
  const targetParent = document.querySelector(targetParentSelector);

  // 验证节点是否相等
  return targetParent?.isEqualNode(parentFromChild);
}, { 
  childSelector: childEle, 
  parentRelativeSelector: parent, 
  targetText: txt, 
  targetParentSelector: parentEle 
});

console.log("节点是否相等：", nodesAreEqual);

方式2：用Playwright Locator API操作 #

借助Playwright的Locator方法获取元素句柄，再在浏览器上下文内对比：

// 定位包含目标文本的子元素
const matchedChild = page.locator(childEle, { hasText: txt }).first();
// 从子元素向上获取父元素（xpath=.. 表示直接父元素，也可改用closest选择器）
const parentFromChild = matchedChild.locator(`xpath=..`);

// 定位目标父元素
const targetParent = page.locator(parentEle).first();

// 获取目标父元素的元素句柄，传入对比逻辑
const nodesAreEqual = await parentFromChild.evaluate((node, targetNode) => {
  return node.isEqualNode(targetNode);
}, await targetParent.elementHandle());

console.log("节点是否相等：", nodesAreEqual);

两种元素定位点击实现 #

1. 自上而下定位（父元素 → 子元素） #

先定位父元素，再在其内部查找包含指定文本的子元素并点击：

// 点击父元素下包含指定文本的子元素
await page.locator(`${parentEle} ${childEle}`, { hasText: txt }).first().click();

2. 自下而上定位（子元素 → 父元素） #

先找到包含指定文本的子元素，再向上遍历到目标父元素并点击：

// 点击包含指定文本的子元素对应的父元素
await page.locator(childEle, { hasText: txt }).first().locator(`closest=${parent}`).click();

// 如果需求是点击子元素本身，直接执行：
// await page.locator(childEle, { hasText: txt }).first().click();

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