I'm using Protractor to test a system made in Angularjs and Material, I'm having problems with the locator when I want to get a specific md-button on a form and execute the click (). The button's hmtl is this:
<md-card-actions layout="column" layout-align="center center" layout-wrap layout-sm="column">
<md-button
ng-disabled="!loginForm.$valid || Login.inProgress"
class="md-raised lightBlue buttonLogin"
type="submit"
aria-label="{{'login.enter' | translate}}"
ng-click="Login.login(authForm)">
<span translate="login.enter"></span>
<md-progress-linear
md-mode="indeterminate"
ng-show="Login.inProgress">
</md-progress-linear>
</md-button>
<md-button ng-click="Login.fbLogin()" aria-label="{{'login.loginFacebookLink' | translate}}" class="md-raised md-primary lightBlue">
<md-icon md-svg-src="icons/facebook_.svg"></md-icon>
<span translate="login.loginFacebookLink"> </span>
</md-button>
<md-button class="md-raised md-warn md-hue-2" aria-label="{{'login.forgotPasswordLink' | translate}}" ng-click="Login.buttonCallForgotPassword();">
<span translate="login.forgotPasswordLink"> </span>
</md-button>
</md-card-actions>
Test code snippet:
var button = element.all(by.css('button.lightBlue')).first();
button.click();
I've put the first () only to get the first button, but I do not know if the first button it lists is the login.
I need to get the first button, sometimes the alert saying that it has more than one button and executed in the first one, however, as I will have to test the three buttons I need to know which one I am using. How do I get a button specific when I use md-button?