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

Question

我是量角器的新手。我试图将鼠标悬停在一个将显示隐藏图标以供单击的字段上。有一个列表 'Bookings'（有时只有 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();
}

Answer 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 是预订名称。

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

Protractor AngularJS mouseOver field to reveal hidden buttons to click

mouseover

angularjs

protractor