Puppeteer how to specify a button if there are multiple buttons of that same class type?

  html, javascript, puppeteer

first things first I am completely new to HTML,CSS, Javascript, Puppeteer, etc… and I’ve been at this for a few days now. I’ve also searched the web and Stack Overflow for an answer, but have not been able to find anything. I’m trying to use Puppeteer to click on a button. Easy enough right? Here’s the wall I’ve run into that I haven’t been able to get over. The webpage in my script has a grid which acts as a calendar and each date is a button. The issue is that every date button is of the same class type and I so I couldn’t single out a specific date. So then I noticed how every date button had something called the aria label and how that was different for each date button. So I looked into it and learned about aria and more importantly I was able to get my script to click buttons on a different webpage using its aria identifier. Great, I thought. So when I went back to the Recreation website and tried to identify the buttons by the aria label it still wouldn’t work. I then tried to click the "Go Forward 5 Days" button using the aria label and that didn’t work either. I then dug through this button’s HTML tree (sorry if this is the wrong name again I’m new to this) and saw that it has a boolean value called aria hidden which I believe is telling my script to not read the aria label of the button. Except the date buttons in the calendar grid don’t have this variable. Needless to say I’m stuck. I realize this might be confusing in text, but the url is in my code sample and if you go there it’ll make perfect sense. Also just fyi I have read that it might be available by iterating through the parent element in the HTML tree and then just picking the one that I want (example: putting the calendar element into a variable and then choosing the child I want[7]), but this really isn’t ideal and I’m hoping there is another way. Thanks in advance for any help

const puppeteer = require ('puppeteer');

async function Main()
{
    const browser = await puppeteer.launch({product: 'chrome', headless: false});
    const page1 = await browser.newPage();
    const url1 = 'https://www.recreation.gov/camping/campgrounds/232446/availability';
    await page1.goto(url1);
    return page1;
}

async function selectDates(page){
    const button = await page.$('aria/Go Forward 5 Days[role="button"]');
    await button.click();
}

async function startCheckout()
{
    const page = await Main();
    await selectDates(page);
}

startCheckout();

Here’s the button in HTML if it helps any (I couldn’t get it to format correctly sorry for the missing characters):
button class="rec-availability-date" aria-label="Jun 10, 2021 – Not Available">X/button>

Source: Ask Javascript Questions

LEAVE A COMMENT