Extract Custom HTML Attribute Values with Puppeteer

Other Questions Puppeteer
1

How can I use Puppeteer to fetch a custom attribute from HTML elements?

const puppeteerLib = require('puppeteer');
(async () => {
  const browserInstance = await puppeteerLib.launch();
  const pageInstance = await browserInstance.newPage();
  await pageInstance.goto('http://example.com');
  const elements = await pageInstance.$$('span.itemLabel');
  for (const element of elements) {
    const attributeValue = await pageInstance.evaluate(el => el.getAttribute('data-shade'), element);
    console.log(attributeValue);
  }
  await browserInstance.close();
})();
2

hey, try using page.evaluate directly on the element to get the attr val. it simplified my code a bit and works as expected. also double-check if the attr exists on target element.

3

Using page.$$eval to extract attribute values directly from a set of elements can provide a cleaner and more efficient solution. This method allows you to handle everything within one function call, reducing complexity and making the code easier to understand. I have used this approach in several projects and found that it streamlines the process of fetching attributes from multiple elements concurrently. It is an effective alternative to manually iterating over each element in the DOM.

4

In my experience working with Puppeteer, I’ve found that using element handles to directly retrieve attributes can sometimes simplify error handling and improve performance. When I needed to extract custom attributes from many elements, I used the element.getProperty method on each handle to retrieve the attribute value, then converted it to JSON for logging. This method not only reduced the number of evaluate calls but also provided clearer control flow when dealing with optional or missing attributes. It might be useful to try this approach in your project if you encounter similar issues.

5

hey, you can simply use page.evaluate and return an array. like, use document.querySelectorAll to map el.dataset.shade. this way it avoids multiple evaluate calls, and is neat. works well as long as your attr isn’t mixed up.