Finding a button by class Name using Protractor

Question

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

I want to test the login screen page. Finding the username and password text fields was easy (just by.model used), however, I am having problems finding the login button using a script.

I googled around and I have to find the element by class Name using the element (by.css (.className)), however this will not work and I always get NoSuchElementError: No element found using locator: By.cssSelector(".btn btn-lg btn-primary btn-block") .

Any idea what I'm doing wrong?

Thank you in advance

LoginBtn HTML:

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

My code is:

 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 multiple classes, separate them with dots:

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

Although, I would find a button in the text - it looks more reliable and readable:

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

---

Also consider assigning an id button (if this is your control) to the attribute to facilitate the testing process:

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

Then it will be as simple as:

 by.id('submitButton') 

Answer 2

You can also use only one class to locate a locator.

by.css('.btn-primary')

by class name

by.className('btn-primary')