1

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.

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.

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.

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.

This is my code:

# 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>

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

Orestis Zekai
  • 839
  • 1
  • 12
  • 23

1 Answers1

2

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:

  • Using 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
DebanjanB
  • 118,661
  • 30
  • 168
  • 217