时间戳

首页 > 解决方案 > 如何在单页应用程序中单击其后面的元素之前等待上述对话框消失

web-scraping - 如何在单页应用程序中单击其后面的元素之前等待上述对话框消失

问题描述

我必须在对话框中输入邮政编码。单击按钮输入邮政编码后，我尝试等待提示关闭，然后再单击其他按钮，但在提示关闭时无法正确等待单击下一个按钮。 关闭前的对话框示例

原因包括以下几点：

我不能使用 waitForSelector(" ", {visible:true}) 因为选择器已经在初始对话后面可见。

我不能使用 waitForNavigation 因为关闭初始选项卡不会更改页面。

我试图避免在页面加载之前手动等待一段时间。

我也尝试等待上述对话框变为空，但在下一个按钮实际可点击之前它发生得太快了。

//await self.page.waitForFunction('document.querySelector("div.shopping-context-container") == null');

我想知道当上面的对话框试图关闭时，是否有办法等待下一个按钮实际可点击。

await enterInput.click(); // Submit zip code
await self.page.waitForSelector("button#nav-shopping-selector-postalcode", {
    visible: true,  // This automatically is true because the selector is already visible behind the prompt 
  }); 
  let zipcodeButton = await self.page.$(
    "button#nav-shopping-selector-postalcode",
    {
      visible: true,
    }
  );
  await zipcodeButton.click(); // Clicks next button before page is properly loaded
  await self.page.waitForSelector("input#shopping-selector-postal-code", {
    visible: true,
  });
  // Breaks here because the second button wasn't clicked and so there is no node for this selector
  await self.page.type("input#shopping-selector-postal-code", zip);

标签： web-scrapingpuppeteer

解决方案

这似乎是正确的想法：

await self.page.waitForFunction(() => !document.querySelector("div.shopping-context-container"))

但我不知道那个 div 是被删除还是被隐藏了。

推荐阅读