Puppeteer调用page.select无法选中下拉框选项，如何解决？

问题背景 #

使用Puppeteer自动获取Caeleb Dressel在美国游泳协会平台的所有成绩记录时，需要选中id为competitionYearId的下拉框中value="-1"的选项（查看所有年份成绩），但调用page.select()方法完全无效，此前的代码执行均正常。

用户原代码：

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto("https://data.usaswimming.org/datahub/usas/individualsearch");

    await page.waitForSelector("#firstOrPreferredName", { visible: true });
    await page.type("#firstOrPreferredName", "Caeleb");
    await page.type("#lastName", "Dressel");
    await page.click('button[type="submit"]');

    await page.waitForSelector("._ActionButton_8nq2x_59");
    await page.evaluate(() => {
        const buttons = document.querySelectorAll("._ActionButton_8nq2x_59._ActionIntraPage_8nq2x_159");
        if (buttons[0]) {
            buttons[0].click();
        }
    });
    await page.waitForSelector("#competitionYearId");
    await page.select("#competitionYearId", "-1");
})();

期望获取的JSON结构：

{
    "Event Name (Ex: 50 FR SCY)": {
        "Meet Name (Ex: 2018 NCAA DI - Men)": {
            "Time": "17.63",
            "Age": "21",
            "Points": "1138",
            "LSC": "FL",
            "Team": "Unattached",
            "Date": "03/22/18"
        }
    }
}

修复方案 #

原因分析 #

page.select()仅对原生HTML <select> 标签有效，但部分网站会对下拉框做自定义封装，或需要手动触发change事件才能让页面识别选择变化。针对USA Swimming的页面，大概率是需要手动触发事件，而非仅设置value。

具体修复代码 #

将原代码中的await page.select("#competitionYearId", "-1");替换为以下两种方式之一：

方式1：直接操作DOM并触发change事件

await page.evaluate(() => {
    const selectElement = document.getElementById("competitionYearId");
    // 设置目标value
    selectElement.value = "-1";
    // 手动触发change事件，确保页面响应选择变化
    selectElement.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));
});

方式2：模拟用户点击流程（适用于自定义下拉框场景）

如果方式1无效，说明下拉框是自定义组件，需要模拟点击展开选项后再选择目标项：

// 点击下拉框触发选项展开
await page.click("#competitionYearId");
// 等待目标选项加载可见
await page.waitForSelector("#competitionYearId option[value='-1']", { visible: true });
// 点击目标选项
await page.click("#competitionYearId option[value='-1']");

后续数据抓取提示 #

选中选项后，需要等待页面成绩数据加载完成（可通过等待成绩列表的选择器出现），再进行数据解析，最终整理成你期望的JSON结构。

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