How to Click Anchor Element Using Puppeteer

Other Questions Puppeteer
1

I’m trying to interact with a hyperlink on a webpage using Puppeteer but running into issues. The HTML structure looks like this:

<div>The maximum result count of 500 has been exceeded.
  <a href="/api/results.do?expand">Click here to increase the result limit.</a>
</div>

My current approach involves applying some filters first, then navigating to the target page where I need to click the link. Here’s the code I’m using:

await Promise.all([
    browser.click('input#regionSW'), // apply filter
    browser.click('input[type=submit]'), // submit form
    browser.waitForNavigation(), // wait for page load
    browser.click('div a'), // trying to click the link - not working
    browser.waitForNavigation() // waiting for page refresh - fails
]).catch(error => console.log(error)); // no error shown

I’ve confirmed that browser.click('div a') should work because when I test document.querySelector("div a").click() in the browser console, it successfully reloads the page.

I also attempted to target the link using its href attribute with browser.click('a[href="/api/results.do?expand"]'), but this throws an error: No node found for selector: a[href="/api/results.do?expand"].

What’s the correct way to handle this situation?

2

This looks like a timing issue. Your Promise.all runs everything at once, but the page needs to fully load after navigation before that anchor element shows up. I’ve hit this same problem before - splitting the operations works way better:

await browser.click('input#regionSW');
await browser.click('input[type=submit]');
await browser.waitForNavigation();

// Wait for the specific element to appear
await browser.waitForSelector('div a');
await browser.click('div a');
await browser.waitForNavigation();

The magic here is waitForSelector - it makes sure that anchor element actually exists in the DOM before trying to click it. Elements sometimes take a beat to render even after navigation finishes, especially when JavaScript’s generating the content.

3

Your href selector’s probably failing because the element isn’t fully loaded yet. I’ve hit this before - the DOM loads but specific attributes aren’t queryable right away. Instead of matching href, try targeting the text content:

await browser.click('input#regionSW');
await browser.click('input[type=submit]');
await browser.waitForNavigation();

// Wait for element with specific text
await browser.waitForSelector('a:contains("Click here to increase")');
await browser.click('a:contains("Click here to increase")');
await browser.waitForNavigation();

Or wait for the exact href to load before clicking. Sometimes anchors get added to the DOM before their href attributes are set - that’s why your selector finds nothing even though the element’s there.

4

Try page.evaluate() to click it directly in the browser context. Puppeteer’s click method sometimes fails on certain elements, but JavaScript click usually works. Something like await page.evaluate(() => document.querySelector('div a').click()) should work since you’ve already tested it in console.