【问题标题】:I am unable to click on datepicker element in protractor, how to click on date if the field is non-editable?我无法单击量角器中的 datepicker 元素,如果该字段不可编辑,如何单击日期?
【发布时间】:2017-10-11 08:50:29
【问题描述】:

DatePicker 字段不可编辑,我无法使用 sendkeys 发送数据。唯一的方法是点击日期。我尝试了很多选择,但没有任何效果。

我想点击明天的日期,即今天+1 日期。请看这段代码:

    <input id="asOfDate" name="asOfDate" placeholder="Enter Date" readonly="true" ng-model="asOfDate" class="form-control date-picker asOfDate ng-pristine ng-valid ng-valid-pattern ng-touched" type="text" ng-pattern="/^([0]?\d{1}|[1][0-2])\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([1-9]{1}\d{3}))$/" style="">
#addeventModal > div > div > div.modal-body.modal-body-height > form > div.row > div > div > span
<span ng-show="AddTimeLine.asOfDate.$error.pattern" class="text-danger ng-hide">Incorrect Format, should be MM/DD/YYYY</span>

<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="cw">&nbsp;</th>
<th class="prev" style="visibility: visible;">
«</th>
<th colspan="5" class="datepicker-switch">October 2017</th>
<th class="next" style="visibility: visible;">»</th>
</tr>

<tr>
<th class="cw">&nbsp;</th>
<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 class="cw">39</td>
<td class="old day">24</td>
<td class="old day">25</td>
<td class="old day">26</td>
<td class="old day">27</td>
<td class="old day">28</td>
<td class="old day">29</td>
<td class="old day">30</td>
</tr>
<tr>
<td class="cw">40</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="cw">41</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="cw">42</td>
<td class="day">15</td><td class="day">16</td>
<td class="day">17</td><td class="day">18</td><td class="day">19</td>
<td class="day">20</td><td class="day">21</td></tr>
<tr><td class="cw">43</td><td class="day">22</td>
<td class="day">23</td><td class="day">24</td>
<td class="day">25</td><td class="day">26</td>
<td class="day">27</td><td class="day">28</td>
</tr><tr><td class="cw">44</td><td class="day">29</td>
<td class="day">30</td><td class="day">31</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
<td class="new day">4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="8" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div>

如何为此编写代码?

【问题讨论】:

  • 我无法打开图片。也请附上html代码。
  • 这里不要添加代码图片,而是在问题中添加代码
  • 已经尝试过这段代码,也尝试过评估选项,但这些都不起作用 var today = new Date(); var dd = 今天.getDate() + 1; var mm = today.getMonth()+1; var yyyy = today.getFullYear();
  • 你问的不清楚。
  • 抱歉,我说的内容不清楚。我正在尝试单击日期选择器日历上的日期。为此,我使用了上述方法。但它不起作用。 Datepicker 字段不可键入,唯一的方法是单击日期。我无法使用 .sendKeys() 发送数据。所以请通过参考上面的代码帮助我点击日期。

标签: javascript angularjs datepicker protractor


【解决方案1】:

Add days to JavaScript Date

在上述问题的帮助下增加一天

在那之后恢复一天

var day = todayTime.getDate();

由于您只会显示一个月,因此所有日期都是唯一的。 所以你的 xpath 会是

//td[@class="day"][text()=day]

你应该可以点击下面的代码

WebElement button = driver.findElement(By.xpath("//td[@class="day"][text()=day]
"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click();", button);

我建议使用 javascript 执行器,因为可能会有覆盖窗口

【讨论】:

  • 您是如何获得网址的? //td[@class="day"][text()="7"] 日期应替换为给定日期
【解决方案2】:
browser.executeScript("arguments[0].click();",element(by.xpath("[//td[@class="day"][text()=day]")).getWebElement());

Ps : 这里将当前日期作为日期变量传递。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-11
    • 2020-09-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多