元素从显示更改为：无显示：block selenium python [英] Element changes from display: none to display:block selenium python

问题描述

我正在尝试使用硒在线填写表格，有时我必须填写日期。由于该页面不允许使用 send_keys（），因此无法使用。相反，当我单击日期字段时，它会弹出一个日期选择器窗口，提示您选择年份，然后我就可以成功进行选择。

I am trying to fill a form online using selenium and at some point I have to fill a date. I can't use send_keys() since it is not allowed by the page. Instead, when I click on the date field, it pops up a datepicker window that prompts to select the year, and I can do this successfully.

选择年份之后，上一个窗口将被删除，并显示一个提示选择月份的新窗口。这是通过将样式从 display：none 设置为 display：block ，并在上一年窗口中，将样式从 display：block 设置为显示：无。

After picking the year, the previous window is removed and a new one that prompts to select the month is displayed. This is done by setting the style from display: none to display: block and to the previous year window the style is set from display: block to display: none.

问题在于，即使新窗口 is_displayed（）和 is_enabled（） 方法在第二个窗口的元素上使用 is_displayed（）时，返回第二个窗口的元素 True 。即使 is_enabled（）方法返回 True False c>。

The problem is that even if the new window is_displayed() and is_enabled() methods return True, the elements of the second window, when using is_displayed() on them returns False, even if the is_enabled() method returns True.

我认为我应该刷新驱动程序的dom元素，但是 driver.refresh（）会让我回来在步骤0中，我必须再次选择年份。

I think that I should refresh the dom elements of my driver, but driver.refresh() puts me back in step 0, where I have to pick the year again.

这是我的代码：

# Code for selecting year (Works)
dateWindow = driver.find_element_by_xpath('/html/body/div[9]/div[3]/table')
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_year).click()

# Code for selecting month (Does not work)
dateWindow = driver.find_element_by_xpath('/html/body/div[9]/div[2]/table')
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_month).click()

在最后一行中，出现此错误：

In the last line, I get this error:

selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable

这是选择年份之前的页面：

This is the html of the page before selecting the year:

<div class="datepicker-days" style="display: none;">
   <table class=" table-condensed">
     <thead>
      <tr>
       <th class="prev" style="visibility: visible;">«</th>
       <th colspan="5" class="datepicker-switch">June 1993</th>
       <th class="next" style="visibility: visible;">»</th>
      </tr>
      <tr>
       <th class="dow">Su</th>
       <th class="dow">Mo</th>
       <th class="dow">Tu</th>
       <th class="dow">We</th>
       <th class="dow">Th</th>
       <th class="dow">Fr</th>
       <th class="dow">Sa</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td class="old day">30</td>
       <td class="old day">31</td>
       <td class="day">1</td>
       <td class="day">2</td>
       <td class="day">3</td>
       <td class="day">4</td>
       ...
       <td class="day">29</td>
       <td class="day">30</td>
       <td class="new day">1</td>
       <td class="new day">2</td>
       <td class="new day">3</td>
      </tr>
      <tr>
       <td class="new day">4</td>
       <td class="new day">5</td>
       <td class="new day">6</td>
       <td class="new day">7</td>
       <td class="new day">8</td>
       <td class="new day">9</td>
       <td class="new day">10</td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
      </tr>
      <tr>
       <th colspan="7" class="clear" style="display: none;">Clear</th>
      </tr>
     </tfoot>
    </table>
</div>
<div class="datepicker-months" style="display: none;">
   <table class="table-condensed">
     <thead>
      <tr>
       <th class="prev" style="visibility: visible;">«</th>
       <th colspan="5" class="datepicker-switch">1993</th>
       <th class="next" style="visibility: visible;">»</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td colspan="7">
        <span class="month">Jan</span>
        <span class="month">Feb</span>
        <span class="month">Mar</span>
        <span class="month">Apr</span>
        <span class="month">May</span>
        <span class="month">Jun</span>
        <span class="month">Jul</span>
        <span class="month">Aug</span>
        <span class="month">Sep</span>
        <span class="month">Oct</span>
        <span class="month">Nov</span>
        <span class="month">Dec</span>
       </td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
      </tr>
      <tr>
       <th colspan="7" class="clear" style="display: none;">Clear</th>
      </tr>
     </tfoot>
    </table>
