如何在Selenium和Java中处理引导日期选择器

时间:2019-07-19 10:28:51

标签: java selenium twitter-bootstrap-3

我无法在引导日期选择器中找到日期,月份和年份。当我尝试检查日历中的元素时,日历将关闭并且无法找到该元素。

1 个答案:

答案 0 :(得分:0)

打开页面,单击负责显示日历的控件并调用WebDriver.getPageSource()函数,应该没问题。

示例代码(由于WebDriverWait调用的异步特性,它使用DOM来确保日历小部件在那里,因为AJAX准备就绪后可能会加载日历小部件):

driver.get("https://eonasdan.github.io/bootstrap-datetimepicker/");
new WebDriverWait(driver, 10)
        .until(ExpectedConditions
                .elementToBeClickable(By
                        .xpath("//span[contains(@class,'calendar')]")))
        .click();
Files.write(Paths.get("response.html"), driver.getPageSource().getBytes(StandardCharsets.UTF_8));

上一页的输出示例:

<div class="bootstrap-datetimepicker-widget dropdown-menu bottom"
     style="display: block; top: 34px; bottom: auto; left: 0px; right: auto;">
    <ul class="list-unstyled">
        <li class="collapse in">
            <div class="datepicker">
                <div class="datepicker-days" style="display: block;">
                    <table class="table-condensed">
                        <thead>
                        <tr>
                            <th class="prev" data-action="previous"><span
                                    class="glyphicon glyphicon-chevron-left"
                                    title="Previous Month"></span></th>
                            <th class="picker-switch" data-action="pickerSwitch"
                                colspan="5" title="Select Month">July 2019
                            </th>
                            <th class="next" data-action="next"><span
                                    class="glyphicon glyphicon-chevron-right"
                                    title="Next Month"></span></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 data-action="selectDay" data-day="06/30/2019"
                                class="day old weekend">30
                            </td>
                            <td data-action="selectDay" data-day="07/01/2019"
                                class="day">1
                            </td>
                            <td data-action="selectDay" data-day="07/02/2019"
                                class="day">2
                            </td>
                            <td data-action="selectDay" data-day="07/03/2019"
                                class="day">3
                            </td>
                            <td data-action="selectDay" data-day="07/04/2019"
                                class="day">4
                            </td>
                            <td data-action="selectDay" data-day="07/05/2019"
                                class="day">5
                            </td>
                            <td data-action="selectDay" data-day="07/06/2019"
                                class="day weekend">6
                            </td>
                        </tr>
                        <tr>
                            <td data-action="selectDay" data-day="07/07/2019"
                                class="day weekend">7
                            </td>
                            <td data-action="selectDay" data-day="07/08/2019"
                                class="day">8
                            </td>
                            <td data-action="selectDay" data-day="07/09/2019"
                                class="day">9
                            </td>
                            <td data-action="selectDay" data-day="07/10/2019"
                                class="day">10
                            </td>
                            <td data-action="selectDay" data-day="07/11/2019"
                                class="day">11
                            </td>
                            <td data-action="selectDay" data-day="07/12/2019"
                                class="day">12
                            </td>
                            <td data-action="selectDay" data-day="07/13/2019"
                                class="day weekend">13
                            </td>
                        </tr>
                        <tr>
                            <td data-action="selectDay" data-day="07/14/2019"
                                class="day weekend">14
                            </td>
                            <td data-action="selectDay" data-day="07/15/2019"
                                class="day">15
                            </td>
                            <td data-action="selectDay" data-day="07/16/2019"
                                class="day">16
                            </td>
                            <td data-action="selectDay" data-day="07/17/2019"
                                class="day">17
                            </td>
                            <td data-action="selectDay" data-day="07/18/2019"
                                class="day">18
                            </td>
                            <td data-action="selectDay" data-day="07/19/2019"
                                class="day">19
                            </td>
                            <td data-action="selectDay" data-day="07/20/2019"
                                class="day weekend">20
                            </td>
                        </tr>
                        <tr>
                            <td data-action="selectDay" data-day="07/21/2019"
                                class="day weekend">21
                            </td>
                            <td data-action="selectDay" data-day="07/22/2019"
                                class="day active today">22
                            </td>
                            <td data-action="selectDay" data-day="07/23/2019"
                                class="day">23
                            </td>
                            <td data-action="selectDay" data-day="07/24/2019"
                                class="day">24
                            </td>
                            <td data-action="selectDay" data-day="07/25/2019"
                                class="day">25
                            </td>
                            <td data-action="selectDay" data-day="07/26/2019"
                                class="day">26
                            </td>
                            <td data-action="selectDay" data-day="07/27/2019"
                                class="day weekend">27
                            </td>
                        </tr>
                        <tr>
                            <td data-action="selectDay" data-day="07/28/2019"
                                class="day weekend">28
                            </td>
                            <td data-action="selectDay" data-day="07/29/2019"
                                class="day">29
                            </td>
                            <td data-action="selectDay" data-day="07/30/2019"
                                class="day">30
                            </td>
                            <td data-action="selectDay" data-day="07/31/2019"
                                class="day">31
                            </td>
                            <td data-action="selectDay" data-day="08/01/2019"
                                class="day new">1
                            </td>
                            <td data-action="selectDay" data-day="08/02/2019"
                                class="day new">2
                            </td>
                            <td data-action="selectDay" data-day="08/03/2019"
                                class="day new weekend">3
                            </td>
                        </tr>
                        <tr>
                            <td data-action="selectDay" data-day="08/04/2019"
                                class="day new weekend">4
                            </td>
                            <td data-action="selectDay" data-day="08/05/2019"
                                class="day new">5
                            </td>
                            <td data-action="selectDay" data-day="08/06/2019"
                                class="day new">6
                            </td>
                            <td data-action="selectDay" data-day="08/07/2019"
                                class="day new">7
                            </td>
                            <td data-action="selectDay" data-day="08/08/2019"
                                class="day new">8
                            </td>
                            <td data-action="selectDay" data-day="08/09/2019"
                                class="day new">9
                            </td>
                            <td data-action="selectDay" data-day="08/10/2019"
                                class="day new weekend">10
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="datepicker-months" style="display: none;">
                    <table class="table-condensed">
                        <thead>
                        <tr>
                            <th class="prev" data-action="previous"><span
                                    class="glyphicon glyphicon-chevron-left"
                                    title="Previous Year"></span></th>
                            <th class="picker-switch" data-action="pickerSwitch"
                                colspan="5" title="Select Year">2019
                            </th>
                            <th class="next" data-action="next"><span
                                    class="glyphicon glyphicon-chevron-right"
                                    title="Next Year"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="7"><span data-action="selectMonth"
                                                  class="month">Jan</span><span
                                    data-action="selectMonth"
                                    class="month">Feb</span><span
                                    data-action="selectMonth"
                                    class="month">Mar</span><span
                                    data-action="selectMonth"
                                    class="month">Apr</span><span
                                    data-action="selectMonth"
                                    class="month">May</span><span
                                    data-action="selectMonth"
                                    class="month">Jun</span><span
                                    data-action="selectMonth"
                                    class="month active">Jul</span><span
                                    data-action="selectMonth"
                                    class="month">Aug</span><span
                                    data-action="selectMonth"
                                    class="month">Sep</span><span
                                    data-action="selectMonth"
                                    class="month">Oct</span><span
                                    data-action="selectMonth"
                                    class="month">Nov</span><span
                                    data-action="selectMonth" class="month">Dec</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="datepicker-years" style="display: none;">
                    <table class="table-condensed">
                        <thead>
                        <tr>
                            <th class="prev" data-action="previous"><span
                                    class="glyphicon glyphicon-chevron-left"
                                    title="Next Decade"></span></th>
                            <th class="picker-switch" data-action="pickerSwitch"
                                colspan="5" title="Select Decade">2014-2025
                            </th>
                            <th class="next" data-action="next"><span
                                    class="glyphicon glyphicon-chevron-right"
                                    title="Previous Decade"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="7"><span data-action="selectYear" class="year">2014</span><span
                                    data-action="selectYear"
                                    class="year">2015</span><span
                                    data-action="selectYear"
                                    class="year">2016</span><span
                                    data-action="selectYear"
                                    class="year">2017</span><span
                                    data-action="selectYear"
                                    class="year">2018</span><span
                                    data-action="selectYear"
                                    class="year active">2019</span><span
                                    data-action="selectYear"
                                    class="year">2020</span><span
                                    data-action="selectYear"
                                    class="year">2021</span><span
                                    data-action="selectYear"
                                    class="year">2022</span><span
                                    data-action="selectYear"
                                    class="year">2023</span><span
                                    data-action="selectYear"
                                    class="year">2024</span><span
                                    data-action="selectYear" class="year">2025</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="datepicker-decades" style="display: none;">
                    <table class="table-condensed">
                        <thead>
                        <tr>
                            <th class="prev" data-action="previous"><span
                                    class="glyphicon glyphicon-chevron-left"
                                    title="Previous Century"></span></th>
                            <th class="picker-switch" data-action="pickerSwitch"
                                colspan="5">1999-2099
                            </th>
                            <th class="next" data-action="next"><span
                                    class="glyphicon glyphicon-chevron-right"
                                    title="Next Century"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="7"><span data-action="selectDecade"
                                                  class="decade" data-selection="2005">2000 - 2011</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2017">2012 - 2023</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2029">2024 - 2035</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2041">2036 - 2047</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2053">2048 - 2059</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2065">2060 - 2071</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2077">2072 - 2083</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2089">2084 - 2095</span><span
                                    data-action="selectDecade" class="decade"
                                    data-selection="2101">2096 - 2107</span><span></span><span></span><span></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </li>
        <li class="picker-switch accordion-toggle">
            <table class="table-condensed">
                <tbody>
                <tr>
                    <td><a data-action="togglePicker" title="Select Time"><span
                            class="glyphicon glyphicon-time"></span></a></td>
                </tr>
                </tbody>
            </table>
        </li>
        <li class="collapse">
            <div class="timepicker">
                <div class="timepicker-picker">
                    <table class="table-condensed">
                        <tbody>
                        <tr>
                            <td><a href="#" tabindex="-1" title="Increment Hour"
                                   class="btn" data-action="incrementHours"><span
                                    class="glyphicon glyphicon-chevron-up"></span></a>
                            </td>
                            <td class="separator"></td>
                            <td><a href="#" tabindex="-1" title="Increment Minute"
                                   class="btn" data-action="incrementMinutes"><span
                                    class="glyphicon glyphicon-chevron-up"></span></a>
                            </td>
                            <td class="separator"></td>
                        </tr>
                        <tr>
                            <td><span class="timepicker-hour"
                                      data-time-component="hours" title="Pick Hour"
                                      data-action="showHours">05</span></td>
                            <td class="separator">:</td>
                            <td><span class="timepicker-minute"
                                      data-time-component="minutes" title="Pick Minute"
                                      data-action="showMinutes">46</span></td>
                            <td>
                                <button class="btn btn-primary"
                                        data-action="togglePeriod" tabindex="-1"
                                        title="Toggle Period">PM
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td><a href="#" tabindex="-1" title="Decrement Hour"
                                   class="btn" data-action="decrementHours"><span
                                    class="glyphicon glyphicon-chevron-down"></span></a>
                            </td>
                            <td class="separator"></td>
                            <td><a href="#" tabindex="-1" title="Decrement Minute"
                                   class="btn" data-action="decrementMinutes"><span
                                    class="glyphicon glyphicon-chevron-down"></span></a>
                            </td>
                            <td class="separator"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="timepicker-hours" style="display: none;">
                    <table class="table-condensed">
                        <tbody>
                        <tr>
                            <td data-action="selectHour" class="hour">12</td>
                            <td data-action="selectHour" class="hour">01</td>
                            <td data-action="selectHour" class="hour">02</td>
                            <td data-action="selectHour" class="hour">03</td>
                        </tr>
                        <tr>
                            <td data-action="selectHour" class="hour">04</td>
                            <td data-action="selectHour" class="hour">05</td>
                            <td data-action="selectHour" class="hour">06</td>
                            <td data-action="selectHour" class="hour">07</td>
                        </tr>
                        <tr>
                            <td data-action="selectHour" class="hour">08</td>
                            <td data-action="selectHour" class="hour">09</td>
                            <td data-action="selectHour" class="hour">10</td>
                            <td data-action="selectHour" class="hour">11</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="timepicker-minutes" style="display: none;">
                    <table class="table-condensed">
                        <tbody>
                        <tr>
                            <td data-action="selectMinute" class="minute">00</td>
                            <td data-action="selectMinute" class="minute">05</td>
                            <td data-action="selectMinute" class="minute">10</td>
                            <td data-action="selectMinute" class="minute">15</td>
                        </tr>
                        <tr>
                            <td data-action="selectMinute" class="minute">20</td>
                            <td data-action="selectMinute" class="minute">25</td>
                            <td data-action="selectMinute" class="minute">30</td>
                            <td data-action="selectMinute" class="minute">35</td>
                        </tr>
                        <tr>
                            <td data-action="selectMinute" class="minute">40</td>
                            <td data-action="selectMinute" class="minute">45</td>
                            <td data-action="selectMinute" class="minute">50</td>
                            <td data-action="selectMinute" class="minute">55</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </li>
    </ul>
</div>