How to handle redirected page after form submission in Puppeteer

Other Questions Puppeteer
1

I’m working with Puppeteer to test page performance and I’m running into an issue. When I submit a login form, the page redirects to a new URL but I can’t interact with elements on the redirected page.

Here’s what I’m trying to do:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const currentPage = await browser.newPage();
    await currentPage._client.send('Performance.enable');
    
    await currentPage.goto('https://example-site.com');
    
    await currentPage.focus('#loginForm input#email');
    await currentPage.type('[email protected]', {delay: 150});
    
    await currentPage.focus('#loginForm input#password');
    await currentPage.type('mypassword', {delay: 150});
    
    const submitForm = await currentPage.$('#loginForm');
    await submitForm.evaluate(form => form.submit());
    
    // This fails because page has changed
    await currentPage.click('.filter-toggle');
    
    await browser.close();
})();

After the form gets submitted, the browser navigates to a different page but my code can’t find elements on the new page. How do I get access to the page that loads after form submission? I need to interact with elements on the post login page.

2

Had the same issue with automated tests on our web app. Puppeteer keeps running while the redirect’s still happening in the background. Try page.waitForURL() instead of waitForNavigation() - you can target the specific URL pattern after login, which makes things way more reliable. Like await currentPage.waitForURL('**/dashboard**') after submitting the form. You’re waiting for the redirect to hit the right page, not just any random navigation. Also saw you’re using form.submit() - I’ve had better luck actually clicking the submit button instead of programmatic submission, especially when there’s JavaScript handling the form.

3

This happens because your script keeps running after form submission but before the new page loads. I hit the same issue building auth scrapers. Use Promise.all() to handle both the form submit and navigation at once: javascript await Promise.all([ currentPage.waitForNavigation(), submitForm.evaluate(form => form.submit()) ]); This starts the navigation promise before submitting the form, so you won’t get race conditions. Once it runs, currentPage will reference the redirected page content. Way more reliable than waiting sequentially, especially with slow servers or multiple redirects.

4

Yep, exactly! Just add await currentPage.waitForNavigation() after submitting the form. This ensures the new page loads before you try interacting with it. Your code should look like: await submitForm.evaluate(form => form.submit()); await currentPage.waitForNavigation();