使用Puppeteer获取flatpickr节点aria-label返回JSHandle@node问题求助

现有代码问题 #

• 数据类型错误：dates被初始化为对象{}，不存在push方法，执行时会直接抛出异常
• 选择器逻辑错误：:is(.flatpickr-disabled)筛选的是禁用日期，和提取可用日期的需求完全相反
• 变量声明不规范：dates未用let/const声明，属于隐式全局变量，可能出现作用域异常
• 缺少等待逻辑：没有确认日历节点是否渲染完成就执行提取，可能出现查询结果为空的情况

正确实现代码 #

(async () => {
  // 等待日历日期节点渲染完成，超时时间可自行调整
  await page.waitForSelector('span.flatpickr-day', { timeout: 5000 });

  const availableDates = await page.evaluate(() => {
    // 筛选当前月未被禁用的日期节点
    const dateElements = document.querySelectorAll('span.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.flatpickr-disabled)');
    const dates = [];
    for (let i = 0; i < dateElements.length; i++) {
      const ariaLabel = dateElements[i].getAttribute('aria-label');
      if (ariaLabel) dates.push(ariaLabel);
    }
    return dates;
  });

  console.log('可用日期：', availableDates);
})();

关于JSHandle@node返回值的说明 #

如果直接在Node.js侧对Puppeteer返回的ElementHandle对象调用DOM方法（比如element.getAttribute()），就会得到JSHandle@node类型的返回值，这是因为Node环境和浏览器环境是隔离的，所有DOM操作逻辑必须放在page.evaluate的回调中执行，该回调会被注入到浏览器页面上下文运行，才能正常读取DOM属性。

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