Can I retrieve a CSS Selector from a specific node using Puppeteer?

Other Questions Puppeteer
1

I’m dealing with a straightforward situation where I need to traverse a table of elements, click on each item, and input a value. In a typical browser setup, you can utilize QuerySelector on the document or any node. For example:

const rows = document.querySelectorAll('.rows');

Then, to interact with elements within each row, you can do:

rows.forEach(item => { 
    item.querySelector('.item_1').click();
    item.querySelector('.item_2').click();
    item.querySelector('.item_3').click();
});

In my case, the JavaScript click method isn’t functioning properly, and I need to simulate a mouse click. In Puppeteer, I understand that you should use the page.click() method, but Page isn’t accessible in the browser environment like within page.evaluate() or $$eval().

While I can retrieve elements similarly using const rows = page.$$('.rows');, I’m uncertain how to loop through these to target second-level elements from the node as the reference for the next selection. Is it achievable in Puppeteer’s context? You can’t directly use:

page.click('.item_1');

since that would select the first row’s item. I wish to perform a CSS query in a manner akin to:

rows.forEach((item, page) => { 
    page.click(item.querySelector('.item_1'));
    ...
}, page);

Is this feasible? If yes, what would the correct syntax look like? Most responses I found revolve around using the JavaScript Click function rather than Puppeteer’s specific click functionality.

2

You can achieve this using Puppeteer’s evaluate combined with node-specific operations. Here’s a straightforward solution:

const rows = await page.$$('.rows');

for (const row of rows) {
  await row.$eval('.item_1', item => item.click());
  await row.$eval('.item_2', item => item.click());
  await row.$eval('.item_3', item => item.click());
}

This code selects all elements with the class .rows, then iterates over these elements. For each row, it targets and clicks the specified items using .$eval to interact with each element directly.

3

Yes, you can definitely achieve this using Puppeteer, and it requires employing page.$$() and elementHandle.$eval() for precise interactions with node-specific elements. Here’s a streamlined approach to accomplish your task efficiently:

const rows = await page.$$('.rows');

for (const row of rows) {
  await row.$eval('.item_1', item => item.click());
  await row.$eval('.item_2', item => item.click());
  await row.$eval('.item_3', item => item.click());
}

Here’s how it works:

  • Select Elements: Use await page.$$('.rows') to grab all elements matching the class .rows.
  • Iterate Efficiently: Loop through each element using a for...of loop to handle promise resolutions neatly.
  • Direct Element Interaction: For each node, .$eval() lets you perform actions directly on second-level elements, simulating a real mouse click.

This practical method ensures you click on specific child elements within each .row element, maintaining accuracy and optimized performance, akin to native browser interactions!

4

You can achieve the desired behavior with Puppeteer using page.$$() and elementHandle.$eval(). Here's a concise example:

const rows = await page.$$('.rows');

for (const row of rows) {
  await row.$eval('.item_1', item => item.click());
  await row.$eval('.item_2', item => item.click());
  await row.$eval('.item_3', item => item.click());
}

This code grabs all elements with the class .rows, iterates over them, and uses .$eval() to click on specified child elements, enabling precise interaction with nested nodes.