python - 如何使用 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

问题是<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 向人类公开的任何元素。对于此示例，人类 UI 是:

<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*" ...> 之一元素，但确实不容易确定。

这就是为什么我们中的一些人认为从 span 和 div 重建现有 HTML 功能的 JavaScript 框架是一个非常糟糕的主意。