Testing AngularJS with Protractor - angularjs

Question

I am working on the development of an AngularJS app, and have recently been asked to look at integrating some automated testing into our development process. I have not used automated testing at all before, so am still getting to grips with it.
The framework that I have decided to use is Protractor, and I'm just looking at starting to write some basic tests, however, I'm having a bit of trouble getting hold of some of the HTML elements from within the spec.js file where my tests will be written. I have the following describe block in spec.js:
describe('My App', function() {
var loginForm = element(by.id('loginForm'));
var loginBtn = element(by.className('form-control'));
var usernameInputField = element(by.id('inputName'));
var passwordInputField = element(by.id('inputPass'));
it('should hit the VM hosted site', function() {
browser.get('http://192.168.x.xyz:8080');
expect(browser.getTitle()).toEqual('My app');
});
//Test to log in:
it('should enter the username into the username field on log in form', function() {
usernameInputField.sendKeys('username');
passwordInputField.sendKeys('password');
expect(loginForm.usernameInputField).toEqual("admin");
expect(loginForm.passwordInputField).toEqual("password");
});
});
My conf.js file currently looks like this:
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
multiCapabilities: {
browserName: 'firefox'
}
}
When I run the command protractor conf.js from the command line, I get some output that says:
Failed: No element found using locator: By(css selector, "[id="loginForm.inputName"])
I have 'inspected' the input field for the username on the form in the browser, and it shows that the HTML element's 'name' attribute is 'inputName', and that that element is nested within the loginForm element.
I don't understand why the console is giving me the error that says it's trying to find the element using a 'CSS selector'- I'm expecting it to try and find the element by it's HTML tag's 'name' attribute... Clearly I'm doing something wrong in how I'm writing the 'test to log in', because if I comment that out, and run protractor conf.js again, I get 0 failures- so the other test is running successfully...
What am I doing wrong here? How can I get the form input fields and enter correct log in details into them to check that the 'log in' feature works correctly?
As an aside, although I will want to test the 'log in' capability too, is there a way to 'skip' this during testing, so that I can run the tests on all of the features of the app, without Protractor having to log in to the app every time to run the tests?
Edit
I've changed the variable definition of the form elements that I want to get, so that they're now:
var loginBtn = element(by.className('form-control.submit'));
var usernameInputField = element(by.id('loginForm.inputName'));
var passwordInputField = element(by.id('loginForm.inputPass'));
and have also changed the test to:
it('should enter the username into the username field on log in form', function() {
usernameInputField.sendKeys('username');
passwordInputField.sendKeys('password');
loginBtn.by.css('button.button.primary').click();
expect(loginForm.usernameInputField).toEqual("username");
expect(loginForm.passwordInputField).toEqual("password");
});
and this seems to have cleared up the No element found using locator... error message that I was getting. However, I'm now getting another error that says:
Failed: Cannot read property 'css' of undefined
on the line:
loginBtn.by.css('button.button.primary').click();
I don't understand why this is... Can anyone explain what I'm doing wrong here? How would I resolve this error?

Answer 1

This is where Your test fails:
loginBtn.by.css('button.button.primary').click();
You should change it into:
loginBtn.click()

Answer 2

Try replacing
var loginBtn = element(by.className('form-control.submit'));
by
var loginBtn = element.all(by.css('.form-control.submit')).get(0);