How to catch timeout exceptions in Puppeteer when waiting for page elements

[John_Fast]

I’m working with Puppeteer and running into an issue when submitting form data. Here’s my current setup:

await browser.goto(targetUrl)
await browser.type('input[id="search-field"]', userInput)
await browser.click('input[type="submit"][value="Check Balance"]')

await browser.waitForSelector('.balance-display-container .result-wrapper').catch(error => console.log(error))

const balanceInfo = await browser.evaluate((inputValue) => {
    const resultElement = document.querySelector('.balance-display-container .result-wrapper .amount-text')
    return inputValue + " has balance: " + resultElement.textContent
}, userInput)

The problem happens when users enter invalid data. Valid inputs work fine and show the expected results. However, when the input is wrong, the page doesn’t navigate anywhere and the target element never loads. This causes Puppeteer to wait indefinitely until it hits the timeout limit and crashes my script with a “Navigation Timeout Exceeded” error.

I need a way to handle this timeout gracefully so I can run a different function when the element doesn’t appear within the expected timeframe. What’s the best approach to catch these timeout errors and continue script execution?

[emmad]

Use the timeout option in waitForSelector - set it to 8000ms instead of the default. When it times out, you’ll get a TimeoutError you can catch. I’ve done this for two years with sketchy web forms. After the timeout, check for error messages on the page using document.querySelector with selectors like ‘.error-message’ or ‘.validation-error’. Most forms show errors inline instead of redirecting. Throw in a quick URL check to make sure you’re still on the same page. This way you can tell the difference between real errors and slow loading, then handle both without breaking your workflow.

[Mandy_45Photography]

i faced similar issues too. using try/catch around waitForSelector is a good move. also, check for a loading spinner that disappears once the form’s done - it can save time compared to hunting for elements that may not show. try page.waitForFunction() to watch for page states instead.

[Harry47]

Hit this exact issue scraping financial data last year. Don’t just catch navigation errors - handle the timeout at the promise level instead. I wrap waitForSelector in Promise.race with a custom timeout. Create a timeout promise that rejects after however long you want, then race it against waitForSelector. When the timeout hits first, you get control back without everything crashing. I usually go 10-15 seconds for form submissions. Once you catch the timeout, check if there’s an error message on the same page rather than waiting forever for a redirect that’s not coming. This way you can tell the difference between real timeouts and validation errors that don’t trigger navigation.