切换到日期选择器并单击下个月

Question

<button class="mat-calendar-next-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Next month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button>

<mat-calendar class="mat-calendar ng-trigger ng-trigger-fadeInCalendar" cdktrapfocus="" ng-reflect-enabled="" ng-reflect-start-view="month" id="mat-datepicker-0" style="opacity: 1;"><!--bindings={
  "ng-reflect-portal": "[object Object]"
}--><mat-calendar-header class="ng-star-inserted" style=""><div class="mat-calendar-header"><div class="mat-calendar-controls"><button cdkarialive="polite" class="mat-calendar-period-button mat-button" mat-button="" type="button" ng-reflect-politeness="polite" aria-label="Choose month and year"><span class="mat-button-wrapper">FEB 2019<div class="mat-calendar-arrow"></div></span><div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button><div class="mat-calendar-spacer"></div><button class="mat-calendar-previous-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Previous month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button><button class="mat-calendar-next-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Next month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button></div></div></mat-calendar-header><div cdkmonitorsubtreefocus="" class="mat-calendar-content" tabindex="-1" ng-reflect-ng-switch="month"><!--bindings={
  "ng-reflect-ng-switch-case": "month"
}--><mat-month-view ng-reflect-active-date="Sun Feb 10 2019 16:39:30 GMT+0" class="ng-star-inserted" style=""><table class="mat-calendar-table"><thead class="mat-calendar-table-header"><tr><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><th aria-label="Sunday" class="ng-star-inserted">Su</th><th aria-label="Monday" class="ng-star-inserted">Mo</th><th aria-label="Tuesday" class="ng-star-inserted">Tu</th><th aria-label="Wednesday" class="ng-star-inserted">We</th><th aria-label="Thursday" class="ng-star-inserted">Th</th><th aria-label="Friday" class="ng-star-inserted">Fr</th><th aria-label="Saturday" class="ng-star-inserted">Sa</th></tr><tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr></thead><tbody aria-readonly="true" class="mat-calendar-body" mat-calendar-body="" role="grid" ng-reflect-label="FEB" ng-reflect-rows="[object Object],[object Object" ng-reflect-today-value="10" ng-reflect-label-min-required-cells="3" ng-reflect-active-cell="9"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><tr role="row" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "5"
}--><td aria-hidden="true" class="mat-calendar-body-label ng-star-inserted" colspan="5" style="padding-top: 7.14286%; padding-bottom: 7.14286%;">FEB</td><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 1, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">1</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 2, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">2</div></td></tr><tr role="row" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 3, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">3</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 4, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">4</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 5, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">5</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 6, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">6</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 7, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">7</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 8, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">8</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 9, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">9</div></td></tr><tr role="row" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><td class="mat-calendar-body-cell mat-calendar-body-active ng-star-inserted" role="gridcell" tabindex="0" aria-label="February 10, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content mat-calendar-body-today">10</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 11, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">11</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 12, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">12</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 13, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">13</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 14, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">14</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 15, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">15</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 16, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">16</div></td></tr><tr role="row" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 17, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">17</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 18, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">18</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 19, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">19</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 20, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">20</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 21, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">21</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 22, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">22</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 23, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">23</div></td></tr><tr role="row" class="ng-star-inserted"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 24, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">24</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 25, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">25</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 26, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">26</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 27, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">27</div></td><td class="mat-calendar-body-cell ng-star-inserted" role="gridcell" tabindex="-1" aria-label="February 28, 2019" aria-selected="false" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;"><div class="mat-calendar-body-cell-content">28</div></td></tr></tbody></table></mat-month-view><!--bindings={
  "ng-reflect-ng-switch-case": "year"
}--><!--bindings={
  "ng-reflect-ng-switch-case": "multi-year"
}--></div></mat-calendar>

我有一个日期选择器，其中包含代码 sn-p 中提到的元素。此日期选择器会在弹出的对话框中打开。弹出的对话框由 element(by.css('.mat-dialog-container'));

但是，我无法单击“下个月”并从此日历中选择日期。任何帮助都会很棒！

Answer 1

1.先了解webtable的概念。我希望你先了解一下 mukesh otwani 的动态日历手柄教程然后在这里应用相同的逻辑 2.点击日历图标 3.点击导航链接 4.点击日期 避免使用 element .all 循环并选择您将获得过时元素引用错误的日期 5.使用量角器官方网站的过滤器概念单击一个元素，而不是遍历每个元素并单击 6.确保将日期作为参数传递，而不是对日期进行硬编码。 试试这个如果不是我会分享你的代码来克服这个。

Answer 2

使用这个：

 const EC = protractor.ExpectedConditions;

        const calendar = element(by.tagName('mat-datepicker-toggle'));
        browser.wait(EC.visibilityOf(calendar), 50000);
        calendar.click();
        const next = element(by.className('mat-calendar-next-button'));
        browser.wait(EC.visibilityOf(next), 50000);
        next.click();