我怎样才能找到与反应日期选择器容器中关联的 WATIR 的 td class 元素？
How can I be able to locate a td class element with WATIR associated in react datepicker container?
不过，我可以使用 xpath 找到它，但它只适用于特定日期，我认为这不是一个有效的解决方案，因为我每次 运行 我都必须更改 xpath脚本。
Watir 脚本：@current_page.element(:xpath, '//*[@id="searchForm"]/div[1]/div[2]/div/div/div[2]/div/div/div[2]/div[2]/div/div[3]/div/table/tbody/tr[4]/td[2]').click
下面是 HTML 日期选择器的代码：
<div class="CalendarMonthGrid_month__horizontal CalendarMonthGrid_month__horizontal_1">
<div class="CalendarMonth CalendarMonth_1" data-visible="true"><div class="CalendarMonth_caption CalendarMonth_caption_1">
<strong>March 2018</strong>
</div>
<table class="CalendarMonth_table CalendarMonth_table_1" role="presentation">
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 1, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">1</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 2, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">2</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 3, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">3</td>
</tr>
<tr>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 4, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">4</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Monday, March 5, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">5</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Tuesday, March 6, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">6</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Wednesday, March 7, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">7</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 8, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">8</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 9, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">9</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 10, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">10</td>
</tr>
<tr>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 11, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">11</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Monday, March 12, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">12</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Tuesday, March 13, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">13</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Wednesday, March 14, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">14</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 15, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">15</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 16, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">16</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 17, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">17</td>
</tr><tr><td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 18, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">18</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3 CalendarDay__selected_start CalendarDay__selected_start_4 CalendarDay__selected CalendarDay__selected_5" role="button" aria-label="Selected. Monday, March 19, 2018" tabindex="0" style="width: 39px; height: 38px;">19</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Tuesday, March 20, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">20</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Wednesday, March 21, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">21</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Thursday, March 22, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">22</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Friday, March 23, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">23</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Saturday, March 24, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">24</td>
</tr><tr><td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Sunday, March 25, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">25</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Monday, March 26, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">26</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Tuesday, March 27, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">27</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Wednesday, March 28, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">28</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3 CalendarDay__last_in_range CalendarDay__last_in_range_4" role="button" aria-label="Choose Thursday, March 29, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">29</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_end CalendarDay__selected_end_3 CalendarDay__selected CalendarDay__selected_4" role="button" aria-label="Selected. Friday, March 30, 2018" tabindex="-1" style="width: 39px; height: 38px;">30</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 31, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">31</td>
</tr>
</tbody>
</table>
</div>
</div>
您可以创建一个接受 Date 或 Time class:
的方法
def pick_date(date)
@browser.td(aria_label: /#{date.strftime(%A, %B %e, %Y)}/).click
end
不过，我可以使用 xpath 找到它，但它只适用于特定日期，我认为这不是一个有效的解决方案，因为我每次 运行 我都必须更改 xpath脚本。
Watir 脚本：@current_page.element(:xpath, '//*[@id="searchForm"]/div[1]/div[2]/div/div/div[2]/div/div/div[2]/div[2]/div/div[3]/div/table/tbody/tr[4]/td[2]').click
下面是 HTML 日期选择器的代码：
<div class="CalendarMonthGrid_month__horizontal CalendarMonthGrid_month__horizontal_1">
<div class="CalendarMonth CalendarMonth_1" data-visible="true"><div class="CalendarMonth_caption CalendarMonth_caption_1">
<strong>March 2018</strong>
</div>
<table class="CalendarMonth_table CalendarMonth_table_1" role="presentation">
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 1, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">1</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 2, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">2</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 3, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">3</td>
</tr>
<tr>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 4, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">4</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Monday, March 5, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">5</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Tuesday, March 6, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">6</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Wednesday, March 7, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">7</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 8, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">8</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 9, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">9</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 10, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">10</td>
</tr>
<tr>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 11, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">11</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Monday, March 12, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">12</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Tuesday, March 13, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">13</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Wednesday, March 14, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">14</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Thursday, March 15, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">15</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Friday, March 16, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">16</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 17, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">17</td>
</tr><tr><td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Sunday, March 18, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">18</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3 CalendarDay__selected_start CalendarDay__selected_start_4 CalendarDay__selected CalendarDay__selected_5" role="button" aria-label="Selected. Monday, March 19, 2018" tabindex="0" style="width: 39px; height: 38px;">19</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Tuesday, March 20, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">20</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Wednesday, March 21, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">21</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Thursday, March 22, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">22</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Friday, March 23, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">23</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Saturday, March 24, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">24</td>
</tr><tr><td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Sunday, March 25, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">25</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Monday, March 26, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">26</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Tuesday, March 27, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">27</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3" role="button" aria-label="Choose Wednesday, March 28, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">28</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_span CalendarDay__selected_span_3 CalendarDay__last_in_range CalendarDay__last_in_range_4" role="button" aria-label="Choose Thursday, March 29, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">29</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2 CalendarDay__selected_end CalendarDay__selected_end_3 CalendarDay__selected CalendarDay__selected_4" role="button" aria-label="Selected. Friday, March 30, 2018" tabindex="-1" style="width: 39px; height: 38px;">30</td>
<td class="CalendarDay CalendarDay_1 CalendarDay__default CalendarDay__default_2" role="button" aria-label="Choose Saturday, March 31, 2018 as your check-in date. It's available." tabindex="-1" style="width: 39px; height: 38px;">31</td>
</tr>
</tbody>
</table>
</div>
</div>
您可以创建一个接受 Date 或 Time class:
def pick_date(date)
@browser.td(aria_label: /#{date.strftime(%A, %B %e, %Y)}/).click
end