Locating a button by className with Protractor

Question

I apologize if this is a newbie question, just starting out with web automation testing.

I want to test a login screen page. Finding the name and password textfields was easy (just used by.model), however I am having issues locating the login button with my script.

I googled around and I should be able to find an element by className using element(by.css(.className)), however this fails to work and I am always getting NoSuchElementError: No element found using locator: By.cssSelector(".btn btn-lg btn-primary btn-block").

Any idea what I am doing wrong?

Thanks you in advance,

LoginBtn HTML:

<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="loading">login</button>

My code:

describe('Test login', function() {
  var username = element(by.model('formData.email'));
  var password = element(by.model('formData.password'));
  var loginBtn = element(by.css('.btn btn-lg btn-primary btn-block'));


  beforeEach(function() {
    browser.get('some site'); //hidden on purpose
  });

  it('should have a title', function() {
        username.sendKeys(1);
        password.sendKeys(2);
        loginBtn.click();


  });


});

Answer 1

If you are checking for multiple classes, separate them with dots:

by.css('.btn.btn-lg.btn-primary.btn-block')

Though, I'd find the button by text - looks more reliable and readable:

by.xpath('//button[. = "login"]')

---

Also, think about assigning the button an id (if this is under your control) attribute to ease the testing process:

<button id="submitButton" class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="loading">login</button>

Then, it would be as easy as:

by.id('submitButton')

Answer 2

You can also use only one class to find the locator

by.css('.btn-primary')

by class name

by.className('btn-primary')