waitForNavigation висит без причины

Question

Я пытаюсь нажать кнопку next page, чтобы перебрать разные страницы, но после click скрипт висит там навсегда, код как показано ниже.

Почему waitForNavigation никогда не заканчивается?

async function main() {
  const br = await pptr.launch({headless: false, defaultViewport: null});
  const page = await br.newPage();

  await page.goto(
    'https://www.escentual.com/catalogsearch/result/?q=face',
    {waitUntil: 'networkidle2'}
  );

  for (var i=0; i<10; ++i) {   // click next-page button 10 times,
    await Promise.all([
      page.waitForNavigation({waitUntil: 'load', timeout: 100000}),
      page.click('#adj-nav-container > div.category-products > div.toolbar > div > div.amount > div > ol > li.next > a'),  // next-page css
    ]);
    console.log(`waited, url=${page.url()}`);
  }
  await br.close();
}

main();

Answer 1

Над элементом, на который вы пытаетесь щелкнуть, наложен оверлей. Вы должны либо закрыть это наложение, либо просто использовать HTMLElement.click:

page.$eval('#adj-nav-container > div.category-products > div.toolbar > div > div.amount > div > ol > li.next > a', el => el.click())

В качестве альтернативы, вы можете просто изменить номер страницы в URL веб-сайта:

https://www.escentual.com/catalogsearch/result/index/?p=1&q=face
https://www.escentual.com/catalogsearch/result/index/?p=2&q=face
...

---

Обнаружение overlay

Вот один из способов определить, находится ли элемент за оверлеем. document.elementFromPoint получает координату и возвращает самый верхний элемент этой координаты. Мы получаем координату выбранного элемента с помощью метода boundingBox(), а затем сравниваем его с самым верхним элементом этой координаты. Если они одинаковы, это означает, что элемент не находится за оверлеем или другим элементом.

Пример:

let targetElement = await page.$('#adj-nav-container > div.category-products > div.toolbar > div > div.amount > div > ol > li.next > a');
let {x, y} = await targetElement.boundingBox();

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

if (isOnTop)
    console.log("Element is not behind overlay");