时间戳

首页 > 解决方案 > 可见VUE输入框的Selenium“消息：元素不可交互”

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

问题描述

我有一个由 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 input 和 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>```

标签： python-2.7seleniumxpathcss-selectorswebdriverwait

解决方案

谢谢@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"))

推荐阅读