如何使用 Puppeteer 在日历中选择日期范围

如何使用 Puppeteer 在日历中选择日期范围"/>

如何使用 Puppeteer 在日历中选择日期范围

我正在尝试在酒店网站 (.mi) 上填写表格，特别是，我想在网站的日历中选择 2023 年 8 月 7 日至 2023 年 8 月 10 日的日期（注意 URL 不会改变，所以我必须操纵 DOM）。

问题： 我点击进入日历后（通过

await page.click(".h-r-form-field-txt.search__calendar-value");

，如何选择日期范围？

使用

page.waitForSelector

也给了我一个错误：

        _Callback_error.set(this, new Errors_js_1.ProtocolError());
                                  ^

ProtocolError: Waiting for selector `[class$="search-dates-popup"]` failed: Protocol error (Runtime.callFunctionOn): Target closed

---

代码：

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

async function start(){
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(".mi", {waitUntil: "domcontentloaded"});

    /**FILL OUT FORM*/ 
    // 1) Fill DESTINATION
    await page.type('[id$="-search-destination"]', "Chicago, IL, USA");
    // TODO: Need to press ENTER or something after putting in Chicago

    // 2) Fill Number of NIGHTS
    // click into the box first
    await page.click(".h-r-form-field-txt.search__calendar-value");

    // waitForSelector 
    page.waitForSelector('[class$="search-dates-popup"]');

    // TODO: Figure how to screenshot AFTER calendar is loaded
    await page.screenshot({ path: "test5_click.png" });
    // pick month and pick date

    await browser.close() 
}

start() 

回答如下：

有关上下文，请参阅上一个线程。

如评论中所述，您可以遍历月份，直到找到与您想要的开始日期相匹配的月份，然后单击您想要的日期并为结束月份/日期对再次重复该过程。

const puppeteer = require("puppeteer"); // ^19.7.2

const url = "<Your URL>";
const startMonth = "August";
const startDay = 7;
const endMonth = "August";
const endDay = 10;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const ua =
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";
  await page.setUserAgent(ua);
  await page.setViewport({width: 800, height: 600});

  await page.goto(url, {waitUntil: "domcontentloaded"});
  //await page.type('[id$="-search-destination"]', "Chicago, IL, USA");
  await page.click(".search__calendar-value");
  await page.waitForSelector(".search-dates-popup");

  const findMonth = async targetMonth => {
    for (let i = 0; i < 12; i++) {
      const month = await page.$eval(
        ".DayPicker-Month",
        el => el.textContent
      );
    
      if (month.includes(targetMonth)) {
        break;
      }
    
      await page.click('[aria-label="Next Month"]');
    }
  };

  const chooseDay = day => page.$$eval(
    ".DayPicker-Day-value",
    (els, day) => els.find(e => e.textContent.trim() === day).click(),
    String(day)
  );

  await findMonth(startMonth);
  await chooseDay(startDay);
  await findMonth(endMonth);
  await chooseDay(endDay);

  await page.screenshot({path: "test.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

确保始终

await

每次返回承诺的 Puppeteer API 调用，这是其中的大部分。 不等待

page.waitForSelector

是一个错误.