Невероятно странное поведение кукловода

Question

Я использую этот код:

// <-- add event on top of file
process.on("unhandledRejection", (reason, p) => {
        console.error("Unhandled Rejection at: Promise", p, "reason:", reason);
        // browser.close(); // <-- no need to close the browser here
});

const puppeteer = require('puppeteer');
async function getPic() {
    try{ // <-- wrap the whole block in try catch
      const browser = await puppeteer.launch(/*{headless: false}*/);
      const page = await browser.newPage();
      await page.setViewport({width: 1000, height: 500}); // <-- add await here so it sets viewport after it creates the page


      //await page.goto('https://www.google.com');  //Old way of doing. It doesn't work for some reason...

      page.goto('https://www.google.com/').catch(error => console.log("error on page.goto()", error));


      // wait for either of events to trigger
      await Promise.race([
        page.waitForNavigation({waitUntil: 'domcontentloaded'}),
        page.waitForNavigation({waitUntil: 'load'})
      ]);


      await page.screenshot({path: 'pic.png'});
      await browser.close(); // <-- close browser after everything is done
    } catch (error) {
      console.log(error);
    }
}

getPic();

Тогда программа зависает. Через 30 секунд я получаю эту ошибку:

error on page.goto() Error: Navigation T imeout Exceeded: 30000ms exceeded at Promise.then (C:\...\pupet test\node_modules\puppeteer\lib\NavigatorWatcher.js:71:21) at <anonymous>

Но я также получаю запрошенную картинку!

1.Так как получается, что page.goto () завершается ошибкой, но все равно получает картинку, что означает, что page.goto () действительно работает !? 2. Что я могу сделать, чтобы смягчить эту странную ошибку?

Answer 1

Программа зависает, потому что вы вызвали goto без async-await или обещаний, а затем вы включили его в гонку за waitForNavigation, это запутало браузер, потому что все три строки кода в основном делают одно и то же на спине. Он пытается ориентироваться и ждать его.

Используйте асинхронное ожидание для обещаний. Не вызывайте асинхронные методы синхронными способами. Неважно, что именно так вы должны использовать в своем примере.

await page.goto('https://www.google.com');

Если вы хотите подождать, пока страница загрузится, функция goto также это затронула. Вам не нужно использовать waitForNavigation после goto.

await page.goto('https://www.google.com', {waitUntil: 'load'}); 

Существует также domcontentloaded, networkidle2, networkidle0 для свойства waitUntil. Вы можете прочитать об этом в документации с полным объяснением.

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

Вот код без особых сложностей и обещаний расы.

try{ // <-- wrap the whole block in try catch
      const browser = await puppeteer.launch(/*{headless: false}*/);
      const page = await browser.newPage();
      await page.setViewport({width: 1000, height: 500}); // <-- add await here so it sets viewport after it creates the page
      await page.goto('https://www.google.com/', {waitUntil: 'load'})
      await page.screenshot({path: 'pic.png'});
      await browser.close(); // <-- close browser after everything is done
    } catch (error) {
      console.log(error);
    }

Вот как это прекрасно работает в песочнице.

Документы кукловода - хорошее место, чтобы начать узнавать об этом.