如何检测JS控制的动态页面目标变更并实现预约放号实时通知？

核心问题解答 #

• 模拟页面按钮点击不需要复杂操作，无论是前端脚本还是自动化工具，获取到对应DOM元素后调用.click()方法即可，效果和手动点击完全一致
• 不需要自行开发Chrome扩展，使用现成的油猴（Tampermonkey）脚本框架即可实现需求，开发成本极低

方案1：油猴脚本实现（门槛最低，适合新手） #

操作步骤如下：

1. 给浏览器安装Tampermonkey扩展，新建用户脚本
2. 审查页面元素，提取两个核心选择器：
   • 右侧切换月份的按钮的CSS选择器（审查元素后右键元素→复制→复制选择器即可获取）
   • 可预约日期的元素特征（比如可预约日期节点会带特殊类名，同样复制对应的CSS选择器）
3. 将以下代码粘贴到脚本编辑区，替换对应选择器参数后保存即可

// 页面加载完成后自动执行逻辑
window.addEventListener('load', () => {
  // 替换为你复制的下月切换按钮选择器
  const nextMonthBtn = document.querySelector('替换为下月按钮选择器');
  let clickTimes = 0;
  // 每次点击间隔500ms，避免过快导致页面渲染异常
  const clickTimer = setInterval(() => {
    // 点击次数设置为你实际需要点击的次数+2，避免漏翻
    if (clickTimes < 15) {
      nextMonthBtn.click();
      clickTimes++;
    } else {
      clearInterval(clickTimer);
      checkAvailableSlot();
    }
  }, 500);

  function checkAvailableSlot() {
    // 替换为你复制的可预约日期选择器
    const availableSlots = document.querySelectorAll('替换为可预约日期选择器');
    if (availableSlots.length > 0) {
      // 检测到可预约日期时触发提醒
      alert('检测到可用预约名额！');
      // 如需声音提醒可自行添加音频播放逻辑
    } else {
      // 无可用名额时1分钟后自动刷新页面重新检测
      setTimeout(() => window.location.reload(), 60 * 1000);
    }
  }
});

脚本启用后，打开预约页面挂在后台即可，自动完成翻页、检测、提醒全流程。

方案2：Playwright自动化实现（适合后台挂机场景） #

如果需要长期后台挂机运行，不需要前台保留浏览器页面，可以使用Playwright自动化工具：

1. 安装Node.js后执行npm init playwright@latest初始化项目
2. 代码逻辑和油猴脚本逻辑一致，调用Playwright提供的页面操作API模拟点击、元素查询即可
3. 可拓展性更强，检测到可用名额时可对接邮件、企业微信等通知渠道，实现多端提醒

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