如何用Puppeteer在万豪网站日历中选择日期范围

为啥会出现Target closed错误？ #

你代码里的page.waitForSelector('[class$="search-dates-popup"]')没加await，导致代码根本没等日历弹窗加载，直接就往下执行screenshot和browser.close()了——浏览器都关了，自然就报Target closed错误。

修复后的完整代码 #

下面是搞定日期选择的完整代码，顺便把目的地输入的问题也解决了：

const puppeteer = require('puppeteer')
const fs = require('fs/promises')

async function start(){
    // 先开非无头模式方便调试，没问题了再改回true
    const browser = await puppeteer.launch({ headless: false }); 
    const page = await browser.newPage();
    // 用networkidle2等页面资源加载更彻底，减少元素找不到的情况
    await page.goto("https://www.marriott.com/default.mi", {waitUntil: "networkidle2"}); 

    // 1) 填目的地并确认选择
    const destinationInput = await page.waitForSelector('[id$="-search-destination"]');
    await destinationInput.type("Chicago, IL, USA");
    // 按回车选第一个搜索结果
    await destinationInput.press('Enter');
    // 短等一下确保目的地设置完成
    await page.waitForTimeout(1000); 

    // 2) 打开日历弹窗并等它加载出来
    await page.click(".h-r-form-field-txt.search__calendar-value");
    // 等日历弹窗可见，确保能操作
    await page.waitForSelector('[class$="search-dates-popup"]', { visible: true }); 

    // 截个图确认日历加载好了
    await page.screenshot({ path: "test5_calendar_loaded.png" });

    // 选2023年8月7日到8月10日
    // 先确认日历显示的是8月，不是的话点下一月按钮切换
    let currentMonth = await page.$eval('[class*="calendar-month-header"]', el => el.textContent.trim());
    while (!currentMonth.includes("August 2023")) {
        await page.click('[class*="calendar-next-month"]');
        await page.waitForTimeout(500);
        currentMonth = await page.$eval('[class*="calendar-month-header"]', el => el.textContent.trim());
    }

    // 选入住和退房日期，用data-date属性定位最稳
    await page.click(`[data-date="2023-08-07"]`);
    await page.click(`[data-date="2023-08-10"]`);

    // 截图确认日期选好了
    await page.screenshot({ path: "test5_dates_selected.png" });

    // 这里可以加点击搜索按钮的代码
    // await page.click('[class$="search-submit-btn"]');

    await browser.close();
}

start();

重点说明 #

• 必须加await给waitForSelector：这是解决Target closed错误的核心，保证代码等日历加载完再往下走。
• 目的地输入后要确认：光输入文字不行，得按回车选搜索结果，不然目的地可能没真正设置上。
• 日期定位用data-date：万豪的日历元素带data-date属性，直接用这个定位日期比用类名靠谱多了，不容易因为页面样式变动失效。
• 调试技巧：开headless: false能看到浏览器操作过程，加截图可以每一步验证是否正确，调试起来更方便。

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