Puppeteer- How to .click() a single button out of a grid of buttons with same classname?

Question

I'm developing a Nike SNKRS BOT to buy shoes with Puppeteer and Node.js.

I'm having issues to distinguish and .click() Size button screenshot of html devtools and front end buttons

That's my code: i'm not experienced so i have tried everything

const xpathButton = '//*
[@id="root"]/div/div/div[1]/div/div[1]/div[2]/div/section[1]/div[2]/aside/div/div[2]/div/ 
    div[2]/ul/li[1]/button'

const puppeteer = require('puppeteer')
const productUrl = 'https://www.nike.com/it/launch/t/air-max-97-coconut- 
milk-black' 
const idAcceptCookies = "button[class='ncss-btn-primary-dark btn-lg']"


async function givePage(){
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage();
return page;
}


async function addToCart(page){
await page.goto(urlProdotto);
await page.waitForSelector(idAcceptCookies);
await page.click(idAcceptCookies,elem => elem.click());

//this is where the issues begin
//attempt 1
await page.evaluate(() => document.getElementsByClassName('size-grid- 
dropdown size-grid-button"')[1].click());

//attempt 2
const sizeButton = "button[class='size-grid-dropdown size-grid-button'] 
button[name='42']";
await page.waitForSelector(sizeButton);
await page.click(sizeButton,elem => elem.click());
}

//attempt 3   
await page.click(xpathButton)

//attempt 4
document.evaluate("//button[contains ( ., '36')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue


async function checkout(){
var page = await givePage();
await addToCart(page)
}

checkout()

Answer 1

Attempt number 2 looks like the best approach, except your selector is wrong. The button does not have a name attribute, according to your screenshot, so you will need another approach, closer to attempt 3.

You can use puppeteer to select an element by with xpath, and xpath allows you to select by an element's text content.

Try this:

await page.waitForXPath('//button[contains(text(), "EU 36")]')
const [button] = await page.$x('//button[contains(text(), "EU 36")]')
await button.click()

Because the xpath selector is returning an array of element handles, I destructure the first element in the array (which should be the only match), and assign it a value of button. That element handle can now be clicked.