Using Puppeteer to choose a specific shoe size on StockX

Other Questions Puppeteer
1

Hey everyone, I’m working on a small project and I need some help. I’m trying to use Puppeteer to pick a specific shoe size on StockX. Right now I want to select size 11 but I’m running into issues.

The problem is that all the size buttons have the same class. I tried using the data-testid attribute but it’s not working. I’m pretty new to Puppeteer and Node.js so I’m a bit lost.

Here’s a simplified version of what I’ve tried:

const puppeteer = require('puppeteer')

async function pickSize() {
  const browser = await puppeteer.launch({headless: false})
  const page = await browser.newPage()
  await page.goto('https://stockx.com/some-shoe-page')
  await page.$eval('div[data-testid="size-11"]', elem => elem.click())
  await page.screenshot({path: 'result.png'})
  await browser.close()
}

pickSize()

But I keep getting an error saying it can’t find the element. Any ideas on how to fix this? Thanks!

2

As someone who’s worked extensively with Puppeteer for e-commerce scraping, I can tell you that StockX can be tricky. Their site uses React, which means elements are often re-rendered dynamically. Here’s what’s worked for me:

First, wait for the size container to load:

await page.waitForSelector(‘.size-options’, {visible: true});

Then, use page.evaluate to find and click the right size:

await page.evaluate(() => {
const sizes = document.querySelectorAll(‘.size-options button’);
const size11 = Array.from(sizes).find(s => s.textContent.trim() === ‘11’);
if (size11) size11.click();
});

This approach is more resilient to changes in class names or data attributes. Also, remember that some sizes might be out of stock, so add error handling for that scenario.

Lastly, StockX sometimes uses lazy loading, so you might need to scroll the page to trigger size option rendering. Hope this helps!

3

hey man, i’ve dealt with similar stuff before. stockx can be a pain. have you tried using page.evaluate()? it lets you run js directly in the page context. something like this might work:

await page.evaluate(() => {
const sizes = document.querySelectorAll(‘.size-button’);
const size11 = Array.from(sizes).find(s => s.innerText.includes(‘11’));
if (size11) size11.click();
});

give that a shot and lmk if it helps!

4

I’ve encountered similar issues when working with Puppeteer on dynamic sites like StockX. One approach that’s worked for me is using a combination of waitForSelector and evaluate. Here’s a snippet that might help:

await page.waitForSelector('button[data-testid^="size-"]', {visible: true});
await page.evaluate(() => {
  const sizeButtons = document.querySelectorAll('button[data-testid^="size-"]');
  const size11 = Array.from(sizeButtons).find(btn => btn.textContent.includes('11'));
  if (size11) size11.click();
});

This waits for any size button to be visible, then uses evaluate to find and click the size 11 button based on its text content. It’s more robust against changes in data attributes. Remember to add error handling for cases where the size isn’t available.