How to locate an ion-option-button in a list using Protractor

I don’t seem to get the ion-item to make the ion-option-button visible so that protractor can click the button.

enter image description here

This is what I tried using protractor --elementExplorer:

browser.actions().dragAndDrop(
(element.all(by.repeater('item in items')).get(0)), { x: 500, y: 0 })
.perform();

But it only highlights the item but does not show the ion-option-button. Also tried:

browser.actions().mouseDown().mouseMove(
(element.all(by.repeater('item in items')).get(0)), { x: 500, y: 0 })
.perform();

It also does not work. Any clues?

You can use ion-list and ion-item on your code. Take a look at my pen :

http://codepen.io/harked/pen/oXoXEO

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
    <div class="card" ng-repeat="item in items">
      <ion-item item="item" href="#/item/{{item.id}}" class="item-remove-animate">Number {{ item.id }}
        <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
        <ion-option-button class="button-assertive" ng-click="edit(item)">Edit</ion-option-button>
        <ion-option-button class="button-balanced" ng-click="share(item)">Share</ion-option-button>
        <ion-option-button class="button-energized" ng-click="share(item)">Like</ion-option-button>
        <ion-option-button class="button-royal" ng-click="share(item)">+1</ion-option-button>
      </ion-item>
    </div>
  </ion-list>