puppeteer-如何从具有同一className的按钮网格中单击单个按钮？

Question

我正在开发一个耐克SNKRS机器人，以购买木偶和node.js的鞋子。

我有区分的问题和.click（） size按钮 html的屏幕截图DevTools和前端按钮

这是我的代码：我没有经验

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

尝试2号看起来像是最好的方法，除了您的选择器是错误的。 按钮没有name属性，根据您的屏幕截图，因此您需要另一种方法，更接近尝试3

。 XPath，XPath允许您通过元素的文本内容选择。

尝试以下操作：

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

因为XPATH选择器正在返回元素手柄的数组，所以我会破坏数组中的第一个元素（应该是唯一的匹配），并为其分配一个按钮值。现在可以单击该元素句柄。