如何用Selenium+Python获取路由器配置页自定义下拉框选中项？

首次使用Selenium & Python爬取Wi-Fi路由器配置页面时，遇到一个自定义下拉框（combobox），无法确定其中两个选项当前哪个被选中。注：该下拉框实际已显示选中值，并非默认的“- Please Select -”。

页面HTML代码 #

<div widget="combobox" id="mode-2g" data-bind="{wireless24g.hwmode}" data-options="{hwmode2gStore}" label-field="{WIRELESS_SETTINGS.MODE}" class="container widget-container combobox-container single">
  <div class="widget-fieldlabel-wrap ">
    <div class="widget-fieldlabel-inner">
      <label class="widget-fieldlabel combobox-fieldlabel">Mode</label>
      <span class="widget-separator">:</span>
    </div>
  </div>
  <div class="widget-wrap-outer combobox-wrap-outer">
    <div class="widget-wrap combobox-wrap">
      <span class="text-wrap-before"></span>
      <span class="combobox-wrap-inner">
        <input class="combobox-text " type="text" tabindex="-1" readonly="true" value="- Please Select -" />
      </span>
      <a class="combobox-switch" tabindex="undefined">
        <span class="icon"></span>
      </a>
      <div class="hidden combobox-lists">
        <li class="combobox-list   ">
          <label for="mode-2g-option-3d1b9417-b134-b2f9-fa50-403b6ad75870" type="single" class="combobox-label single">
            <input id="mode-2g-option-3d1b9417-b134-b2f9-fa50-403b6ad75870" name="" display="802.11b/g/n/ax mixed" class="combobox-checkbox" type="checkbox" data-index="0" />
            <span class="icon"></span>
            <span class="text">802.11b/g/n/ax mixed</span>
          </label>
        </li>
        <li class="combobox-list   ">
          <label for="mode-2g-option-be4d3df3-0134-b2f9-fa50-408a1a75e27d" type="single" class="combobox-label single">
            <input id="mode-2g-option-be4d3df3-0134-b2f9-fa50-408a1a75e27d" name="" display="802.11b/g/n/ax/be mixed" class="combobox-checkbox" type="checkbox" data-index="1" />
            <span class="icon"></span>
            <span class="text">802.11b/g/n/ax/be mixed</span>
          </label>
        </li>
      </div>
      <span class="text-wrap-after"></span>
    </div>
  </div>
</div>

尝试过的代码 #

ele = self.webdriver.driver.find_element_by_xpath('//*[@data-bind="{wireless24g.hwmode}"]')
print(ele.get_attribute("outerHTML"))
items = ele.find_elements_by_class_name("combobox-list")
for item in items:
    print(item.get_attribute("class"), item.is_selected())
items = ele.find_elements_by_class_name("combobox-checkbox")
for item in items:
    print(item.get_attribute("class"), item.is_selected())

输出结果 #

<div widget="combobox" id="mode-2g" data-bind="{wireless24g.hwmode}" data-options="{hwmode2gStore}" label-field="{WIRELESS_SETTINGS.MODE}" class="container widget-container combobox-container single"><div class="widget-fieldlabel-wrap "><div class="widget-fieldlabel-inner"><label class="widget-fieldlabel combobox-fieldlabel">Mode</label><span class="widget-separator">:</span></div></div><div class="widget-wrap-outer combobox-wrap-outer"><div class="widget-wrap combobox-wrap"><span class="text-wrap-before"></span><span class="combobox-wrap-inner"><input class="combobox-text " type="text" tabindex="-1" readonly="true" value="- Please Select -"></span><a class="combobox-switch" tabindex="undefined"><span class="icon"></span></a><div class="hidden combobox-lists"><li class="combobox-list   "><label for="mode-2g-option-33923a49-d134-b2f9-1048-786edd639f99" type="single" class="combobox-label single"><input id="mode-2g-option-33923a49-d134-b2f9-1048-786edd639f99" name="" display="802.11b/g/n/ax mixed" class="combobox-checkbox" type="checkbox" data-index="0"><span class="icon"></span><span class="text">802.11b/g/n/ax mixed</span></label></li><li class="combobox-list   "><label for="mode-2g-option-ee4ceb5e-a134-b2f9-1048-786f7be50e7a" type="single" class="combobox-label single"><input id="mode-2g-option-ee4ceb5e-a134-b2f9-1048-786f7be50e7a" name="" display="802.11b/g/n/ax/be mixed" class="combobox-checkbox" type="checkbox" data-index="1"><span class="icon"></span><span class="text">802.11b/g/n/ax/be mixed</span></label></li></div><span class="text-wrap-after"></span></div><div widget="errortip" error-cls="" id="mode-2g_errortip" class="combobox-error-tips widget-error-tips" style="display: none;"><span class="widget-error-tips-delta"></span><div class="widget-error-tips-wrap"><span class="widget-error-tips-delta"></span><div class="content error-tips-content"></div></div></div><div class="widget-tips combobox-tips " style="display: none;"><div class="content tips-content"></div></div></div></div>

combobox-list    False
combobox-list    False
combobox-checkbox False
combobox-checkbox False

解决方案 #

1. 读取显示文本框的实际值 #

自定义下拉框的选中值会同步到页面显示的文本框中，直接获取该输入框的value属性即可：

selected_text = self.webdriver.driver.find_element_by_css_selector('#mode-2g .combobox-text').get_attribute('value')
print(f"当前选中的模式: {selected_text}")

2. 检查选项的选中样式类 #

多数自定义组件会为选中项添加特定的CSS类（如selected），可以检查选项的标签元素是否包含该类：

options = self.webdriver.driver.find_elements_by_css_selector('#mode-2g .combobox-label')
for option in options:
    if 'selected' in option.get_attribute('class'):
        selected_mode = option.find_element_by_class_name('text').text
        print(f"选中的模式: {selected_mode}")

3. 读取绑定的数据源值 #

页面代码中出现data-bind="{wireless24g.hwmode}"，说明使用了Knockout.js框架，可以通过执行JavaScript获取绑定的数据源值：

selected_value = self.webdriver.driver.execute_script("""
    var element = document.getElementById('mode-2g');
    return ko.dataFor(element).wireless24g.hwmode();
""")
print(f"绑定的选中值: {selected_value}")

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