spec.js

describe('my app', function() {​

    // angular is a big framework and many still mis-used it (like doing DOM manipulation with JQuery on angular)
    // so protractor does not make to handle these mistake, but the work around will be simple
    // beforeEach suite we simple do the waitForAngular() and sleep of a half of an second.
    beforeEach(function() {
        browser.waitForAngular();
        browser.sleep(500);
    })

    it('should make the login test', function() {
        browser.get('10.0.22.82:8080/jws/fetablet').then(function() {

            var username = element(by.model('credentials.username'));
            var password = element(by.model('credentials.password'));
            var login = element.all(by.buttonText('LOGIN'));

            username.sendKeys('RET02');
            password.sendKeys('RET02');

            ClickIntoButton(login, 0); 

            // comment out the ClickIntoButton()
            // and give a try to this line of code below
            // login.first().click();
            // Explanation: there method like .first() .last() .get(number_of_index) supporting for element.all() 
            // we don't need complex work to select an element like that
        });
    });

    it('should make the tutorial test', function() {

        // the of route change happen in login will be better if it put in the next suite
        // because we will benefit the wait timers in beforeEach() and able to avoid problem with bad DOM manipulation
        expect(browser.getCurrentUrl()).toContain('/quotes');

        var tutorial = $('.introjs-nextbutton');
        tutorial.click();

    });

});


// LAST TIP 
// If you are plan to use protractor for long. You should check out with Page Object of protract
// https://github.com/angular/protractor/blob/master/docs/page-objects.md
// 
// it is great for huge testing system.