让下拉元素工作 - Selenium

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>

方法一：我试过选择

catElem = Select(browser.find_element_by_id('auditable_entity_entity_type_id'))

catElem.select_by_visible_text('L4 Segmentation')

我也尝试过添加等待时间

WebDriverWait(browser, 10).until(EC.presence_of_element_located((By.ID, 'auditable_entity_entity_type_id')))

我收到了一个常见错误：“元素不可交互：元素当前不可见，并且可能无法操作”。

方法 2：我注意到 <select> 元素正下方的元素实际上是可点击的，我通过这样做设法点击了下拉列表：

browser.find_element_by_id('auditable_entity_entity_type_id_singleselect').click()

如何让 Select 起作用（方法 1），或者如何在打开下拉菜单后选择选项（方法 2）？

Answer 1

您看到的错误实际上很好地描述了正在发生的事情。

元素不可交互：元素当前不可见，也不能被操作

来自您发布的 HTML sn-p：

<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; 通常与 JavaScript 一起使用来隐藏和显示元素，而无需删除和重新创建它们。

因此，您将无法使用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