如何使用Puppeteer选择antd Select（非原生选择器）中的选项？

阿华AIGC实验室

2026-5-27

解决Puppeteer与antd Select组件的兼容问题

我完全懂你的困扰！antd的Select组件确实没有采用原生的<select>标签，而是用一堆自定义的div、span元素模拟下拉行为，所以你直接通过#select-whale-type-dropdown找元素肯定会超时——这个id其实是加在antd Select的外层容器上，而不是可点击的触发元素。下面给你一套靠谱的解决方案：

核心思路

antd Select的交互分为两步：先点击触发按钮展开下拉面板，再点击面板里的目标选项。我们需要分别定位这两个元素。

具体实现步骤

定位并点击Select触发按钮
antd会给Select的触发区域加上ant-select-selector类，你可以通过外层id关联这个类来定位：

// 等待触发按钮加载完成并可见
await page.waitForSelector('#select-whale-type-dropdown .ant-select-selector', { timeout: 30000 });
// 点击触发下拉面板
await page.click('#select-whale-type-dropdown .ant-select-selector');

定位并点击目标选项
下拉面板展开后，每个选项都带有ant-select-item类，而且会绑定data-value属性对应选项值，你可以直接通过这个属性定位：

// 等待下拉面板中的目标选项出现
await page.waitForSelector('.ant-select-dropdown .ant-select-item[data-value="Humpback Whale"]', { timeout: 30000 });
// 点击选中该选项
await page.click('.ant-select-dropdown .ant-select-item[data-value="Humpback Whale"]');

备选方案：通过文本内容定位选项

如果选项的data-value不好获取，也可以用XPath通过文本内容定位：

// 等待目标选项出现
await page.waitForXPath('//div[contains(@class, "ant-select-item") and normalize-space(text())="Humpback Whale"]');
// 获取该元素并点击
const [targetOption] = await page.$x('//div[contains(@class, "ant-select-item") and normalize-space(text())="Humpback Whale"]');
await targetOption.click();

注意事项

如果你用的是antd的带搜索功能的Select（就是你代码里的showSearch），可以先在输入框中输入关键词缩小范围，再选选项：

// 先在搜索框输入文本
await page.type('#select-whale-type-dropdown .ant-select-selection-search-input', 'Humpback');
// 再点击选项
await page.waitForSelector('.ant-select-dropdown .ant-select-item[data-value="Humpback Whale"]');
await page.click('.ant-select-dropdown .ant-select-item[data-value="Humpback Whale"]');