Page d'attente des marionnettistes chargée après la soumission du formulaire

Question

Je soumets un formulaire en utilisant le code suivant et je veux que Puppeteer attende le chargement de la page après l'envoi du formulaire.

 await page.click("button[type=submit]");

//how to wait until the new page loads before taking screenshot?
// i don't want this:
// await page.waitFor(1*1000);  //← unwanted workaround
await page.screenshot({path: 'example.png'});
 

Comment attendre le chargement de la page avec le marionnettiste?

Answer 1

Vous pouvez attendre la navigation de manière asynchrone pour éviter d’obtenir null lors de la redirection,

 await Promise.all([
      page.click("button[type=submit]"),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);
 

Cela vous aidera si le page.click déclenche déjà une navigation.

Answer 2

await page.waitForNavigation();

Answer 3

Selon la Documentation Officielle, vous devez utiliser:

page.waitForNavigation(options)

• options <Objet> paramètres de Navigation qui pourraient avoir les propriétés suivantes:
  • timeout <nombre> Maximum de temps de navigation en millisecondes, par défaut à 30 secondes, passez 0 pour désactiver le délai d'attente. La valeur par défaut peut être modifié à l'aide de la page.setDefaultNavigationTimeout(timeout) de la méthode.
  • waitUntil <string|Array<chaîne de caractères>> Lors d'envisager de navigation réussi, par défaut, load. Étant donné un tableau de l'événement chaînes, la navigation est considéré comme un succès après tous les événements ont été licenciés. Les événements peuvent être:
    • load - envisager la navigation terminée lorsque l' load événement est déclenché.
    • domcontentloaded - envisager la navigation terminée lorsque l' DOMContentLoaded événement est déclenché.
    • networkidle0 - considère que la navigation se fini quand il n'y a pas plus de 0 connexions réseau pour au moins 500 de ms.
    • networkidle2 - considère que la navigation se fini quand il n'y a pas plus de 2 connexions réseau pour au moins 500 de ms.
• retourne: <Promesse<[?Réponse]>> Promesse qui décide de la principale ressource de réponse. Dans le cas de plusieurs redirections, la navigation résoudre avec la réponse de la dernière redirection. Dans le cas de la navigation à un autre ancre ou à la navigation en raison de l'Historique d'utilisation de l'API, la navigation résoudre avec l' null.

La lisibilité:

Vous pouvez utiliser page.waitForNavigation() à attendre une page pour naviguer:

await page.waitForNavigation();

Performance:

Mais depuis page.waitForNavigation() est un raccourci pour page.mainFrame().waitForNavigation(), on peut utiliser les éléments suivants pour un mineur, l'amélioration de la performance:

await page._frameManager._mainFrame.waitForNavigation();

Answer 4

Je sais que c'est un peu tard pour répondre à cette question. Il peut être utile pour ceux qui sont en dessous d'exception tout en faisant waitForNavigation.

(node:14531) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Délai d'attente Dépassé: 30000ms dépassé à la Promesse.puis (/home/utilisateur/nodejs/node_modules/marionnettiste/lib/LifecycleWatcher.js:142:21) au -- ASYNC -- au niveau de l'Image. (/home/utilisateur/nodejs/node_modules/marionnettiste/lib/helper.js:111:15) à la Page.waitForNavigation (/home/utilisateur/nodejs/node_modules/marionnettiste/lib/Page.js:649:49) à la Page. (/home/utilisateur/nodejs/node_modules/marionnettiste/lib/helper.js:112:23) dans /home/utilisateur/nodejs/utilisateur/marionnettiste/example7.js:14:12 au

Le bon code qui a fonctionné pour moi est comme ci-dessous.

await page.click('button[id=start]', {waitUntil: 'domcontentloaded'});

De même, si vous allez vers une nouvelle page, le code devrait ressembler à

await page.goto('here goes url', {waitUntil: 'domcontentloaded'});

Answer 5

 await Promise.all([
      page.click(selectors.submit),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);
 

Ce serait la première priorité à utiliser car il attend que tout le réseau se termine et suppose que cela est fait lorsque vous n'avez pas plus de 0 appel réseau pendant 500 ms.

vous pouvez aussi utiliser

 await page.waitForNavigation({ waitUntil: 'Load' }}
 

ou bien, vous pouvez utiliser

 await page.waitForResponse(response => response.ok())
 

cette fonction peut également être utilisée à divers endroits, car elle ne permet de continuer que lorsque tous les appels aboutissent, c’est-à-dire lorsque tout le statut de la réponse est correct, c’est-à-dire (200-299)