Automated web test using Protractor

Protractor is a neat test framework for AngularJS apps and since the web app we made in previous post is made using Angular, we’re going to create a simple Protractor test. You find the previous post here.

What do you need to start using Protractor

  • An Angular based web app uploaded to a web server. We’ll be using the Angular app we made in previous post.
  • Protractor is a Node.js program so you will have to have Node.js installed. You can download it here if you haven’t installed it.

Uploading our Angular web app to the Domoticz server

Since Protractor is made for testing web apps located on remote web servers, we upload our Angular web app to the Domoticz server in the ”www” directory in a folder we call ”angular_frontend”. For this we use a SFTP client (FileZilla) on our laptop and upload our CSS, fonts, img, JS folders along with the index, sensorApp.css and sensorController.js files.

angular_frontend

Installing Protractor

Make sure you have Node.js installed on the laptop by typing ”node –version” in a Terminal window. If you have Node.js installed it will print out the version number you have. To install Protractor type the following:

npm install -g protractor

This will install Protractor and the Webdriver Manager. You can test your Protractor installation by typing ”protractor –version”. Next type:

webdriver-manager update

Writing the Protractor test

We will write two files to create the Protractor test: one spec.js and one conf.js. Place these two files in the same directory on your laptop. Our conf.js file looks like this:

[code language=”javascript”]
exports.config = {
framework: ’jasmine’,
seleniumAddress: ’http://localhost:4444/wd/hub’,
specs: [’spec.js’],
}
[/code]

In the conf file you can add a lot more configuration parameters but in this case we stick with the basics. The ”seleniumAddress” parameter specifies the local web address we will use when running our test. The ”specs” parameter tells Protractor where to find the test file i.e. ”spec.js”. Our spec.js file looks like this:

[code language=”javascript”]
describe(’Test of Home Security Frontend’, function() {
it(’should verify the title and count the sensors’, function() {
browser.get(’http://192.168.1.99:8080/angular_frontend/index.html’);

expect(browser.getTitle()).toEqual(’Home Security Frontend’);

var sensorlist = element.all(by.repeater(’sensor in sensorData’));
expect(sensorlist.count()).toEqual(4);

});
});
[/code]

It will retrieve the ”index.html” file from the Domoticz web server and run two tests:

  1. Verify that the page title is ”Home Security Frontend”
  2. Count the sensor boxes and verify that all four sensor are loaded (including the dummy sensor)

The ”spec.js” file can be expanded with simulated user actions such as clicking on buttons and typing in text boxes. For more references how to use Protractor go to angular.github.io/protractor/.

Running the test

Before we run our test, we need to change the $timeout function to $interval in the sensorController.js file. This is because Protractor will timeout if using the $timeout repeatedly. In the Angular controller services listing, replace $timeout with $interval:

[code language=”js”]app.controller(’sensorCtrl’, function($scope, $http, $interval) {[/code]

Next, replace the call to $timeout with $interval and set the repeat count to 1:

[code language=”js”]//$timeout(updateSensorData(), 1000); //Poll the sensor data every second
$interval(updateSensorData, 1000, 1); //Poll the sensor data every second[/code]

Save and upload the sensorController.js file to the Domoticz web server. Now we’re ready to run the test. Open a Terminal window and type:

webdriver-manager start

This will start the Selenium server that will be used for the Protractor test. Let the server run in this Terminal window and open another Terminal window. Run the Protractor test by typing:

protractor {path to your conf.js file}/conf.js

The output of a successful test looks like:

protractor_output

You can try running the test with intentionally wrong test criteria such as misspelt page title or incorrect number of sensors, just to see how a test result looks like with failed tests. You find all the source code at gitlab.com/yellington.