使用 Protractor element.all，如何 select 日历元素上的一天

Question

angular-ui 日期选择器 (https://angular-ui.github.io/bootstrap/#/datepicker ) 是我在 Protractor e2e 测试中 selecting 的组件。

我可以按如下方式打开日历（效果很好）：

this.calendarClick = function () {
    var sel = '.calendar .glyphicon-calendar';        
    return element(by.css(sel)).click();
};

不过，我还想select日历上的特定一天。

使用jQuery，我可以轻松select日历中的所有跨度：

$('[ng-click="select(dt.date)"] > span')

其中 returns 一个类似数组的对象：

  
0:span.ng-binding.text-muted
1:span.ng-binding.text-muted
2:span.ng-binding.text-muted
3:span.ng-binding.text-muted

我也可以用jQuery到select日历上的“01”：

$('[ng-click="select(dt.date)"] > span:contains("01")')

      [span.ng-binding, span.ng-binding.text-muted]

但是使用 Protractor，如何 select 日历上的特定日期元素？

我在想这样的事情，只需点击第一天的元素：

element.all(by.css('[ng-click="select(dt.date)"] > span')).then(function (el) {
      console.log(el[0]);                            
      el.first().click();
 });

但它抛出错误：

   TypeError: el.first is not a function

不胜感激...

此致，鲍勃

Answer 1

使用定位器 by.cssContainingText 获取包含文本“01”的元素：

element(by.cssContainingText('[ng-click="select(dt.date)"] > span', '01'))
  .click();

或.get通过索引获取元素：

element.all(by.css('[ng-click="select(dt.date)"] > span'))
  .get(0)
  .click();

或.first获取第一个元素：

element.all(by.css('[ng-click="select(dt.date)"] > span'))
  .first()
  .click();

Answer 2

您可以使用您在问题中提到的相同 jquery 选择器来单击该元素。

$('[ng-click="select(dt.date)"] > span:[text="01"]').click()

使用 Protractor element.all，如何 select 日历元素上的一天

Using Protractor element.all, how to select a day on a calendar element

protractor

e2e-testing