I'm new to scraping. I'm trying to scrape the individual song links and stuff at this page https://www.ultimate-guitar.com/search.php?search_type=title&value=jimi%20hendrix%20little%20wing

There are many <div class = '_3uKbA'> elements and each one holds data for that particular song / version of the song. I can get these just fine. The issue comes from attempting to return the class names of the element which holds the star rating.

1. The star rating element should return 5 class names, each one representing a blank star, a half star, or a full star UNLESS #2 happens.

The code below seems to only return one class name, and sometimes two, but never all 5 classes which is what I need to determine the rating (curse UG for not having a number on there...)

2. The song has no star rating

(I think) With the way I'm looping, if the main div does not contain the star rating element, it searches the next available element. I want it to return something else instead if the particular main div doesn't have the star rating element.

Ideally, I'm looping through each individual main div and getting class names if it exists, and something else if it doesn't.

This is as close as I've been able to get and can't seem to come up with anything else.

const mainDiv = await page.$$('div._3uKbA');
const mainDivLength = await page.$$eval('div._3uKbA', el => el.length);
const divObj = [];
        
  for (let i = 3; i < mainDivLength; i++) {
    const divData = {
      name: await page.evaluate(el => el.textContent, (await page.$$('div._3uKbA a._3DU-x'))[i]),
      link: await page.evaluate(el => el.href, (await page.$$('div._3uKbA a._3DU-x'))[i]),
      stars: await page.evaluate(el => el.className, (await page.$$('div._3uKbA div._1cxy0 span'))[i]),
    }
    divObj.push(divData);
  }
    console.log(divObj);