I'm looking to get the list of songs on a web page under a particular genre. In my code, I'm using puppeteer to select a filter option which should change the data held in the elements where the list of songs appear. Upon running my code, the webpage displays the newly selected genre but doesn't update the list of songs. I tried page.reload() but that took me back to the default webpage before clicking the filters.

EDIT: To provide more detail, I'm trying to scrape genius.com to get a list of all rap songs. I've created a work around which uses threading but it only works sometimes and I've tried rearranging the code a few times but nothing seems to have worked.

console.log("Rap songs");
    const filter = await page.$$(
      ".SquareManySelects__Option-sc-1kktot3-5.eLlkRP"
    );

    
    for (let i = 0; i < filter.length; i++) {
      const name = await filter[i].$eval(
        ".SquareSelectOption__Container-h4rr3o-0.gMvRPT",
        (v) => v.textContent
      );

      if (name == "Rap") {
        console.log({
          name,
        });

        // ***************** WORIKING WITH THREADING ERROR *********************
        await Promise.all([
          page.waitForSelector(
            ".SquareSelectOption__Container-h4rr3o-0.gMvRPT"
          ),
          filter[i].click(),
        ]);

        // ***************** WORIKING WITH THREADING ERROR *********************
        break;
      }
    }
    await page.waitForTimeout(3000);

    //  TESTING
    const reviewElements = await page.$$(
      ".ChartSongdesktop__CoverAndTitle-sc-18658hh-0.jzapEV"
    );

    for (let i = 0; i < reviewElements.length; i++) {
      const name = await reviewElements[i].$eval(
        ".ChartSongdesktop__Title-sc-18658hh-3.fODYHn",
        (v) => v.textContent
      );

      console.log({
        name,
      });
    }
    console.log("Done");
  },