Puppeteer-如何從具有相同類名的按鈕網格中單擊（）單個按鈕？

Question

我正在開發一個 Nike SNKRS BOT，用 Puppeteer 和 Node.js 購買鞋子。

我在區分和.click() 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 看起來是最好的方法，除了您的選擇器錯誤。 根據您的屏幕截圖，該button沒有name屬性，因此您將需要另一種方法，更接近嘗試 3。

您可以使用 puppeteer 通過xpath選擇元素，而xpath允許您通過元素的文本內容進行選擇。

嘗試這個：

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

因為 xpath 選擇器返回一個元素句柄數組，所以我解構了數組中的第一個元素（它應該是唯一的匹配項），並為其分配一個 button 值。 現在可以單擊該元素句柄。