Extracting HTML Attribute Values with Puppeteer

Other Questions Puppeteer
1

Hey everyone, I’m trying to figure out how to get the values of HTML attributes using Puppeteer. I’ve got this code that selects some spans and prints their text:

const elements = await page.$$('span.productCode');
for (let element of elements) {
  const text = await element.evaluate(el => el.innerText);
  console.log(text);
}

This works fine for the text, but I also need to grab the value of a custom attribute called data-hue. My HTML looks like this:

<span class="productCode" data-hue="Navy">PC100</span>
<span class="productCode" data-hue="Olive">PC200</span>
<span class="productCode" data-hue="Crimson">PC300</span>

How can I modify my code to print out both the text and the data-hue attribute value for each span? I’ve tried a few things but can’t seem to get it right. Any help would be awesome!

2

I’ve encountered a similar challenge in my work with Puppeteer. Here’s an approach that’s worked well for me:

const elements = await page.$$('span.productCode');
for (let element of elements) {
  const result = await element.evaluate(el => ({
    text: el.textContent.trim(),
    hue: el.getAttribute('data-hue')
  }));
  console.log(`Product: ${result.text}, Color: ${result.hue}`);
}

This method combines attribute extraction with text content retrieval in a single evaluation, which can be more efficient. It also uses textContent instead of innerText, which might offer performance benefits in some scenarios. Be sure to handle potential null values for the attribute as needed.

3

hey there! i’ve got a quick tip for ya. you can grab both the text and attribute in one go like this:

const elements = await page.$$(‘span.productCode’);
for (let element of elements) {
const { innerText, dataset } = await element.evaluate(el => ({ innerText: el.innerText, dataset: el.dataset }));
console.log(${innerText}: ${dataset.hue});
}

this way you get everything in one swoop. hope it helps!

4

I’ve actually tackled this exact problem before in one of my projects. Here’s how I managed to extract both the text and the attribute value:

const elements = await page.$$('span.productCode');
for (let element of elements) {
  const data = await element.evaluate(el => ({
    text: el.innerText,
    hue: el.getAttribute('data-hue')
  }));
  console.log(`Code: ${data.text}, Hue: ${data.hue}`);
}

This approach uses the evaluate method to run a function in the context of the browser, allowing you to access both the innerText and the attribute value in a single call. It’s more efficient than making separate calls for each property.

One thing to watch out for: if any of your spans are missing the data-hue attribute, you might want to add a null check to avoid errors. Hope this helps!