Selenium Java：无法从日期选择器中选择日期

Question

我试图从自定义日期选择器中选择一个日期，但是它不起作用。

按如下所示粘贴HTML以及其外观的屏幕截图。

HTML：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-3" style="position: absolute; top: 546px; left: 331px; z-index: 1; display: block; width: 51em;">
    <div class="ui-datepicker-group ui-datepicker-group-first">
        <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
            <div class="ui-datepicker-title">
                <select class="ui-datepicker-month" data-handler="selectMonth" data-event="change">
                    <option value="0">Jan</option>
                    <option value="1" selected="selected">Feb</option>
                    <option value="2">Mar</option>
                    <option value="3">Apr</option>
                </select>&nbsp;<span class="ui-datepicker-year">2019</span></div>
        </div>
        <table class="ui-datepicker-calendar">
            <thead>
                <tr>
                    <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
                    <th><span title="Monday">Mo</span></th>
                    <th><span title="Tuesday">Tu</span></th>
                    <th><span title="Wednesday">We</span></th>
                    <th><span title="Thursday">Th</span></th>
                    <th><span title="Friday">Fr</span></th>
                    <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">1</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">25</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">26</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">27</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">28</a></td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="ui-datepicker-group ui-datepicker-group-middle">
        <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
            <div class="ui-datepicker-title"><span class="ui-datepicker-month">March</span>&nbsp;<span class="ui-datepicker-year">2019</span></div>
        </div>
        <table class="ui-datepicker-calendar">
            <thead>
                <tr>
                    <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
                    <th><span title="Monday">Mo</span></th>
                    <th><span title="Tuesday">Tu</span></th>
                    <th><span title="Wednesday">We</span></th>
                    <th><span title="Thursday">Th</span></th>
                    <th><span title="Friday">Fr</span></th>
                    <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">1</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">25</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">26</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">27</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">28</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">29</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">30</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">31</a></td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="ui-datepicker-group ui-datepicker-group-last">
        <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"><a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
            <div class="ui-datepicker-title"><span class="ui-datepicker-month">April</span>&nbsp;<span class="ui-datepicker-year">2019</span></div>
        </div>
        <table class="ui-datepicker-calendar">
            <thead>
                <tr>
                    <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
                    <th><span title="Monday">Mo</span></th>
                    <th><span title="Tuesday">Tu</span></th>
                    <th><span title="Wednesday">We</span></th>
                    <th><span title="Thursday">Th</span></th>
                    <th><span title="Friday">Fr</span></th>
                    <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class="  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default ui-state-active" href="#">1</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
                    <td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
                    <td class="  ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default ui-state-highlight" href="#">25</a></td>
                    <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">26</span></td>
                    <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
                    <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
                    <td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                </tr>
                <tr>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="ui-datepicker-row-break"></div>
</div>

我尝试过

WebElement dateWidget = driver.findElement(By.className("ui-state-default"));
List columns=(List) dateWidget.findElements(By.tagName("ui-state-default"));
for (WebElement cell: columns){
      //Select 13th Date 
      if (cell.getText().equals("13")){
            cell.findElement(By.linkText("13")).click();
            break;
      }
}

甚至尝试等待命令，以便找到定位器但没有成功。

  

WebDriverWait（驱动程序，100）.until（ExpectedConditions.elementToBeClickable（By.cssSelector

都没有用，因为它未能识别出有人可以帮助我解决这个问题。 如果可能，我们甚至可以单击上一个和下一个，以便我们也可以单击一些以前的日期？

Answer 1

您使用buildscript { repositories { jcenter() mavenCentral() google() } dependencies { classpath 'com.android.tools.build:gradle:+' classpath 'com.google.gms:google-services:3.2.0' classpath 'com.android.tools.build:gradle:3.0.1' } } // apply plugin: 'com.google.gms.google-services' // class must be used instead of id(string) to be able to apply plugin from non-root gradle file ext.postBuildExtras = { apply plugin: com.google.gms.googleservices.GoogleServicesPlugin } 时出错， ui-state-default 是未标记的类，下面的代码什么也没找到：

By.tagName("ui-state-default")

下面的代码在第一个月内返回WebElement dateWidget = driver.findElement(By.className("ui-state-default")); List columns=(List) dateWidget.findElements(By.tagName("ui-state-default")); ，文本为 13 ：

a

如果日期选择器使用driver.findElement(By.xpath("//div[@id='ui-datepicker-div']//a[.='13']")).click(); ，则可以选择上个月：

findElements

您还可以使用List<WebElement> dates = driver.findElements(By.xpath("//div[@id='ui-datepicker-div']//a[.='13']")); dates.get(2).click(); 属性：

data-month

Answer 2

使用xpath之后，您可以轻松解决问题，而无需任何麻烦

//table[@class='ui-datepicker-calendar']//td[@data-month='2']//a[.='15']

在这里，我选择月份 2 和日期 15 来选择日期。您可以更改数据月份以选择另一个。也可以使其动态。

我已经在chrome控制台中对其进行了测试，并且我的自动化脚本对其运行正常

要验证是否将以下代码粘贴到chrome控制台中，然后按inter>

$x("//table[@class='ui-datepicker-calendar']//td[@data-month='2']//a[.='15']")

它将返回第二个月的日期15的元素。