title: Proper way to use page.waitForNavigation in Puppeteer
body: <p>I'm a bit confused about <code>page.waitForNavigation</code>. I know what it is and what it does but I get different results based on the interenet speed (that's what I think is the factor).</p>
  <p>Imagine this code:</p>
  <pre><code>await page.$eval('#username', (el , setting ) =&gt; el.value = setting.username , setting );
  await page.$eval('#password', (el , setting ) =&gt; el.value = setting.password , setting );
  await page.$eval('form', form =&gt; form.submit());
  await page.waitForNavigation();
  await page.goto( 'http://example.com/dashboard'  );
  </code></pre>
  <p>It fills the login form, submits the login form, waits for the form to be submited and then redirects to dashboard.</p>
  <p>This works fine on my localhost which has slower internet speed (compared to the server), but when I upload it to the server, I get</p>
  <pre class="lang-none prettyprint-override"><code>Error: Navigation Timeout Exceeded: 30000ms exceeded 
  </code></pre>
  <p>On the server it works fine if I remove <code>await page.waitForNavigation();</code> from the code and I get redirected to dashboard.</p>
  <p>But now on localhost, I get redirected to the dashboard before the form can be submitted. I get <code>you cant see dashboard , your not logged in</code> or something like this.</p>
  <p>I think the deciding factor is the speed of internet.</p>
  <p>On the server, I have a very high speed so the form gets instantly submitted and it's done before the <code>await page.waitForNavigation()</code> line so I get a nvigation timeout error.</p>
  <p>But on the localhost with the slower speed, the form needs more time to be submitted so I need to have <code>await page.waitForNavigation()</code> after submitting the form, otherwise I get redirected to the dashboard before the form has any chance to be submitted.</p>
  <p>I'm looking for advice from someone with more experience working with Puppeteer on how to handle this kind of situation. Right now, I keep editing my code when running on server or localhost, which works, but it's very  annoying!</p>
  <p>After using</p>
  <pre class="lang-js prettyprint-override"><code>async function open_tab(setting) {
    const page = await global_browser.newPage();
    await page.setViewport({
      width: 1000,
      height: 768
    });
  
    return await new Promise(async(resolve, reject) =&gt; {
        await page.$eval('#username', (el, setting) =&gt; el.value = setting.username, setting);
        await page.$eval('#password', (el, setting) =&gt; el.value = setting.password, setting);
        await Promise.all(
          page.$eval('form', form =&gt; form.submit()),
          page.waitForNavigation()
        )
        await page.goto('http://example.com/dashboard');
        resolve();
      }).then(() =&gt; {
        console.log(' -&gt; don!  ');
        page.close();
      })
      .catch(() =&gt; {
        console.log(' -&gt; somethign went wrong !');
        page.close();
      })
  }
  </code></pre>
  <p>I get</p>
  <pre class="lang-none prettyprint-override"><code>(node:14812) UnhandledPromiseRejectionWarning: TypeError: undefined is not a function
      at Function.all (&lt;anonymous&gt;)
      at Promise (D:\wamp\www\gatewayCard\robot\server.js:287:23)
      at &lt;anonymous&gt;
      at process._tickCallback (internal/process/next_tick.js:188:7)
  (node:14812) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
  (node:14812) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  </code></pre>