watir
Selecting Date from the Datepicker. How do I do that using WATIR
I don't know how to select the date from the date picker, For an example, If I want to select 1/5/2022, how would I do that?
here is the pic
Here is the Html
<div style="visibility: visible; overflow: visible; left: 589px; top: 193px; position: absolute;"
class="gwt-PopupPanel">
<div class="popupContent">
<table class="gwt-DatePicker" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="vertical-align: top;" align="left">
<table class="datePickerMonthSelector">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td width="1">
<div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
<input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">«</div>
</div>
</td>
<td width="1">
<div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
<input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">‹</div>
</div>
</td>
<td class="datePickerMonth" width="100%">Nov 2022</td>
<td width="1">
<div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">›</div>
</div>
</td>
<td width="1">
<div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">»</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;" align="left">
<table class="datePickerDays" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td class="datePickerWeekendLabel">S</td>
<td class="datePickerWeekdayLabel">M</td>
<td class="datePickerWeekdayLabel">T</td>
<td class="datePickerWeekdayLabel">W</td>
<td class="datePickerWeekdayLabel">T</td>
<td class="datePickerWeekdayLabel">F</td>
<td class="datePickerWeekendLabel">S</td>
</tr>
<tr>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">30
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
31
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">1</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">2</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">3</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">4</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
5
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
6
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">7</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">8</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">9</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">10</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">11</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
12
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
13
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">14</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">15</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">16</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">17</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">18</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
19
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
20
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">21</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">22</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">23</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">24</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">25</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
26
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
27
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">28</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">29</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">30</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
1
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
2
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">3
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">4
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
5
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
6
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
7
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
8
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
9
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">10
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Solution
The general approach needs to be:
- Use the month previous/next buttons to select the month/year
- Click the specific day (making sure to ignore the days for the previous/next month)
The code would look like:
# The day you would like to pick
target_date = Time.parse('1/5/2022')
# Pick the month/year (by determining how many months in the past/future you need to go)
current_date = Time.parse(browser.td(class: 'datePickerMonth').text)
months_to_increment = (target_date.year * 12 + target_date.month) - (current_date.year * 12 + current_date.month) # From https://stackoverflow.com/a/9428676/1200545
months_to_increment.abs.times do
if months_to_increment > 0
browser.div(class: 'datePickerNextButton', index: 0).click
else
browser.div(class: 'datePickerPreviousButton', index: 1).click
end
end
# Pick the day (ignoring the datePickerDayIsFiller divs as they are the previous/next month)
browser.div(text: target_date.day.to_s, class: ['datePickerDay', '!datePickerDayIsFiller']).click
- How to embed text into cucumber report with ruby?
- Cannot load such file -- ffi_c error in RubyMine
- Cucumber disable proxy and use direct connection
- How do I get the fullscreen mode in firefox?
- how to find the time taken for each testcase in Rspec
- I used this article 'Attach to a manually opened Chrome browser using debuggerAddress'
- In Google translate page, printing the text area is not working
- I tried to stop and start this video of youtube using watir but resume is not working
- Ruby & Watir... Web Drivers Conflict
- How to find if a DOM element has an event listener with Ruby
- How do I change the page load Timeouts in Watir-Webdriver (timeout in .click method)
- How to set the browser version in ruby selenium(WATIR)
- Why is the watir gem failing with webdriver error?
- Problem setting default download directory in Watir after update
- Watir-webdriver: how to force the click method to wait for the page to load completely
- Tips for creating a testing "framework" using Watir?
- Can WATIR upload files from Mac directories?
- Hover method is not working when shadow root is used
- watir recursively search for an element inside nested iframe/embed/object
- Get tooltip title with Watir
- Can not open localhost by running Ruby on Rails application
- I am getting "Uncaught ReferenceError: tippy is not defined "
- Watir Scroll For All Comments
- Watir following_sibling Not Seeing Element
- How Can I Click This Link Using Watir?
- Ruby-Selenium WebDriver 3.142.6: Unable to upload file due to "Selenium::WebDriver::Error::UnknownCommandError:"
- executing in another thread|RuntimeError
- Could not convert the given xpath into WATIR code
- How can I write this xpath expression in WATIR methods
- Watir Webdriver counting number of items in a UL list