Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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()
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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:

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.

about 4 years ago · Juan Pablo Isaza Report

0

I would recommend u use the chrome Recorder dev tools to make the script, it will write the script for you and help with the selectors.

then and export it, check out the video on how to use

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!