View source for Protractor and node.js automation suite for Crimson Login Page

[[Curriculum_Vitae_-_Vincent_Dirks#New_things_I.27m_learning_and_trying_out|<< return to main page]]

I wanted to have a practice at writing a Protractor automation suite using node.js and the jasmine test framework. I decided to use these when I was asked to automate some checks on the [https://crimson-accounts-staging.herokuapp.com/login Crimson Test Login Page]

Protractor is intended to be used for testing Angular applications but it is possible to also use it for non-angular pages like the Crimson login page as long as you include the command 

<code>browser.ignoreSynchronization = true;</code>

To begin with I did have some trouble waiting in the code for the new page to load before checking the asserts but with a bit more googling managed to work it out. 

<pre>
    //Wait for the url to change
    var currentUrl;
    browser.getCurrentUrl().then(function(url) {
            currentUrl = url;
        }
    ).then(function() {
            browser.wait(function() {
                return browser.getCurrentUrl().then(function (url) {
                    return url !== currentUrl;
                });
            });
        }
    ).then(function () {
        // continue testing after the url has changed
        
        //Confirm the new url
        expect(browser.getCurrentUrl()).toEqual("https://crimson-accounts-staging.herokuapp.com/");
        
        //Confirm the details shown are for the correct person
        expect(welcomeMsg.getText()).toEqual('WELCOME, MATT OTTO!');
        element.all(by.css('td')).then(function(items) {
          expect(items.length).toBe(5);
          expect(items[0].getText()).toBe('Matt');
          expect(items[1].getText()).toBe('Otto');
          expect(items[2].getText()).toBe('crimsontest@mailinator.com');
          expect(items[3].getText()).toBe('Yes');
          expect(items[4].getText()).toBe('2nd August 2016');
        });
    });
</pre>
:The .then() functions still confuse me a bit, especially when passing parameters into the then method. 
----
The suite performs the following checks
#it('should have a title', function() {
#it("should authenticate a valid user's credentials", function() {
#it('should show an error when a user attempts to login with an invalid password', function() {
#it('should show an error when a user attempts to login with invalid email address', function() {
#it('should show an error when a user attempts to login with invalid email and password', function() {
#it('should show blocked account error msg when a user attempts to login with the same invalid email address more than 10 times', function() {
#it('should show error for missing email address', function() {
#it('should show error for email address with incorrect format', function() {
#it('should show error for missing password', function() {
#it('should go to new page when user clicks Forgot your password link', function() {
----
I mainly used CSS to find the elements rather than XPATH. (I need to do a bit of a learning session on XPATH soon. )
----
You can have a look at my code (I would love some feedback from a dev, I'm rather new to writing code)
*[http://dirksonline.net/ProtractorFun/conf.js conf.js] (Protractor configuration)
*[http://dirksonline.net/ProtractorFun/spec.js spec.js] (Test scripts)
*[http://dirksonline.net/ProtractorFun/protractor.log protractor.log] (sample log file generated when run )
*[http://dirksonline.net/ProtractorFun/conf.js conf.js] (Protractor configuration)
----
The code could do with some dev review, personally the following is little ToDo list of things that I think would be good to consider doing next. 
* Get an IDE setup for protractor/javascript with code completion
* create method to wait for URL to change
* Extract string constants
* Create page class/object
* Create base URL constant
* Convert to use BDD (Gherkin syntaxt) or look for appropriate tool
* Fix up indentation
----
[[Curriculum_Vitae_-_Vincent_Dirks#New_things_I.27m_learning_and_trying_out|<< return to main page]]