How can i identify element by model or by name in this the following example?

Question

I 'm using protractor to automate my tests, in order to click into the login button the action couldn't be executed when i tried to identify element by name, xpath, id ...

element(by.name('Login')).click();

It works only when i identify it by css :

element(by.css('.login-button')).click();

or

  element(by.css('button[ng-disabled=clicked]')).click();

But the problem the test is passed and user isn't redirected to home page even if i put browser.sleep(8000); Is the login button identified by the right way with element(by.css('button[ng-disabled=clicked]')).click(); ?

You can find here the html code :

 <md-button type="submit" class="md-raised login-button" ng-disabled="clicked" translate="login.LOGIN">Login</md-button> </section>

 </div> </fieldset> </form> <md-divider></md-divider> <footer class="login-footer"> <div layout="row" layout-align="center center"> <md-button ng-click="goToCustomerCare()" class="login-footer-link" translate="login.CUSTOMER_CARE">Contact Customer Care</md-button> <div> | </div> <md-button ng-click="showDisclaimer()" class="login-footer-link" translate="login.DISCLAIMER">Disclaimer</md-button> </div> </footer> </div>

Answer 1

There are a few buttons in the HTML code that you posted, but if you are trying to click the login button, you should be able to do

$('.md-raised').click(); or $('.md-raised.login-button').click();

This should search for the element by class.