量角器 AngularJS mouseOver 字段以显示隐藏的按钮以单击答案

【问题标题】：Protractor AngularJS mouseOver field to reveal hidden buttons to click量角器 AngularJS mouseOver 字段以显示隐藏的按钮以单击
【发布时间】：2015-07-15 01:25:49
【问题描述】：

我是量角器的新手。我试图将鼠标悬停在将显示隐藏图标以单击的字段上。有一个“预订”列表（有时只有 1 个，有时很多），将鼠标悬停在上面时会显示一个按钮，该按钮将编辑或删除该预订。我在过滤预订时遇到问题，我想将鼠标悬停在字段上以显示删除或编辑按钮。

<div class="list-view-container">
  <div class="list-view-header">
    <div class="col-sm-3 col-md-3 column-item" ng-click="bookingsCtrl.changeBookingSort(bookingsCtrl.sortColumns.postAs)">Booking Name <span class="booking-icon" ng-show="bookingsCtrl.bookingSort === bookingsCtrl.sortColumns.postAs" ng-class="bookingsCtrl.bookingSortReverse? 'icon-down':'icon-up'"></span>
    </div>
    <div class="col-sm-2 col-md-2 column-item" ng-click="bookingsCtrl.changeBookingSort(bookingsCtrl.sortColumns.startDate)">Start Date <span class="booking-icon" ng-show="bookingsCtrl.bookingSort === bookingsCtrl.sortColumns.startDate" ng-class="bookingsCtrl.bookingSortReverse? 'icon-down':'icon-up'"></span>
    </div>
    <div class="col-sm-2 col-md-2 column-item" ng-click="bookingsCtrl.changeBookingSort(bookingsCtrl.sortColumns.endDate)">End Date <span class="booking-icon" ng-show="bookingsCtrl.bookingSort === bookingsCtrl.sortColumns.endDate" ng-class="bookingsCtrl.bookingSortReverse? 'icon-down':'icon-up'"></span>
    </div>
    <div class="col-sm-2 col-md-2 column-item" ng-click="bookingsCtrl.changeBookingSort(bookingsCtrl.sortColumns.ownerName)">Owner <span class="booking-icon" ng-show="bookingsCtrl.bookingSort === bookingsCtrl.sortColumns.ownerName" ng-class="bookingsCtrl.bookingSortReverse? 'icon-down':'icon-up'"></span>
    </div>
    <div class="col-sm-2 col-md-2 column-item" ng-click="bookingsCtrl.changeBookingSort(bookingsCtrl.sortColumns.bookingStatus)">Status <span class="booking-icon" ng-show="bookingsCtrl.bookingSort === bookingsCtrl.sortColumns.bookingStatus" ng-class="bookingsCtrl.bookingSortReverse? 'icon-down':'icon-up'"></span>
    </div>
    <div class="col-sm-1 col-md-1 column-item"></div>
  </div>
  <div class="list-item-row" ng-repeat="booking in bookingsCtrl.bookings track by booking.bookingId" ng-click="bookingsCtrl.selectBooking(booking)">
    <div class="col-xs-3 col-sm-3 col-md-3">
      <div class="list-item-name" ng-bind="booking.postAs"></div>
      <div ng-if="bookingsCtrl.isMultipleVenues" ng-bind="bookingsCtrl.getVenueName(booking)"></div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 list-item" ng-bind="booking.startDate | date: 'shortDate'"></div>
    <div class="col-xs-2 col-sm-2 col-md-2 list-item" ng-bind="booking.endDate | date: 'shortDate'"></div>
    <div class="col-xs-2 col-sm-2 col-md-2 list-item" ng-bind="bookingsCtrl.ownerName(booking)"></div>
    <div class="col-xs-2 col-sm-2 col-md-2 list-item" ng-bind="bookingsCtrl.statuses[booking.bookingStatus]"></div>
    <div class="col-xs-1 col-sm-1 col-md-1 list-icon-container">
      <div class="list-icon" ng-click="bookingsCtrl.deleteBooking(booking.bookingId)" stop-event>
        <span class="booking-icon icon-delete"></span>
      </div>
      <div class="list-icon" ng-click="bookingsCtrl.editBooking(booking.bookingId)" stop-event>
        <span class="booking-icon icon-gear"></span>
      </div>
    </div>

以下是我所拥有的，我相信我还有很长的路要走。我将预订名称本身设置为 elementText，但它以唯一 ID 存储在数据库中。任何帮助都会很棒。

if (elementText == bookingName1) {
  console.log('Found booking: ' + elementText);
  //bookingToEdit = bookingList.get(i);
  var list - element = element.all(by.click('bookingsCtrl.selectBooking(bookingName1)')).first();
  browser.actions().mouseMove(list - element).perform();
}

【问题讨论】：

标签： angularjs protractor mouseover

【解决方案1】：

据我了解，这是filter() 的一个用例：

var desiredBooking = element.all(by.exactRepeater("booking in bookingsCtrl.bookings")).filter(function (booking) {
    return booking.evaluate("booking.postAs").then(function (bookingName) {
        return bookingName === desiredBookingName;
    });
}).first();

// delete it
desiredBooking.element(by.css("div[ng-click*=deleteBooking]")).click();

假设booking.postAs 是一个预订名称。

【讨论】：