Puppeteer中waitForSelector执行后调用click方法不生效问题求助

根因说明 #

• 目标站点为ASP.NET开发，页面加载完成后会先显示全局加载遮罩层，此时目标下拉框元素虽然已经可以被查询到，但实际被遮罩层覆盖，模拟点击事件会被拦截，无法触发预期效果
• 目标元素是原生<select>下拉选择框，直接调用点击方法仅能展开下拉选项，若要选择对应值，使用专用选择方法稳定性更高

可用实现代码 #

const puppeteer = require('puppeteer');

(async function scrape() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const url = "https://excise.wb.gov.in/CHMS/Public/Page/CHMS_Public_Hospital_Bed_Availability.aspx";
  await page.goto(url, {waitUntil: 'networkidle2', timeout: 0});
  
  // 第一步：等待全局加载遮罩层消失，确保元素可交互
  await page.waitForSelector('#ctl00_UpdateProgress1', { hidden: true, timeout: 0 });
  // 等待目标下拉框可交互
  await page.waitForSelector('#ctl00_ContentPlaceHolder1_ddl_District', { visible: true, timeout: 0 });

  // 方案1：直接选择下拉框对应选项，比点击展开更稳定，value填你需要的区县对应值即可
  await page.select('#ctl00_ContentPlaceHolder1_ddl_District', '24');

  // 方案2：如果确实需要触发点击展开下拉框的效果，使用原生JS点击，不受页面元素遮挡影响
  // await page.evaluate(() => {
  //   document.querySelector('#ctl00_ContentPlaceHolder1_ddl_District').click();
  // });

  // 后续操作逻辑
  // ...
  // await browser.close();
})();

补充说明 #

• 调用page.waitForSelector时添加visible: true参数，确保元素处于可见状态后再执行后续操作，避免查询到隐藏元素导致操作失效
• 原生<select>元素优先用page.select()方法传对应选项的value值完成选择，跳过点击展开、再点击选项的两步操作，减少异常概率
• 若页面还有其他动态加载的元素，操作前都添加对应的可见/隐藏等待逻辑即可

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