Question

议题:我不能在旅馆网站上选择日历上植被(。

rror:Node


我尝试了什么(下面是我的法典):
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("https://www.ihg.com/hotels/us/en/reservation", {waitUntil: "domcontentloaded"});

    //! This is not working - Fill Number of NIGHTS
    await page.click( #datePicker div[class="input-adjacent-icon fa fa-calendar"] );

    // waitForSelector 
    await page.waitForSelector( span[class="datepicker-field"] span[class="input-and-icon brand-outline"] );

    await browser.close() 
}

start()

Answer 1

如果您要操作document.querySelectorAll(#datePicker div[}=“input-atant-icon fa-calendar”),你会看到,有6项内容与你的遴选人相符。然而,只有最后2条是可以理解的。

这里,新法典希望:

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("https://www.ihg.com/hotels/us/en/reservation", {waitUntil: "domcontentloaded"});

    // This is for check in
    await page.click( #datePicker > span > span > lib-datepicker-date-field:nth-child(2) > span > span > div );

    // run other stuff

    // Check out
    await page.click( #datePicker > span > span > lib-datepicker-date-field:nth-child(4) > span > span > div );

    // run other stuff

    // waitForSelector 
    await page.waitForSelector( span[class="datepicker-field"] span[class="input-and-icon brand-outline"] );

    await browser.close() 
}

start()

Answer 2


序言:该网站是一个像安吉斯·尤里察这样的景象。 它重复了身份识别特征的内容,以及大量的同化行为和一般的杂乱,因此它赢得的机体很容易实现自动化。

这可能是一个xy problem,在网络拆解中经常出现:有一种趋势认为你需要像用户那样行事(“我需要打开日期选择”。但是,在拟议解决方案Y中,考虑对真正的问题X(“我能利用网站接受的任何技术把日期投入集中起来吗?” )和使用<代码> 类型()和关键板,以便把投入箱装上,而不担心日期选择自动化。

考虑到最后一点似乎是对每个要素的正确投入,你可以选择这些要素,然后利用关键板在新内容中删除目前的日期和类型。登机帮助确保启动适当的活动,使网站了解这一变化。当现场验证和操纵日期时,有一线星像,因此,Im每天进入检查点,然后是目的地,然后检查。

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

const url = "<Your URL>";

let browser;
(async () => {
  browser = await puppeteer.launch({headless: "new"});
  const [page] = await browser.pages();
  const ua =
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36";
  await page.setUserAgent(ua);
  await page.goto(url);

  const enterDate = async (el, date) => {
    const length = await el.evaluate(el => el.value.length);
    await el.focus();

    for (let i = 0; i < length; i++) {
      await page.keyboard.press("Backspace");
      await page.keyboard.press("Delete");
    }

    await el.type(date);
    await page.keyboard.press("Enter");
  };

  const getLastEl = sel => page.evaluateHandle(`
    [...document.querySelectorAll("${sel}")].pop()
  `);

  const destinationEl = await getLastEl("#dest-input");
  const checkInEl = await getLastEl("#checkInDate");
  const checkOutEl = await getLastEl("#checkOutDate");
  await enterDate(checkInEl, "05/21/2024");
  await destinationEl.type("miami");
  await enterDate(checkOutEl, "06/07/2024");
  await page.screenshot({path: "test.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

采用多功能载荷一般是好的,但我注意到,有些情况下投入的准备程度相当高,因此,我回头再去装载,速度较慢。也许可以确定一种假设,即你可以核查准备程度,这种准备程度比负荷更精确,让你回头上下载,但我建议首先注重正确性,然后加快(作为保持这一员额范围的一种做法)。

You may need to play with this a bit, but hopefully it communicates one possible general strategy. Proceed carefully.

友情链接