如何用Puppeteer在StockX上选择11码？报错问题排查

核心问题分析 #

你的代码存在三个关键问题：

• CSS选择器语法错误，缺少闭合符号
• checkout函数中未正确获取page实例
• 未等待目标元素加载完成就执行操作

修正后的完整代码 #

const pt = require('puppeteer')

const url = 'https://stockx.com/buy/air-jordan-1-retro-high-og-chicago-reimagined-lost-and-found'

async function initBrowser(){
    const browser = await pt.launch({headless: false, defaultViewport: null, slowMo: 10});
    const page = await browser.newPage();
    await page.goto(url, {waitUntil: 'networkidle0'});
    return { browser, page };
}

async function selectSize(page){
    // 等待目标元素加载完成，避免因渲染延迟找不到元素
    await page.waitForSelector("div[data-testid='size-11']", { timeout: 10000 });
    await page.$eval("div[data-testid='size-11']", el => el.click());
}

async function checkout(){
    const { page, browser } = await initBrowser();
    await selectSize(page);
    await page.setViewport({width: 1920, height: 1080});
    await page.screenshot({path: 'test.png'});
    // 可选：操作完成后关闭浏览器
    // await browser.close();
}

checkout();

关键修正点说明 #

1. 修复选择器语法：将div[data-testid='size-11'补全为div[data-testid='size-11']，补上闭合的引号和方括号，匹配HTML中正确的元素属性
2. 传递page实例：调整initBrowser返回browser和page对象，让checkout函数能获取到页面实例并传递给selectSize，解决变量未定义问题
3. 添加元素等待逻辑：使用page.waitForSelector确保尺码按钮渲染完成后再执行点击，设置10秒超时可根据网络情况调整
4. 优化浏览器实例：只初始化一次浏览器，避免重复创建实例造成资源浪费

内容的提问来源于stack exchange，提问作者L0rdLi4m