Get the Value of HTML Attributes Using Puppeteer

You can get attribute value with evaluate method.

await page.evaluate('document.querySelector("span.styleNumber").getAttribute("data-Color")')

Second way

$$eval method can also be used. Also attributes called as Array from variable

const attr = await page.$$eval("span.styleNumber", el => el.map(x => x.getAttribute("data-Color")));

Output will be

["Blue", "Green", "Red"]

Your solution

const styleNumbers = await page.$$("span.styleNumber");

for( let styleNumber of styleNumbers ) {
    const attr = await page.evaluate(el => el.getAttribute("data-Color"), styleNumber);
}