Puppeteer修改希尔顿网站Maximum Price输入框失败求助

在希尔顿官网搜索结果页中，点击All Filters按钮打开筛选界面后，无法修改Maximum Price对应的文本输入框内容。尝试了三种操作方法，执行无报错但输入框内容始终未改变，使用环境为Node.js。

解决方案 #

这类问题大多是因为直接修改input.value或简单输入操作，没有触发前端框架（如React/Vue）依赖的输入事件，导致页面未感知到值的变化，筛选逻辑也无法生效。可以尝试以下几种有效方法：

方法1：手动触发输入/变更事件 #

修改输入框值后，主动触发input和change事件，让前端框架识别到值的更新：

const inputSelector = 'input[id="maxPrice"]';
await page.evaluate((selector) => {
  const input = document.querySelector(selector);
  input.value = '123';
  // 触发输入事件
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 触发变更事件
  input.dispatchEvent(new Event('change', { bubbles: true }));
}, inputSelector);

方法2：模拟真实用户的完整输入流程 #

通过快捷键选中原有内容后删除，再输入新值，完全模拟用户操作路径：

const inputSelector = 'input[id="maxPrice"]';
await page.focus(inputSelector);
// Ctrl+A 选中全部内容
await page.keyboard.down('Control');
await page.keyboard.press('A');
await page.keyboard.up('Control');
// 删除选中内容
await page.keyboard.press('Backspace');
// 输入新值，添加小延迟模拟真实输入
await page.keyboard.type('123', { delay: 100 });
// 可选：按回车确认变更
await page.keyboard.press('Enter');

方法3：确保输入框可交互后再操作 #

先等待输入框完全可见且可交互，再执行清空和输入操作：

const inputSelector = 'input[id="maxPrice"]';
// 等待输入框就绪
await page.waitForSelector(inputSelector, { visible: true, timeout: 5000 });
await page.focus(inputSelector);
// 选中并清空现有内容
await page.keyboard.press('End');
await page.keyboard.down('Shift');
await page.keyboard.press('Home');
await page.keyboard.up('Shift');
await page.keyboard.press('Backspace');
// 输入新值
await page.type(inputSelector, '123', { delay: 100 });

原尝试代码 #

完整初始代码

console.time('program'); // * Start the timer

const puppeteer = require('puppeteer-extra');
const constants = require('./hilton_constants.js');
const fs = require('fs/promises');

// * Main Function
let browser;
async function hiltonScan() {
  browser = await puppeteer.launch({
    // * select `false` if you want to run non-headless mode for testing
    headless: false
  });
  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: 1065, height: 15000 });

  // Block resources
  await page.setRequestInterception(true);
  page.on('request', (request) => {
      if (request.resourceType() === 'image' || request.resourceType() === 'font' || request.resourceType() === 'media') {
        request.abort();
      } else {
        request.continue()
      }
  });

  await page.goto('https://www.hilton.com/en/', { waitUntil: "domcontentloaded" });

  // Fill in Where to
  await page.type('[class="form-input w-full"]', "Seattle, WA, USA");

  // Click calendar UI 
  await page.click('[data-testid="search-dates-button"]');
  await page.waitForSelector('[data-testid="calendar-container"]');

  await fill_stayDates(page, constants);

  // Fill in # Room, # Guest
  await page.click('[data-osc-product="search-rooms-button"]');
  await page.waitForSelector('[data-osc-product="search-rooms-button"]');

  //* Number of Rooms and Adults logic for Hilton
  if (constants.NUM_ROOMS != 1 && constants.NUM_ADULTS != 1) {
    if (constants.NUM_ROOMS == 1) {
      // Add Adults
      const add_adults_icon = await page.$$('[data-testid="rooms-room-1"] [aria-label="Add adult to room 1"]');
      for (let i = 1; i < constants.NUM_ADULTS; i++) {
        // Press the "+" button in Rooms
        await add_adults_icon[0].click();
      }
      await page.click('[class="stroke-text"]');
    } else {
      // Add Rooms
      const add_rooms_icon = await page.$$('[data-testid="rooms-add-room"]');
      for (let i = 1; i < constants.NUM_ROOMS; i++) {
        await add_rooms_icon[0].click();
      }
      const add_adults_icon = await page.$$('[data-testid="rooms-room-1"] [aria-label="Add adult to room 1"]');
      const adult_diff_addn = constants.NUM_ADULTS - constants.NUM_ROOMS + 1

      for (let i = 1; i < adult_diff_addn; i++) {
        // Press the "+" button in Rooms
        await add_adults_icon[0].click();
      }
      await page.click('[class="stroke-text"]');
    }
  }

  // Click Find a Hotel button
  await page.click('[data-testid="search-submit-button"]');

  await page.waitForNavigation({waitUntil: 'networkidle2'});

  // Click Filter button
  await page.click('#filters-button-with-icon');

  // Click Show available hotels only
  await page.click('#showAvailHotels');

  await page.waitForNavigation({waitUntil: 'networkidle2'});

  // !THIS IS NOT WORKING: Change maximum price
  const inputSelector = 'input[id="maxPrice"]';

  await page.focus(inputSelector);
  await page.$eval(inputSelector, input => {
        input.value = '';
        input.click();
  });

  await page.keyboard.type('123', {delay: 200});

  //* HELPER FX: click to the correct starting month
  async function fill_stayDates(page, constants){
    const findMonth = async targetMonth => {
      for (let i = 0; i < 12; i++) {
        const month = await page.$eval('[id^="calendar-month-"]', el => el.textContent);
        if (month.includes(targetMonth)) break;

        const arrows = await page.$$('[data-testid="calendar-container"] > [class="flex justify-between"] button:not([disabled])');
        await arrows[arrows.length - 1].click();
      }
    };

      const chooseDay = async day => {
        const dayResult = await page.$$eval('button[id*=day-] span:not([class*=sr-only])', elements => elements.map(element => element.textContent));
        const dayIndex = dayResult.indexOf(`${day}`)
        await page.$$('button[id*=day-] span:not([class*=sr-only])').then(el => el[dayIndex].click());
      };

      await findMonth(constants.START_MONTH);
      await chooseDay(constants.START_DAY);
      await findMonth(constants.END_MONTH);
      await chooseDay(constants.END_DAY);

      // Close pop-up
      await page.click('[class="stroke-text"]');
    };
  }


// * Call the main function
(async () => {
  console.log('Starting the Hilton scraper program...');
  await hiltonScan()
    .catch(err => console.error(err))
    // Close browser regardless of what Promise returns only if browser is not null or undefined (`?` keyword)
    .finally(() => browser?.close());

    console.timeEnd('program'); // * End the timer and output the execution time
})();

第二次尝试代码

// !THIS IS NOT WORKING: Change maximum price
  async function clearFocusedInput(page) {
    await page.keyboard.press('Home');
    await page.keyboard.down('Shift');
    await page.keyboard.press('End');
    await page.keyboard.up('Shift');
    await page.keyboard.press('Backspace');
  }
  // your test
  const inputSelector = 'input[id="maxPrice"]';
  
  await page.focus(inputSelector);
  await clearFocusedInput(page);
  await page.waitForSelector(inputSelector).then(input => input.type('222'));

第三次尝试代码

// !THIS IS NOT WORKING: Change maximum price
  const inputSelector = 'input[id="maxPrice"]';

  await page.focus(inputSelector);
  await page.$eval(inputSelector, input => {
        input.value = '';
        input.click();
  });

  await page.keyboard.type('123', {delay: 200});

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