web-dev-qa-db-fra.com

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

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?

javascriptpuppeteer
43
redochka

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.

40
Md. Abu Taher
await page.waitForNavigation();
31
redochka

Selon le documentation officielle , vous devez utiliser:

page.waitForNavigation (options)

  • options < Object > Paramètres de navigation qui pourraient avoir les propriétés suivantes:
    • timeout < nombre > Durée maximale de navigation en millisecondes, valeur par défaut de 30 secondes, passez 0 pour désactiver le délai. La valeur par défaut peut être modifiée à l'aide de la méthode page.setDefaultNavigationTimeout (timeout) .
    • waitUntil < chaîne | Tablea < chaîne >> Quand la navigation a-t-elle été envisagée? Par défaut, load. Étant donné un tableau de chaînes d'événements, la navigation est considérée comme réussie une fois que tous les événements ont été déclenchés. Les événements peuvent être:
      • load - considère que la navigation est terminée lorsque l'événement load est déclenché.
      • domcontentloaded - considère que la navigation est terminée lorsque l'événement DOMContentLoaded est déclenché.
      • networkidle0 - considère que la navigation est terminée lorsqu'il n'y a pas plus de 0 connexions réseau pour au moins 500 ms.
      • networkidle2 - considère que la navigation est terminée lorsqu'il n'y a pas plus de 2 connexions réseau pour au moins 500 ms.
  • renvoie: < Promise <[? Response] >> Promise qui résout la réponse à la ressource principale. En cas de redirections multiples, la navigation sera résolue avec la réponse de la dernière redirection. En cas de navigation vers une ancre différente ou de navigation en raison de l'utilisation de l'historique API, la navigation sera résolue avec null.

Lisibilité:

Vous pouvez utiliser page.waitForNavigation() pour attendre qu'une page navigue:

await page.waitForNavigation();

Performance:

Mais comme page.waitForNavigation() est un raccourci pour page.mainFrame().waitForNavigation(), nous pouvons utiliser les éléments suivants pour améliorer légèrement les performances:

await page._frameManager._mainFrame.waitForNavigation();
16
Grant Miller

Je sais qu'il est un peu tard pour répondre à cette question. Cela peut être utile pour ceux qui obtiennent une exception en faisant exception waitForNavigation.

(noeud: 14531) UnhandledPromiseRejectionWarning: TimeoutError: Délai d'attente de navigation dépassé: 30000ms dépassés à Promise.then (/home/user/nodejs/node_modules/puppeteer/lib/LifecycleWatcher.js:142:21) sur - Frame. (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:111:15) sur Page.waitForNavigation (/home/user/nodejs/node_modules/puppeteer/lib/Page.js:649:49) sur Page . (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:112:23) sur /home/user/nodejs/user/puppeteer/example7.js:14:12 sur

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

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

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

await page.goto('here goes url', {waitUntil: 'domcontentloaded'});
2
Austin
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.-à-d. (200-299)

0
Denish S.