让下拉元素工作

Question

我正在尝试从类别下拉菜单中选择“L4分段”

<div data-fragment-id="auditable-entity-form"> <form data-behavior="fragments" class=" new_auditable_entity warns-when-has-unsaved-data " id="new_auditable_entity" enctype="multipart/form-data" action="/auditable_entities" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"> <fieldset> <legend>New Entity</legend> <div class="control-group"> <label for="auditable_entity_title"> Name <span class="help-tip"> (120 characters max)</span> </label> <input class="span6" maxlength="120" size="120" type="text" name="auditable_entity[title]" id="auditable_entity_title"> </div> <div class="control-group"> <label for="auditable_entity_entity_type_id">Category <span class="help-tip">(optional)</span></label> <div class="controls"> <select class="acts-as-singleselect" data-placeholder="Select Category" data-width="200px" name="auditable_entity[entity_type_id]" id="auditable_entity_entity_type_id" style="display: none;"> <option value=""></option> <option value="5230">Enterprise Applications</option> <option value="5229">LMTS Applications</option> <option value="5221">LCHC Applications</option> <option value="5366">L1 Segmentation</option> <option value="5367">L2 Segmentation</option> <option value="5368">L3 Segmentation</option> <option value="5369">L4 Segmentation</option> </select> <div class="singleselect-container is-active" id="auditable_entity_entity_type_id_singleselect" style="width: 200px;"> <div class="singleselect-toggle"> <span class="singleselect-value">Select Category</span> <span class="acl-throbber tiny"></span> </div> <div class="singleselect-drop"> <div class="singleselect-search"> <input type="text" class="singleselect-filter" autocomplete="off" placeholder="Search" aria-label="Search"> </div> <ul class="singleselect-list"> <li data-value="" class="singleselect-item is-selected"> None </li> <li data-value="5230" class="singleselect-item"> Enterprise Applications </li> <li data-value="5229" class="singleselect-item"> LMTS Applications </li> <li data-value="5221" class="singleselect-item"> LCHC Applications </li> <li data-value="5366" class="singleselect-item"> L1 Segmentation </li> <li data-value="5367" class="singleselect-item"> L2 Segmentation </li> <li data-value="5368" class="singleselect-item"> L3 Segmentation </li> <li data-value="5369" class="singleselect-item"> L4 Segmentation </li> </ul> </div> </div> </div> </div>

Answer 1

你看到的错误实际上是对正在发生的事情的很好的描述。你知道吗

element not interactable: Element is not currently visible and may not be manipulated

从您发布的HTML代码片段：

<select class="..." data-placeholder="..." data-width="..." name="..." id="auditable_entity_entity_type_id" style="display: none;">

注意属性style="display: none;"。这会导致元素不被呈现，并且由于Selenium充当用户的角色并尝试用鼠标单击元素，因此尝试失败，因为您无法单击未显示的内容。你知道吗

解决方法完全取决于网站的构建方式，以及它们如何实现（或忽略）有关语义HTML的最佳实践。了解如何在Selenium中编程交互的最佳方法是手动执行所需的步骤，并使用浏览器的开发工具查看实际单击的元素。许多网站使用JavaScript和事件处理程序用定制样式的列表重新实现公共控件，例如<select>元素，因此您应该选择的元素可能不是您仅仅通过查看页面源代码所期望的元素。你知道吗

对于您尝试的第二种方法，可以尝试在打开下拉列表后用“L4 Segmentation”文本单击<li>元素。你知道吗

Answer 2

看这里：

<select class="acts-as-singleselect" data-placeholder="Select Category" 
data-width="200px" name="auditable_entity[entity_type_id]" 
id="auditable_entity_entity_type_id" style="display: none;">
                                     ^^^^^^^^^^^^^^^^^^^^^

根据CSS Layout - The display Property

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

因此，您将无法使用Select类，因为不可见的元素是不可单击的，与下拉列表交互的正确方式如下：

cat_elem = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[@aria-label='Search']")))
cat_elem.click()

l4_segmentation = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//li[contains(text(),'L4 Segmentation']")))
l4_segmentation.click()

更多信息：How to use Selenium to test web applications using AJAX technology