How to target specific HTML elements for clicking in Puppeteer automation?

Other Questions Puppeteer
1

I’m trying to automate a web scraping task and need to click on a specific link element that will take me to a documentation section. My current selector approach isn’t working properly and I’m getting errors.

Here’s what I’ve been working with:

const puppeteer = require('puppeteer');
const targetURL = process.argv[2];
if (!targetURL) {
    throw "URL argument is required";
}

async function startAutomation() {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        slowMo: 15,
        args: ['--start-maximized', '--disable-notifications']
    });
    const newPage = await browser.newPage();
    await newPage.goto(targetURL);

    await newPage.waitForSelector(".main-nav .menu-container .nav-item-3 a", {
        visible: true
    });
    await newPage.click(".main-nav .menu-container .nav-item-3 a");

    await newPage.waitForSelector(".header-section .button-group", {
        visible: true
    });
    const buttons = await newPage.$$('.header-section .button-group a');
    await buttons[0].click();

    await newPage.waitForSelector(".data-table", {
        visible: true
    });
    const targetElement = await newPage.$$('.data-table')[0].$$('tbody')[0].$$('tr')[0].$$('td')[0].$$('p')[1];
    await targetElement.click();

    await newPage.pdf({path: 'output.pdf', format: "A4"});

    console.log("Process completed");
    browser.close();
}
startAutomation();

The problematic line is const targetElement = await newPage.$$('.data-table')[0].$$('tbody')[0].$$('tr')[0].$$('td')[0].$$('p')[1]; - what’s the correct way to chain these selectors to reach the nested paragraph element I need to click?

2

Use page.$eval() - it selects and interacts with elements in one step. Try await newPage.$eval('.data-table tbody tr td p:nth-child(2)', el => el.click()). Way cleaner than chaining selectors and runs the DOM manipulation directly in the browser.

3

Your chained selector isn’t working because you’re mixing $$ (which returns arrays) with array indexing incorrectly. You can’t chain another $$ call directly on an array element like that. Just use a straightforward CSS selector instead. Replace that line with: const targetElement = await newPage.$('.data-table tbody tr:first-child td:first-child p:nth-child(2)'); await targetElement.click();. This hits the second paragraph in the first cell of the first row with one selector. It’s cleaner than chaining multiple $$ calls. The :nth-child(2) grabs the second paragraph, similar to your [1] index. If you need more flexibility, consider using XPath selectors with newPage.$x() as they are better for complex DOM structures.

4

The problem is that $$ returns a promise with an array of elements, but you’re trying to call $$ on the array items instead of actual DOM elements. I’ve hit this same issue scraping complex tables. Skip the chained $$ calls and use evaluate() to grab the element directly in the page context: javascript const targetElement = await newPage.evaluate(() => { const table = document.querySelector('.data-table'); const firstRow = table.querySelector('tbody tr:first-child'); const firstCell = firstRow.querySelector('td:first-child'); return firstCell.querySelector('p:nth-child(2)'); }); Handle the click separately after that. You could also use waitForFunction() to make sure the element exists before clicking. This approach gives you way more control over DOM traversal and works better than trying to chain complex selectors.