Fatal编程技术网
  • python-2.7/
  • Python 2.7 硒“；消息：元素不可交互“；对于可见的VUE输入框

Python 2.7 硒“；消息：元素不可交互“；对于可见的VUE输入框

python-2.7 selenium xpath

Python 2.7 硒“；消息：元素不可交互“；对于可见的VUE输入框,python-2.7,selenium,xpath,css-selectors,webdriverwait,Python 2.7,Selenium,Xpath,Css Selectors,Webdriverwait,我有一个由VUE生成的HTML页面。页面元素如下所示： <input name="" id="newTvAdvertiserSelected" type="text" autocomplete="nope" placeholder="" tabindex="0" class="multiselect__input" style="width:

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

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

 <!---->
 <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>```
如果我手动单击它，它就会工作。我也可以手动输入框。但是，它不接受Selenium click，也不接受“发送密钥”。我得到这个错误“消息：元素不可交互”

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

VUE输入和class=“multiselect\u输入”是否需要特殊处理

此VUE组件是“输入”和“选择”的组合。当我输入一些东西时，它可以自动填充下拉列表。然后我必须从下拉列表中“选择”

该部分的HTML如下所示：

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

 <!---->
 <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>```


刚刚输入了公司名X

    

  • 
公司名称A
    • 
公司名称B
公司名称C

  • 
没有数据

    • 
列表为空。


```
要单击元素，可以使用以下任一选项：

  • 使用
    id
    ：

    driver.find_element_by_id("newTvAdvertiserSelected").click()
  • 使用
    css\u选择器
    ：

    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()
理想情况下，要单击需要引导的元素，使
元素可单击（）
，您可以使用以下任一选项：

  • 使用
    ID
    ：

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "newTvAdvertiserSelected"))).click()
  • 使用
    CSS\u选择器
    ：

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

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

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

    driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))))
  • 注意：您必须添加以下导入：

    from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
更新 最后，您可以使用
execute\u script（）
方法，如下所示：

  • 使用
    CSS\u选择器
    ：

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

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

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

    driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='multiselect__input' and @id='newTvAdvertiserSelected']"))))
      • 谢谢你@DebanjanB、@KunduK和@PDHide。使用JS执行工作。代码如下：

      driver.execute_script（“参数[0]。click（）；参数[0]。dispatchEvent（新事件（'focus'））；参数[0]。value='XXX'；setTimeout（1000）；参数[0]。dispatchEvent（新事件（'input'））”，driver.find_element_by_id（“newTvAdvertiserSelected”））

      我认为页面上有多个元素。检查此返回的计数是否大于1<代码>打印（len（驱动程序。通过id（“newTvAdvertiserSelected”）查找元素）添加htmlplease@KunduK. HTML中只有一个具有此ID的元素。请尝试使用JS executor单击驱动程序。执行脚本（“参数[0]。单击（）”，驱动程序。按ID查找元素（“newTvAdvertiserSelected”）@PDHide我已修改了问题并包含了该部分的HTML代码。谢谢@DebanjanB。但是，我尝试了
      WebDriverWait（driver，20）。直到（EC.element\u可点击（（By.ID，“newTvAdvertiserSelected”））。点击（）。这也不管用。它抛出了错误，但没有错误消息详细信息。我确实使用了
      驱动程序。通过id（“newTvAdvertiserSelected”）查找元素。单击（）。它不起作用。这就是我在这个论坛上提问的原因。xpath和css如何？这些对你有用吗？尝试了xpath和css，结果相同。我认为它找到了正确的元素，因为当我在Chrome中使用xpath手动定位元素时，它只返回一个元素，这就是正确的元素。让我检查一下是否可以从元素中读取任何内容，以再次确认Selenium确实找到了正确的元素。我使用以下代码打印ID。它确实打印了正确的ID。因此Selenium找到了正确的元素。但就是不能点击它
      element1=driver。通过css选择器（“input.multiselect\UUU input\newTvAdvertiserSelected”）查找元素val=element1。获取属性（“id”）打印val
      @FlatWorld签出答案更新并让我知道状态。