Ruby Selenium WebDriver：无法操作自定义下拉框并选择选项

针对这种非标准<select>标签的自定义下拉框，需要模拟人工操作流程来完成选择：

步骤1：点击打开下拉框 #

先定位下拉框的触发区域并点击，让选项列表展开：

# 定位下拉框容器并点击
dropdown_container = driver.find_element(:css, '.sk-select')
dropdown_container.click

或者精准定位到显示提示文本的区域：

# 点击"Select a language"区域触发展开
dropdown_trigger = driver.find_element(:css, '.sk-select__value')
dropdown_trigger.click

步骤2：等待下拉列表加载完成 #

为避免元素未渲染就执行操作，用显式等待确保选项列表已显示：

require 'selenium-webdriver'

wait = Selenium::WebDriver::Wait.new(timeout: 10)
# 等待下拉列表ul元素出现并可见
wait.until { driver.find_element(:css, '.sk-select__list').displayed? }

步骤3：定位并选择目标选项 #

根据选项文本定位对应的<li>元素并点击，比如选择"Afrikaans"：

# 通过精准文本定位选项
target_option = driver.find_element(:css, '.sk-select__list-item.js-list-item', text: 'Afrikaans')
target_option.click

如果需要模糊匹配文本，可使用XPath：

target_option = driver.find_element(:xpath, "//li[contains(@class, 'sk-select__list-item') and contains(text(), 'Afrikaans')]")
target_option.click

完整代码示例 #

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
wait = Selenium::WebDriver::Wait.new(timeout: 10)

# 打开目标页面
driver.get('你的目标页面URL')

# 1. 触发下拉框展开
dropdown_trigger = wait.until { driver.find_element(:css, '.sk-select__value') }
dropdown_trigger.click

# 2. 等待选项列表加载
wait.until { driver.find_element(:css, '.sk-select__list').displayed? }

# 3. 选择目标选项
target_option = wait.until { driver.find_element(:css, '.sk-select__list-item.js-list-item', text: 'Afrikaans') }
target_option.click

# 后续操作...
driver.quit

额外技巧 #

如果下拉框支持输入过滤，可直接在输入框中键入文本缩小选项范围，再选择：

input_field = driver.find_element(:css, '.sk-select__typing-input')
input_field.send_keys('Afrikaans')
# 等待过滤后的选项出现并点击
filtered_option = wait.until { driver.find_element(:css, '.sk-select__list-item.js-list-item', text: 'Afrikaans') }
filtered_option.click

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