如何让Puppeteer仅点击带有指定status属性的可用座位？

问题分析 #

你的原代码存在两个核心问题：

1. 硬编码选择固定位置的座位，未筛选data-status="available"的可用状态；
2. page.click的写法错误，末尾的elem => elem.click()属于无效代码，不会执行。

解决方案 #

通过CSS选择器筛选可用座位，再限制点击数量，以下是修正后的代码：

// 等待页面加载出至少一个可用座位
await page.waitForSelector('#arena div[data-status="available"]');

// 获取所有标记为可用的座位元素
const availableSeats = await page.$$('#arena div[data-status="available"]');

// 选择前4个可用座位（如需3个则改为slice(0, 3)）
const targetSeats = availableSeats.slice(0, 4);

// 逐个点击座位，保留延迟处理弹窗
for (const seat of targetSeats) {
    await seat.click();
    await delay(10); // 后续可替换为弹窗确认逻辑，比如page.waitForDialog()
}

代码说明 #

• page.$$('#arena div[data-status="available"]')：批量获取所有符合可用状态的座位元素，替代硬编码的nth-child选择器，适配动态变化的座位列表；
• slice(0, 4)：精准控制点击数量，避免误点全部可用座位；
• 循环逐个点击：配合延迟（或弹窗处理逻辑），避免因弹窗阻塞导致后续点击失效。

弹窗处理优化（可选） #

如果后续需要自动确认弹窗，可将delay(10)替换为弹窗捕获逻辑：

const dialogPromise = page.waitForDialog();
await seat.click();
const dialog = await dialogPromise;
await dialog.accept(); // 自动确认弹窗

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