如何使用Python在Selenium中选择下拉检查列表中未显示的选项

Question

我正在尝试写一个Selenium驱动程序，用来测试一个使用下拉（组合）复选框的网页。下面的代码展示了我遇到的问题。

#!/usr/bin/python

from selenium import webdriver
from selenium.webdriver.support.ui import Select

driver = webdriver.Firefox()

driver.get("http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html")

selector = driver.find_element_by_id("s1")

allOptions = selector.find_elements_by_tag_name("option")

for option in allOptions:
    print "Value is", option.get_attribute("value")
    option.click()

当我运行这段代码时，得到的输出是：

Value is Low
Traceback (most recent call last):
  File "./ddcl-test.py", line 24, in <module>
option.click()
File "/Library/Python/2.7/site-packages/selenium/webdriver/remote/webelement.py", line 51, in click
self._execute(Command.CLICK_ELEMENT)
File "/Library/Python/2.7/site-packages/selenium/webdriver/remote/webelement.py", line 225, in _execute
return self._parent.execute(command, params)
File "/Library/Python/2.7/site-packages/selenium/webdriver/remote/webdriver.py", line 160, in execute
self.error_handler.check_response(response)
File "/Library/Python/2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 149, in check_response
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotVisibleException: Message: u'Element is not currently visible and so may not be interacted with' ; Stacktrace: Method fxdriver.preconditions.visible threw an error in file:///var/folders/d4/qbgb29wx7z7fpr15t___x24h0000gn/T/tmpBzUUcu/extensions/fxdriver@googlecode.com/components/command_processor.js 

它无法点击这些元素，因为这些元素没有显示出来。

我该如何解决这个问题呢？或者说这是Selenium无法测试的情况吗？

Answer 1

我试过无数次去点击那些看不见的元素，但用selenium根本做不到，或者说我还没找到办法。看起来你没有先点击下拉按钮，所以我建议你先点击下拉菜单的按钮，这样菜单就会显示出来，我觉得这样就能解决你的问题了。

Answer 2

问题在于，你想访问的那个 <SELECT> 元素是被 jQuery 故意隐藏起来的：

<select id="s1" class="s1" tabindex="8" multiple="" style="display: none;">
    <option>Low</option>
    <option>Medium</option>
    <option>High</option>
</select>

WebDriver 不会点击一个隐藏的元素。这是故意的，因为普通用户也无法点击它。WebDriver 不想让你做一些人类做不到的事情。

相反，你需要像人类一样与浏览器互动：点击 jQuery 让人类能看到的元素。对于这个例子，人类界面是：

<span id="ddcl-s1" class="ui-dropdownchecklist ui-dropdownchecklist-selector-wrapper ui-widget" style="display: inline-block; cursor: default; overflow: hidden;">
    <span class="ui-dropdownchecklist-selector ui-state-default" style="display: inline-block; overflow: hidden; white-space: nowrap; width: 85px;" tabindex="8">
        <span class="ui-dropdownchecklist-text" style="display: inline-block; white-space: nowrap; overflow: hidden; width: 81px;" title=" "> 
        </span>
    </span>
</span>
<div id="ddcl-s1-ddw" class="ui-dropdownchecklist ui-dropdownchecklist-dropcontainer-wrapper ui-widget" style="position: absolute; left: -33000px; top: -33000px; height: 74px; width: 91px;">
    <div class="ui-dropdownchecklist-dropcontainer ui-widget-content" style="overflow-y: auto; height: 74px;">
        <div class="ui-dropdownchecklist-item ui-state-default" style="white-space: nowrap;">
            <input id="ddcl-s1-i0" class="active" type="checkbox" tabindex="8" disabled="" index="0" value="Low">
            <label class="ui-dropdownchecklist-text" for="ddcl-s1-i0" style="cursor: default;">Low</label>
        </div>
        <div class="ui-dropdownchecklist-item ui-state-default" style="white-space: nowrap;">
            <input id="ddcl-s1-i1" class="active" type="checkbox" tabindex="8" disabled="" index="1" value="Medium">
            <label class="ui-dropdownchecklist-text" for="ddcl-s1-i1" style="cursor: default;">Medium</label>
        </div>
        <div class="ui-dropdownchecklist-item ui-state-default" style="white-space: nowrap;">
            <input id="ddcl-s1-i2" class="active" type="checkbox" tabindex="8" disabled="" index="2" value="High">
            <label class="ui-dropdownchecklist-text" for="ddcl-s1-i2" style="cursor: default;">High</label>
        </div>
    </div>
</div>

所以看起来你需要互动的是某个 <input id="ddcl-s1-i*" ...> 元素，但其实很难确定。

这就是为什么我们中的一些人认为，使用 JavaScript 框架通过 spans 和 divs 重构现有 HTML 功能是个非常糟糕的主意。