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

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()

CodePudding user response：

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.

CodePudding user response：

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