如何使用WATIR从日期选择器中选择指定日期（如1/5/2022）？

问题描述 #

我不清楚如何使用WATIR从日期选择器中选择日期，例如想要选择日期1/5/2022（即2022年5月1日），该如何操作？

日期选择器说明 #

这是一个GWT实现的日期选择器，当前界面显示2022年11月，包含：

• 四个月份切换按钮：«（切换到上一年）、‹（切换到上月）、›（切换到下月）、»（切换到下一年）
• 顶部显示当前年月的标题栏
• 日期表格，周末日期有特殊标识，非当前月份的填充日期（带有datePickerDayIsFiller类）不可点击

对应的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>

解决方案 #

要选择1/5/2022（2022年5月1日），可以按以下步骤用WATIR实现：

1. 定位日期选择器容器 #

首先获取日期选择器的根元素：

date_picker = browser.div(class: 'gwt-PopupPanel').table(class: 'gwt-DatePicker')

2. 切换到目标年月（2022年5月） #

当前显示的是2022年11月，需要多次点击上月按钮（‹）切换到5月，循环点击直到标题显示May 2022：

# 目标年月
target_month_year = 'May 2022'
# 获取当前显示的年月
current_month_year = date_picker.element(class: 'datePickerMonth').text

# 循环切换月份，直到匹配目标
while current_month_year != target_month_year
  # 点击上月按钮
  date_picker.div(class: 'datePickerPreviousButton', text: '‹').click
  # 更新当前年月
  current_month_year = date_picker.element(class: 'datePickerMonth').text
end

3. 选择目标日期（1号） #

找到日期表格中不带datePickerDayIsFiller类的1号元素（确保是当前月份的日期）并点击：

# 选择5月1日
date_picker.div(class: 'datePickerDay', text: '1', class: '!datePickerDayIsFiller').click

完整代码示例 #

# 定位日期选择器
date_picker = browser.div(class: 'gwt-PopupPanel').table(class: 'gwt-DatePicker')

# 切换到2022年5月
target_month_year = 'May 2022'
current_month_year = date_picker.element(class: 'datePickerMonth').text

while current_month_year != target_month_year
  date_picker.div(class: 'datePickerPreviousButton', text: '‹').click
  current_month_year = date_picker.element(class: 'datePickerMonth').text
end

# 选择5月1日
date_picker.div(class: 'datePickerDay', text: '1', class: '!datePickerDayIsFiller').click

注意事项 #

• 如果目标年份和当前年份不同，可以用«或»按钮快速切换年份，减少点击次数
• 确保日期选择器完全加载后再执行操作，必要时添加等待：

  Watir::Wait.until { date_picker.present? }
  

内容的提问来源于stack exchange，提问作者Rajagopalan