可见VUE输入框的Selenium“消息：元素不可交互”

Question

我有一个由 VUE 生成的 HTML 页面。页面元素如下：

<input name="" id="newTvAdvertiserSelected" type="text" autocomplete="nope" placeholder="" tabindex="0" class="multiselect__input" style="width: 0px; position: absolute; padding: 0px;"> 

然后我有如下 Selenium 代码来点击它。

driver.find_element_by_id("newTvAdvertiserSelected").click()

如果我手动单击它，它会起作用。我也可以在框中手动输入。但是，它不接受 Selenium 点击也不接受“send_keys”。我收到此错误“消息：元素不可交互”。

脚本也为页面等待了 5 秒，我可以看到页面上的所有元素。所以我认为脚本已经等待了足够长的时间来加载所有元素。

VUE 输入和 class="multiselect__input" 需要一些特殊处理吗？

这个 VUE 组件是“输入”和“选择”的组合。当我输入内容时，它会自动填充下拉列表。然后我必须从下拉列表中“选择”。

该部分的 HTML 如下：

 <!---->
 <div class="el-form-item__content">
   <div tabindex="-1" class="multiselect" style="">
     <div class="multiselect__select"></div>  
     <div class="multiselect__tags">
      <div class="multiselect__tags-wrap" style="display: none;"></div> 
     <!----> 
     <div class="multiselect__spinner" style="display: none;"></div> 
<input name="" id="newTvAdvertiserSelected" type="text" autocomplete="nope" placeholder="" tabindex="0" class="multiselect__input" style="width: 0px; position: absolute; padding: 0px;"> 
<span class="multiselect__single">Just typed in COmpany Name X</span> <!----></div> 
<div tabindex="-1" class="multiselect__content-wrapper" style="max-height: 300px; display: none;">
<ul class="multiselect__content" style="display: inline-block;"> <!----> 
<li class="multiselect__element">
<span data-select="" data-selected="" data-deselect="" class="multiselect__option multiselect__option--highlight"><span>Company name A</span></span> <!----></li>
<li class="multiselect__element"><span data-select="" data-selected="" data-deselect="" class="multiselect__option"><span>Company name B</span></span> <!----></li>
<li class="multiselect__element"><span data-select="" data-selected="" data-deselect="" class="multiselect__option"><span>Company name C</span></span> <!----></li> 
<li style="display: none;"><span class="multiselect__option">
<span>No Data</span>
</span>
</li> 
<li style="display: none;"><span class="multiselect__option">List is empty.</span></li> 
</ul>
</div>
</div>
<!---->
</div>
</div>```

Answer 1

谢谢@DebanjanB、@KunduK 和@PDHide。使用 JS 执行工作。代码如下：

driver.execute_script("arguments[0].click();arguments[0].dispatchEvent(new Event('focus')); arguments[0].value = 'XXX'; setTimeout(1000); arguments[0].dispatchEvent(new Event('input'))", driver.find_element_by_id("newTvAdvertiserSelected"))

Answer 2

要点击元素，您可以使用以下任一Locator Strategies：

• 使用id：

  driver.find_element_by_id("newTvAdvertiserSelected").click()
  

• 使用css_selector：

  driver.find_element_by_css_selector("input.multiselect__input#newTvAdvertiserSelected").click()
  

• 使用xpath：

  driver.find_element_by_xpath("//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']").click()
  

---

理想情况下，点击您需要为WebDriverWait 诱导element_to_be_clickable() 的元素，您可以使用以下任一Locator Strategies：

• 使用ID：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "newTvAdvertiserSelected"))).click()
  

• 使用CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.multiselect__input#newTvAdvertiserSelected"))).click()
  

• 使用XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))).click()
  

• 注意：您必须添加以下导入：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  

---

更新

作为最后的手段，您可以使用execute_script() 方法，如下所示：

• 使用CSS_SELECTOR：

  driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.multiselect__input#newTvAdvertiserSelected"))))
  

• 使用XPATH：

  driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))))