如何测试page.evaluateHandle调用el.nextElementSibling的返回结果是否为有效兄弟元素

校验方案 #

方案1：使用asElement()快速判断（最简写法） #

JSHandle内置的asElement()方法会自动判断当前句柄指向的是否为DOM元素，如果是null或者非元素类型会直接返回null：

child = await page.evaluateHandle(el => el.nextElementSibling, child);
const nextSibling = child.asElement();

if (nextSibling) {
  // 存在下一个元素兄弟节点，nextSibling可直接用于后续元素操作
} else {
  // 无匹配的下一个元素兄弟节点
}

方案2：代入evaluate上下文取原生值判断 #

如果需要同时做更多自定义判断，可以把句柄传入evaluate上下文取原生值校验：

child = await page.evaluateHandle(el => el.nextElementSibling, child);
const isExist = await child.evaluate(el => el !== null);

if (isExist) {
  // 存在后续逻辑
} else {
  // 不存在逻辑
}

方案3：获取节点时同步完成校验（减少API调用） #

也可以直接在第一次执行evaluate的时候就完成校验，减少和测试浏览器的通信次数，性能更好：

const nextSiblingInfo = await page.evaluate(el => {
  const next = el.nextElementSibling;
  return next ? { exist: true, element: next } : { exist: false };
}, child);

if (nextSiblingInfo.exist) {
  const child = nextSiblingInfo.element;
  // 后续操作逻辑
}

注意：禁止直接用if (child)判断节点是否存在，evaluateHandle返回的永远是JSHandle实例，直接判断变量本身永远会得到true。

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