I'm a bit confused about page.waitForNavigation. 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).
Imagine this code:
await page.$eval('#username', (el , setting ) => el.value = setting.username , setting );
await page.$eval('#password', (el , setting ) => el.value = setting.password , setting );
await page.$eval('form', form => form.submit());
await page.waitForNavigation();
await page.goto( 'http://example.com/dashboard' );
It fills the login form, submits the login form, waits for the form to be submited and then redirects to dashboard.
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
Error: Navigation Timeout Exceeded: 30000ms exceeded
On the server it works fine if I remove await page.waitForNavigation(); from the code and I get redirected to dashboard.
But now on localhost, I get redirected to the dashboard before the form can be submitted. I get you cant see dashboard , your not logged in or something like this.
I think the deciding factor is the speed of internet.
On the server, I have a very high speed so the form gets instantly submitted and it's done before the await page.waitForNavigation() line so I get a nvigation timeout error.
But on the localhost with the slower speed, the form needs more time to be submitted so I need to have await page.waitForNavigation() after submitting the form, otherwise I get redirected to the dashboard before the form has any chance to be submitted.
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!
After using
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) => {
await page.$eval('#username', (el, setting) => el.value = setting.username, setting);
await page.$eval('#password', (el, setting) => el.value = setting.password, setting);
await Promise.all(
page.$eval('form', form => form.submit()),
page.waitForNavigation()
)
await page.goto('http://example.com/dashboard');
resolve();
}).then(() => {
console.log(' -> don! ');
page.close();
})
.catch(() => {
console.log(' -> somethign went wrong !');
page.close();
})
}
I get
(node:14812) UnhandledPromiseRejectionWarning: TypeError: undefined is not a function
at Function.all (<anonymous>)
at Promise (D:wampwwwgatewayCardrobotserver.js:287:23)
at <anonymous>
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.
