javascript - Click visible button in protractor? -

i have page looks this. it's wizard steps. depending on "step" scope variable, different part of wizard shown:

<div ng-show="step == 'first'">   <button>next</button> </div>  <div ng-show="step == 'second'">   <button>next</button> </div>  <div ng-show="step == 'third'">   <button>next</button> </div> 

to click next button run problems though. because there 3 of them. following code returns of them:

var next = element(by.buttontext('next')); 

and doing:

next.click(); 

will click first one. how can find visible button only, , click one?

first confused isdisplayed returning promise. function came with:

function clickbutton(text) {     var buttons = element.all(by.buttontext(text));     buttons.each(function(button) {         button.isdisplayed().then(function(isvisible) {             if (isvisible) {                 button.click();             }         })     }); } 

which can used this:

clickbutton('next');