I'm encountering some confusion with the page.waitForNavigation function. Although I understand its purpose and functionality, I seem to get varying results based on internet speed (which I suspect is a contributing factor).
Consider this code snippet:
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' );
This piece of code fills out a login form, submits it, waits for the submission to complete, and then redirects to the dashboard.
Interestingly, this functions smoothly on my localhost, which has slower internet connectivity compared to the server. However, when deployed on the server, I encounter the following error:
Error: Navigation Timeout Exceeded: 30000ms exceeded
On the server, removing the line await page.waitForNavigation(); allows the redirection to the dashboard without issues.
Conversely, on localhost, removing await page.waitForNavigation(); leads to premature redirection to the dashboard before the form submission is completed, resulting in a message like "you can't view the dashboard, you are not logged in."
My assumption is that internet speed plays a crucial role in this behavior.
With high-speed connectivity on the server, the form submission occurs instantly, surpassing the await page.waitForNavigation() line and triggering a navigation timeout error.
In contrast, on localhost with slower speed, the form requires more time to submit, necessitating the presence of await page.waitForNavigation() after the submission to prevent premature redirection to the dashboard.
I seek guidance from experienced individuals working with Puppeteer on how to address such scenarios. Currently, I am constantly modifying my code for server or localhost execution, which proves effective but cumbersome!
When implementing the following function:
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(' -> done! ');
page.close();
})
.catch(() => {
console.log(' -> something went wrong!');
page.close();
})
}
The encountered issue reads as:
(node:14812) UnhandledPromiseRejectionWarning: TypeError: undefined is not a function
at Function.all (<anonymous>)
at Promise (D:\wamp\www\gatewayCard\robot\server.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.