Integrating Protractor testing framework into my existing AngularJS app- invalid URL when testing on VM

Question

I recently started working on an application that has been written in AngularJS, and have been tasked with setting up automated testing for the app (all of the testing that has been done as part of the development life cycle to date appears to have been done manually).

I have not used automated testing in any of my previous roles, so this is quite new to me. After doing a bit of research, and asking for recommendations on here as to what the best framework to use would be for this application, I have decided to use Protractor.

I have gone through the tutorial on their website, to get an understanding for how it works & what it does, etc, and am now looking to start integrating it into the existing application, which I appreciate/ expect will be a bit more complicated than setting up the testing framework/ suite at the start of a project, & building it in parallel with the development of the application, as I will essentially have to go back through the application (and code), and document everything that will need to be tested, how it should be tested, pass/ fail criteria, etc.

For now though, I just want to set up a couple of very simple tests to ensure that I have Protractor up and running with my app correctly. I can then look to design & implement the more thorough/ involved tests later, once I have the framework set up.

I want to set Protractor up for use within my development environment, but am having a bit of difficulty doing this... My environment is:

• Windows 10 PC
• Unix VM running CentOS 7
• Python 3.4 running the backend on the VM
• Using grunt serve to serve the front end on the VM

I am following through the tutorial again, this time trying to apply it to my existing application, so that I can start writing tests for it.

I have the conf.js file written as indicated in the tutorial:

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js'],
    multiCapabilities: {
        browserName: 'firefox'
    }
}

and have the spec.js file written as indicated in the tutorial, just with the address that the browser should point to set to the local address of my VM:

describe('My App', function() {
    it('should hit the VM hosted site', function() {
        browser.get('192.168.1.212:8080');

        //Write tests here
        //element(by.model('toolbar-btn-on')).sendKeys('write first app test');
        //element(by.css

        //Test to get app title:
        expect(browser.getTitle()).toEqual('title of my app');
    });
});

These files, & my whole application repository is stored on a network drive which I have mapped to both my local machine & the VM.

If I open a browser on the VM, and browse to localhost:8080/#/pages/login, I am presented with the log in page for my AngularJS app.

If I open a browser on my local windows machine, and browse to 192.168.1.212:8080/#/pages/login, I am presented with the same log in page for my AngularJS app, so it is clear that my app is up and running, Python is serving the back end, and Grunt is serving the front end, all working correctly.

However, when I run:

protractor conf.js

from the command line, as indicated at the end of 'Step 0 - Write a test' in the tutorial, although the browser opens & closes again very quickly, as the tutorial indicates it should, it states that the output should say:

1 tests, 1 assertion, 0 failures

but the output in my console actually shows:

[15:16:09] I/launcher - Running 1 instances of WebDriver [15:16:09] I/hosted - Using the selenium server at http://localhost:4444/wd/hub

Started

F

Failures:

1) App should hit the VM hosted site Message: Failed: invalid element state: Failed to execute 'replace' on 'Location': '192.168.1.212:8080' is not a valid URL. (Session info: chrome=60.0.3112.113) (Driver info: chromedriver=2.32.498550 (9dec58e66c31bcc53a9ce3c7226f0c1c5810906a),platform=Windows NT 10.0.15063 x86_64) Stack: InvalidElementStateError: invalid element state: Failed to execute 'replace' on 'Location': '192.168.1.212:8080' is not a valid URL.

...

1 spec, 1 failure

Finished in 0.121 seconds

[15:16:16] I/launcher - 0 instance(s) of WebDriver still running

[15:16:16] I/launcher - chrome #01 failed 1 test(s)

[15:16:16] I/launcher - overall: 1 failed spec(s)

[15:16:16] E/launcher - Process exited with error code 1

So it appears that my test doesn't like the fact that I am asking it to 'get' the browser at the VM's IP address (i.e. not my local computer's IP address). Is there a reason for this? How can I set Protractor to run my tests against a version of my application that's hosted on the VM, rather than a live site, or a version hosted on my local development machine?

Answer 1

You need to prepend a protocol to the URL:

http://192.168.1.212:8080

otherwise, from what I understand, it fails when window.location is set during the browser.get() call (source).