如何用Playwright在FIBA2023页面正确选择隐藏下拉选项？

问题核心 #

目标页面的select#type_select元素设置了display: none，直接使用Playwright的select_option方法会因为元素不可见超时失败，无法切换统计类型获取非默认数据。

解决方案 #

方法1：强制选择（绕过可见性检查） #

使用force=True参数跳过Playwright的可见性校验，直接操作隐藏的原生select元素：

try:
    page.locator('select#type_select').select_option(value='FG', timeout=60000, force=True)
    # 等待数据加载完成，示例：等待表格内容更新
    page.wait_for_selector('table.stats-table tbody tr', timeout=30000)
except Exception as exc:
    print(f'Unexpected exception: {repr(exc)}')

方法2：模拟真实用户交互（推荐） #

页面通常会有可见的自定义下拉触发按钮（替代原生select的UI），先点击触发按钮，再选择对应选项：

try:
    # 定位页面上的下拉触发按钮（需根据页面实际元素调整选择器）
    dropdown_trigger = page.locator('div.dropdown-toggle').get_by_text('Stats Type')
    dropdown_trigger.click()
    # 选择目标统计类型，比如"Field Goal Shooting"
    page.get_by_text('Field Goal Shooting').click()
    # 等待数据加载
    page.wait_for_load_state('networkidle')
except Exception as exc:
    print(f'Unexpected exception: {repr(exc)}')

方法3：直接通过JS修改DOM并触发事件 #

使用evaluate直接在浏览器上下文修改select值并触发change事件，强制页面加载对应数据：

try:
    # 修改select值并触发change事件
    page.evaluate("""
        const selectEl = document.getElementById('type_select');
        selectEl.value = 'FG';
        selectEl.dispatchEvent(new Event('change', { bubbles: true }));
    """)
    # 等待数据更新
    page.wait_for_selector('table.stats-table', state='attached')
except Exception as exc:
    print(f'Unexpected exception: {repr(exc)}')

注意事项 #

• 操作后必须等待数据加载完成，可通过wait_for_selector、wait_for_load_state或监听网络请求实现。
• 若使用方法2，需根据页面实际DOM结构调整触发按钮和选项的选择器（可通过浏览器开发者工具定位）。

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