如何用Puppeteer读取Booksy网站弹窗中的预约日期信息

核心问题分析 #

点击按钮后弹窗未完全加载就尝试读取内容，或是未针对弹窗内的DOM元素做等待，导致只能获取原页面内容。以下是完整的解决方案代码及说明：

关键实现步骤 #

• 等待弹窗内的日期元素渲染完成，确保DOM加载完毕
• 提取弹窗中的日期文本并转换为可计算的Date对象
• 判断日期是否处于未来7天范围内，符合条件则触发通知

修改后的完整代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://booksy.com/en-gb/45005_gents-of-richmond_barber_311817_london#ba_s=sgr_1');

  // 等待服务按钮并点击
  await page.waitForSelector('button[data-testid="service-button"]');
  await page.click('button[data-testid="service-button"]');

  // 等待弹窗内的日期元素加载（需替换为实际弹窗的真实选择器）
  // 可通过浏览器F12开发者工具查看弹窗中日期元素的类名或属性
  await page.waitForSelector('.available-date'); 

  // 提取弹窗中的日期文本（示例格式："Oct 25"）
  const dateText = await page.$eval('.available-date', el => el.textContent.trim());

  // 解析日期为可计算的Date对象
  const [monthStr, dayStr] = dateText.split(' ');
  const currentYear = new Date().getFullYear();
  const monthIndex = new Date(`${monthStr} 1, ${currentYear}`).getMonth();
  const appointmentDate = new Date(currentYear, monthIndex, parseInt(dayStr));

  // 计算未来7天的截止时间
  const sevenDaysLater = new Date();
  sevenDaysLater.setDate(sevenDaysLater.getDate() + 7);

  // 判断预约日期是否在未来7天内（排除已过期的日期）
  const isWithinRange = appointmentDate >= new Date() && appointmentDate <= sevenDaysLater;

  if (isWithinRange) {
    console.log(`发现近期可用预约：${dateText}，已在未来7天内！`);
    // 此处可替换为实际通知逻辑，比如发送邮件、推送消息等
    // 示例：sendEmailNotification(`可用预约日期：${dateText}`);
  } else {
    console.log(`当前最早预约日期：${dateText}，不在未来7天范围内`);
  }

  // 若需要持续监控预约，可注释掉下面的关闭语句，添加循环检测逻辑
  // await browser.close();
})();

重要注意事项 #

• 选择器替换：代码中的.available-date是示例选择器，必须打开Booksy弹窗后，用浏览器开发者工具查看真实的日期元素选择器并替换（比如可能是[data-testid="calendar-date"]这类属性选择器）
• 日期格式适配：如果弹窗日期格式包含年份或其他格式，需调整代码中的日期解析逻辑
• 持续监控：如需长期检测取消释放的预约，可添加循环和延迟（比如每5分钟刷新页面重复检测）
• 通知扩展：可集成nodemailer（邮件）、pushbullet（推送）等工具实现实际通知功能

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