如何使用Playwright检测页面元素是否包含子元素？

首先纠正你代码里的两个问题：

• 拼写错误：querySelectory 应该是 querySelector
• Playwright的page.querySelector()返回的是ElementHandle（Node.js环境的对象），不是浏览器里的DOM元素，所以不能直接调用hasChildNodes()，必须通过evaluate()方法在浏览器上下文执行DOM操作。

下面是几种可行的实现方式：

方法1：直接通过选择器判断父元素是否有子元素 #

使用page.evaluate()传入浏览器端代码，直接返回布尔值：

const hasChildren = await page.evaluate(selector => {
  const parent = document.querySelector(selector);
  return parent ? parent.hasChildNodes() : false;
}, '.class'); // 传入你的父元素选择器

// 用断言验证结果
expect(hasChildren).toBe(true); // 按需改为toBe(false)

方法2：先获取元素句柄，再判断子元素 #

如果已经拿到父元素的ElementHandle，可这样处理：

const parentElement = await page.querySelector('.class');
if (parentElement) {
  const hasChildren = await parentElement.evaluate(el => el.hasChildNodes());
  expect(hasChildren).toBe(true);
} else {
  // 处理父元素不存在的场景
  expect(parentElement).not.toBeNull();
}

方法3：通过子元素选择器直接判断 #

如果只需判断是否存在子元素（或特定子元素），也可以用page.locator()的count()方法：

// 判断.class下是否有任何子元素（等价于hasChildNodes逻辑）
const childCount = await page.locator('.class > *').count();
expect(childCount).toBeGreaterThan(0); // 计数大于0则表示有子元素

// 若要判断是否存在特定子元素（比如带.child类的子元素）
const specificChildCount = await page.locator('.class .child').count();
expect(specificChildCount).toBeGreaterThan(0);

可根据你的测试场景选择合适的方法。

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