title: Puppeteer- How to .click() a single button out of a grid of buttons with same classname?
body: <p>I'm developing a Nike SNKRS BOT to buy shoes with Puppeteer and Node.js.</p>
  <p>I'm having issues to distinguish and <code>.click()</code> Size button <a href="https://i.stack.imgur.com/9N1Cr.png" rel="nofollow noreferrer">screenshot of html devtools and front end buttons</a></p>
  <p>That's my code: i'm not experienced so i have tried everything</p>
  <pre><code>const xpathButton = '//*
  [@id=&quot;root&quot;]/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'
  </code></pre>
  
  <pre><code>const puppeteer = require('puppeteer')
  const productUrl = 'https://www.nike.com/it/launch/t/air-max-97-coconut- 
  milk-black' 
  const idAcceptCookies = &quot;button[class='ncss-btn-primary-dark btn-lg']&quot;
  
  
  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 =&gt; elem.click());
  
  //this is where the issues begin
  //attempt 1
  await page.evaluate(() =&gt; document.getElementsByClassName('size-grid- 
  dropdown size-grid-button&quot;')[1].click());
  
  //attempt 2
  const sizeButton = &quot;button[class='size-grid-dropdown size-grid-button'] 
  button[name='42']&quot;;
  await page.waitForSelector(sizeButton);
  await page.click(sizeButton,elem =&gt; elem.click());
  }
  
  //attempt 3   
  await page.click(xpathButton)
  
  //attempt 4
  document.evaluate(&quot;//button[contains ( ., '36')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
  
  
  async function checkout(){
  var page = await givePage();
  await addToCart(page)
  }
  
  checkout()
  </code></pre>