Как дождаться исчезновения указанного выше диалогового окна, прежде чем нажимать на элемент позади него в одностраничном приложении

Question

Я должен ввести почтовый индекс в диалоговом окне. После нажатия кнопки, чтобы ввести почтовый индекс, я пытаюсь дождаться закрытия приглашения, прежде чем нажать другую кнопку, но он не может должным образом ожидать нажатия следующей кнопки, пока приглашение закрывается. Пример диалога перед закрытием

Причины включают в себя следующее:

Я не могу использовать 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);

Answer 1

Мне на ум приходят два подхода:

1. Если нет необходимости использовать эмулированный щелчок мыши, и единственной проблемой является оверлей, блокирующий щелчок, вы можете использовать HTMLElement.click:

await page.evaluate(el => el.click(), zipcodeButton);

Проверьте, находится ли элемент сверху, используя elementFromPoint:

const {x, y} = await zipcodeButton.boundingBox();

const isOnTop = await page.evaluate((x,y, selectedElement) => {
    let topElement = document.elementFromPoint(x,y);
    return topElement === selectedElement;
}, x, y, zipcodeButton);

if (isOnTop)
    await zipcodeButton.click();

Answer 2

Это похоже на правильную идею:

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

Но я не могу сказать, удаляется ли этот div или просто скрывается.