</div>
<div class="datepicker-years" style="display: block;">
   <table class="table-condensed">
    <thead>
     <tr>
      <th class="prev" style="visibility: visible;">«</th>
      <th colspan="5" class="datepicker-switch">1990-1999</th>
      <th class="next" style="visibility: visible;">»</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td colspan="7">
       <span class="year old">1989</span>
       <span class="year">1990</span>
       <span class="year">1991</span>
       <span class="year">1992</span>
       <span class="year">1993</span>
       <span class="year active">1994</span>
       <span class="year">1995</span>
       <span class="year">1996</span>
       <span class="year">1997</span>
       <span class="year">1998</span>
       <span class="year">1999</span>
       <span class="year new">2000</span>
      </td>
     </tr>
    </tbody>
    <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
     </tr>
     <tr>
      <th colspan="7" class="clear" style="display: none;">Clear</th>
     </tr>
    </tfoot>
   </table>
</div>

这是选择月份之前和选择年份之后的页面html：

This is the html of the page before selecting the month and after selecting the year:

<div class="datepicker-days" style="display: none;">
   <table class=" table-condensed">
     <thead>
      <tr>
       <th class="prev" style="visibility: visible;">«</th>
       <th colspan="5" class="datepicker-switch">June 1993</th>
       <th class="next" style="visibility: visible;">»</th>
      </tr>
      <tr>
       <th class="dow">Su</th>
       <th class="dow">Mo</th>
       <th class="dow">Tu</th>
       <th class="dow">We</th>
       <th class="dow">Th</th>
       <th class="dow">Fr</th>
       <th class="dow">Sa</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td class="old day">30</td>
       <td class="old day">31</td>
       <td class="day">1</td>
       <td class="day">2</td>
       <td class="day">3</td>
       <td class="day">4</td>
       ...
       <td class="day">29</td>
       <td class="day">30</td>
       <td class="new day">1</td>
       <td class="new day">2</td>
       <td class="new day">3</td>
      </tr>
      <tr>
       <td class="new day">4</td>
       <td class="new day">5</td>
       <td class="new day">6</td>
       <td class="new day">7</td>
       <td class="new day">8</td>
       <td class="new day">9</td>
       <td class="new day">10</td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
      </tr>
      <tr>
       <th colspan="7" class="clear" style="display: none;">Clear</th>
      </tr>
     </tfoot>
    </table>
</div>
<div class="datepicker-months" style="display: block;">
   <table class="table-condensed">
     <thead>
      <tr>
       <th class="prev" style="visibility: visible;">«</th>
       <th colspan="5" class="datepicker-switch">1993</th>
       <th class="next" style="visibility: visible;">»</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td colspan="7">
        <span class="month">Jan</span>
        <span class="month">Feb</span>
        <span class="month">Mar</span>
        <span class="month">Apr</span>
        <span class="month">May</span>
        <span class="month">Jun</span>
        <span class="month">Jul</span>
        <span class="month">Aug</span>
        <span class="month">Sep</span>
        <span class="month">Oct</span>
        <span class="month">Nov</span>
        <span class="month">Dec</span>
       </td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
      </tr>
      <tr>
       <th colspan="7" class="clear" style="display: none;">Clear</th>
      </tr>
     </tfoot>
    </table>
</div>
<div class="datepicker-years" style="display: none;">
   <table class="table-condensed">
    <thead>
     <tr>
      <th class="prev" style="visibility: visible;">«</th>
      <th colspan="5" class="datepicker-switch">1990-1999</th>
      <th class="next" style="visibility: visible;">»</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td colspan="7">
       <span class="year old">1989</span>
       <span class="year">1990</span>
       <span class="year">1991</span>
       <span class="year">1992</span>
       <span class="year">1993</span>
       <span class="year active">1994</span>
       <span class="year">1995</span>
       <span class="year">1996</span>
       <span class="year">1997</span>
       <span class="year">1998</span>
       <span class="year">1999</span>
       <span class="year new">2000</span>
      </td>
     </tr>
    </tbody>
    <tfoot>
      <tr>
       <th colspan="7" class="today" style="display: none;">Today</th>
     </tr>
     <tr>
      <th colspan="7" class="clear" style="display: none;">Clear</th>
     </tr>
    </tfoot>
   </table>
</div>

有什么想法吗？预先感谢

Any ideas? Thanks in advance

推荐答案

所需元素是动态元素，因此在选择 Month 时必须为 element_to_be_clickable（）诱导 WebDriverWait ，您可以使用以下任一定位器策略：

The desired element is an dynamic element so while selecting the Month you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• 使用 XPATH ：

dateWindow = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div[9]/div[2]/table")))
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_month).click()

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

Note : You have to add the following imports :

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

这篇关于元素从显示更改为：无显示：block selenium python的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！