使用Puppeteer点击IHG酒店货币下拉菜单报错求助

我尝试用Puppeteer调用await page.click(<ELEMENT>);点击IHG酒店官网的货币选择下拉菜单时，出现错误：Error: Node is either not clickable or not an HTMLElement。

我试过以下代码，均无效：

await page.click('div[class^="ui-dropdown-label-container"] label[class^="ng-tns"]');

await page.click('app-currency-selector [class="theme-dropdown"] p-dropdown[class^="ng-tns"]');

await page.click('p-dropdown[aria-label="Currency Selector"]');

await page.click('app-currency-selector[class="theme-dropdown"] p-dropdown[aria-label="Currency Selector"] class^="ng-tns-c84-9"');

可行的解决步骤： #

• 等待元素完全可交互：IHG官网基于Angular构建，元素加载渲染需要时间，先等待元素可见且可点击再执行操作：

  await page.waitForSelector('app-currency-selector .theme-dropdown p-dropdown', { visible: true, timeout: 6000 });
  await page.click('app-currency-selector .theme-dropdown p-dropdown');
  

• 定位内部实际可点击元素：部分Angular组件外层不是可点击的HTMLElement，需要定位到组件内的实际交互区域，比如下拉标签容器：

  await page.waitForSelector('app-currency-selector .theme-dropdown .ui-dropdown-label-container', { visible: true });
  await page.click('app-currency-selector .theme-dropdown .ui-dropdown-label-container');
  

• 先处理遮挡弹窗：页面的Cookie提示弹窗可能会遮挡货币选择器，先关闭弹窗再操作：

  // 关闭Cookie同意弹窗
  const acceptCookieBtn = await page.$('button[data-testid="accept-all-button"]');
  if (acceptCookieBtn) {
    await acceptCookieBtn.click();
    await page.waitForTimeout(1000);
  }
  // 再点击货币选择器
  await page.waitForSelector('app-currency-selector .theme-dropdown p-dropdown', { visible: true });
  await page.click('app-currency-selector .theme-dropdown p-dropdown');
  

• 直接在浏览器上下文触发点击：如果Puppeteer的点击方法失效，用evaluate在浏览器环境直接调用元素的点击事件：

  await page.waitForSelector('app-currency-selector .theme-dropdown p-dropdown', { visible: true });
  await page.evaluate(() => {
    document.querySelector('app-currency-selector .theme-dropdown p-dropdown').click();
  });
  

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