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.
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:
- Verify that the page title is ”Home Security Frontend”
- 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:
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.
Creating an MVC structured UI using Angular
Angular is a nice JavaScript framework for creating more structured web solutions and presenting data. As shown in previous post, jQuery works just as good, but some advantages of Angular are that your code is easier to read, you can piggy-back on the functionality of Angular meaning less development time, and it is meant for separating the view (i.e. your HTML) from the data handling – i.e. Model-View-Controller based (MVC).
Things you need to have a fair understanding of to follow this post
- A fair knowledge of HTML, CSS, and JavaScript
- The basics of Angular suchs ”ng directives” and ”controller”
- It’s good to check this previous post since we will go from a jQuery based solution to Angular
Breaking our web app into html, css, and JavaScript
In the end we will have an identical user interface with the same frontend functionality as we did with jQuery.
However one of the main end benefits of using Angular will be a cleaner structure when it comes to separating the presentation layer (i.e the html view) and the data handling (i.e. the Angular part). We will start by breaking our web app into three files:
- index.html – this is the clean html frontend
- sensorApp.js – this is where we implement the controller logic to update the data in the html view
- sensorApp.css – this is simply the css styles we used previously, unchanged but broken out in a separate file
Updating our index.html with adequate ng directives
We start by ”Angular-ify” our html view by adding necessary ng directives and bindings. This will allow us to use these spaces from our Angular controller to populate the html view with sensor data. We add the ”ng-app” and ”ng-controller” directives in the <html> tag, and link our css file, the Angular framework and our sensorController.js file in the <head>.
[code language=”html”]
<!DOCTYPE html>
<html ng-app="mySensorApp" ng-controller="sensorCtrl">
<head>
<title>Home Security Frontend</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery.js"></script>
<!– Bootstrap –>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!– Angular –>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="sensorController.js"></script>
<link href="sensorApp.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
…
[/code]
Next we structure the ”container” part of our html file in three sections corresponding to the Bootstrap rows: the top row, the home security status row, and the sensor boxes row.
[code language=”html”]
<div class="container">
<!– The top row for the logo and the time –>
<div class="row">
<div class="col-sm-12" id="top-bar">
<img id="yellington_logo" src="https://www.yellington.com/yellington_logo.png">
<div id="clock">{{clock | date: ’HH:mm:ss’}}</div>
</div>
</div>
<!– The home security status row –>
<div class="row">
<div class="col-sm-6 v-align" style="text-align: right;">
<span class="glyphicon glyphicon-home" id="house-image"></span>
</div>
<div class="col-sm-6 v-align" id="house-status-text"><!– keep the opening and closing div tags together to avoid white space causing line breaks in the user interface–>
<h5>Home Security Status</h5>
<h2>{{homeSecurityStatus}}</h2>
</div>
</div>
<!– The row for the sensor boxes –>
<div class="row" id="sensor-container">
<div ng-repeat="sensor in sensorData" class="col-sm-6 col-md-4 col-lg-3 sensor-outer-box">
<div class="sensor-box">
<img class="sensor-icon" ng-src={{getSensorImage(sensor.Type)}}>
<div class="sensor-data">
<h4>{{ sensor.Name }}</h4>
<h5>Status: {{ sensor.Data }}</h5>
Updated: {{ sensor.LastUpdate }}
</div>
</div>
</div>
</div>
</div><!– Container –>
</body>
</html>
[/code]
In the top row, we have added an Angular expression for binding clock data to our html, likewise in the home security status row, and in the sensor data row for sensor data. The ng-repeat directive is a neat thing that will assist us going through the retrieved sensor data from the server. The html view has no clue where this data comes from or how or when it should be updated. This logic is handled by the controller.
Adding an Angular controller for updating the data
Angular uses a ”controller” to take care of the logic for updating the data in the presentation view i.e. the html. We create a controller that looks like this and is linked together with our html file.
[code language=”javascript”]
var app = angular.module(’mySensorApp’, []);
app.controller(’sensorCtrl’, function($scope, $http, $timeout) {
var domoticzURL = "http://192.168.1.99:8080/"; //use this format if you want to place this file on another computer on your home network.
//var domoticzURL = "../"; //use this format if you place this file in a folder in the www folder on your Domoticz server.
updateSensorData(); //Start the polling of sensor data
function updateSensorData() {
//Publish the time in our user interface
$scope.clock = new Date();
//We request a list of all sensor data and loop through it to publish on our web page
$http.get(domoticzURL + "json.htm?type=devices&filter=all&used=true&order=Name")
.then(function(response) {
$scope.sensorData = response.data.result;
//We retrieve the status of the security system, basically Disarmed, Armed Away, or Armed Home
$http.get(domoticzURL + "json.htm?type=command¶m=getsecstatus")
.then(function(response) {
if (response.data.secstatus==0) $scope.homeSecurityStatus = "Disarmed";
else if (response.data.secstatus==1) $scope.homeSecurityStatus = "Armed Home";
else if (response.data.secstatus==2) $scope.homeSecurityStatus = "Armed Away";
else $scope.homeSecurityStatus = "Unknown";
$timeout(updateSensorData(), 1000); //Poll the sensor data every second
});
});
}
$scope.getSensorImage = function(sensorType){
//This function returns the image of the sensor that is stored in the image folder on your Domoticz server
//The list of sensor types can be expanded dependant on what type of sensors you have
switch(sensorType) {
case "Light/Switch":
return domoticzURL + "images/Light48_On.png";
break;
case "Temp + Humidity":
return domoticzURL + "images/temp-20-25.png";
break;
default:
return domoticzURL + "images/Light48on.png";
}
};
});
[/code]
What’s inside the curly brackets of the app.controller is the constructor of the controller class and will execute at the time of launching the web app. You will probably recognize most of the code from the jQuery version. We have an updateSensorData() function that retrieves the sensor data through http requests along with a timer to poll the server every second. The getSensorImage() is used by the html view to retrieve the corresponding url for the src attribute.
Final conclusion
Using Angular might require some time to get a feeling for how it works and how to utilize the built-in functionality. Once over that learning curve, it’s a nice framework to use. Counting the lines of code from the jQuery version and the Angular version gives us that jQuery required 142 lines of code whereas Angular required 117 – an 18% improvement. However, the biggest improvement is an increase in readability and structure and thus maintainability.
Creating a beautiful front-end for Domoticz
In a previous post (here), we created a simple front-end for Domoticz running on a Raspberry. In this post, we’ll take it a step further and style it a bit to look beautiful. It’s good if you go through the previous post first since we are going to build on that code base.
Areas you need to be familiar with to follow this post
Starting with the design
At the end of this post we want to have a design of our user interface looking like this:
Adding the Bootstrap structure to the HTML file
We have downloaded Bootstrap and extracted the folders in the folder where we have our HTML file from previous post. We add the following two lines of code to include the Bootstrap CSS and JS libraries.
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Home Security Frontend</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery.js"></script>
<!– Bootstrap –>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
[/code]
Adding rows for the Bootstrap structure
In the body of our HTML file, we add three Bootstrap rows. The first one is for adding a nice logo and a ticking clock, the second one is for adding the house icon and the status of the security panel, and the final one is for listing all the sensor information. All three rows must be wrapped in a <div> with a class labeled ”container”.
[code language=”html”]
<div class="container">
<div class="row">
<div class="col-sm-12" id="top-bar">
<img id="yellington_logo" src="https://www.yellington.com/yellington_logo.png">
<div id="clock"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 v-align" style="text-align: right;">
<span class="glyphicon glyphicon-home" id="house-image"></span>
</div>
<div class="col-sm-6 v-align" id="house-status-text"><!– keep the opening a closing div tags together to avoid white space causing line breaks in the user interface–>
</div>
</div>
<div class="row" id="sensor-container">
</div>
</div>
[/code]
The glyphicon image is part of the Bootstrap package and we will use it as our house image in the first row. The ”v-align” class will be used in the CSS/style part of our HTML file to align the house image vertically in the middle with the status text of the security panel. Keeping <div></div> on line 14 together is intentional to avoid adding any whitespace when rendering the two columns on the same row in the browser.
Expanding the JavaScript functionality
We will expand the JavaScript part of our HTML file with the following:
- Wrap the functionality of updating the sensor data in a separate function: updateSensors()
- Add a function: getSensorImage() to borrow some nice looking sensor images from Domoticz
- Add the time in the top row. This will be a ticking clock since we update the data automatically with one-second intervals
- Fetch the status of the security panel
- Finally set a timer with a one-second interval to update all data automatically.
The script code looks like this:
[code language=”javascript”]
<script>
$(document).ready(function(){
var domoticzURL = "http://192.168.1.99:8080/"; //use this format if you want to place this file on another computer on your home network.
//var domoticzURL = "../"; //use this format if you place this file in a folder in the www folder on your Domoticz server.
$(function() {
updateSensors();
});
function getSensorImage(sensorType){
//This function returns the image of the sensor that is stored in the image folder on your Domoticz server
var sensorURL = "";
//The list of sensor types can be expanded dependant on what type of sensors you have
switch(sensorType) {
case "Light/Switch":
return domoticzURL + "images/Light48_On.png";
break;
case "Temp + Humidity":
return domoticzURL + "images/temp-20-25.png";
break;
default:
return domoticzURL + "images/Light48on.png";
}
}
function updateSensors() {
var sensorInfo = "";
//First we publish the time in our user interface
var d = new Date();
var hours = d.getHours();
if (hours < 10) { hours = ’0’ + hours;}
var minutes = d.getMinutes();
if (minutes < 10) { minutes = ’0’ + minutes;}
var seconds = d.getSeconds();
if (seconds < 10) { seconds = ’0’ + seconds;}
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
//We request a list of all sensor data and loop through it to publish on our web page
$.getJSON(domoticzURL + "json.htm?type=devices&filter=all&used=true&order=Name", function(result){
for (i = 0; i < result.result.length; i++) {
sensorInfo += ’
<div class="col-sm-6 col-md-4 col-lg-3 sensor-outer-box">’+
’
<div class="sensor-box">’+
’<img class="sensor-icon" src="’ + getSensorImage(result.result[i].Type) +’">’+
’
<div class="sensor-data">’+
’
<h4>’ + result.result[i].Name + ’</h4>
’+
’
<h5>Status: ’ + result.result[i].Data + ’</h5>
’+
’
Updated: ’ + result.result[i].LastUpdate +’
’+
’</div>
’+
’</div>
’+
’</div>
’;
}
document.getElementById("sensor-container").innerHTML = sensorInfo;
//We retrieve the status of the security system, baically Disarmed, Armed Away, or Armed Home
$.getJSON(domoticzURL + "json.htm?type=command&param=getsecstatus", function(result){
var homeSecurityStatus="";
if (result.secstatus==0) homeSecurityStatus="Disarmed";
else if (result.secstatus==1) homeSecurityStatus="Armed Home";
else if (result.secstatus==2) homeSecurityStatus="Armed Away";
else homeSecurityStatus="Unknown";
document.getElementById("house-status-text").innerHTML = ’
<h5>Home Security Status</h5>
’+
’
<h2>’ + homeSecurityStatus + ’</h2>
’;
//Finally we set a timer to repeatedly poll the status of the sensors
setTimeout(updateSensors(),1000);
});
});
}
});
</script>
[/code]
Note that the final getJSON call is nested within the callback function from the first getJSON call to get the sensor data. The domoticzURL variable could either be set to the IP number of your Raspberry + port 8080 or, if you upload the HTML file in the www root of your Domoticz server, you can set it to ”../” or ”./” dependant on if you put it in a subfolder or not. If you open the HTML file in a browser it looks something like this, still not very beautiful.
Styling the user interface with CSS
For the simplicity of this post, we will put all the styling in the HTML file. You can just as well put it in a separate CSS file and include it in the <head>. We add the following styling:
[code language=”html”]
</script>
<style>
body{background-color: grey; padding: 0px 1% 0% 1%;}
.container{padding: 0px 20px 20px 20px;border-radius: 5px; background-color: white; border-style: solid; border-color: grey; border-width: 2px;box-shadow: 0px 0px 10px white;margin-top: 2%}
.row {border-bottom-style: solid; border-color: grey; border-width: 1px;}
#yellington_logo {max-width: 100px; margin: 5px; }
#top-bar{text-align: left; margin-bottom: 1px; padding: 0px;}
#clock{float: right; margin: 5px;}
.v-align {float: none; display: inline-block;vertical-align: middle;} /*class for vertically aligning elements in a row*/
#house-image{font-size: 9em; vertical-align: middle; display: inline-block; margin-top: 10px; margin-bottom: 10px;}
#house-status-text{text-align: left;}
.sensor-outer-box {padding: 0px;}
.sensor-box{padding: 0px;margin: 5px; background-color: white; box-shadow: 5px 5px 10px #888888; border-style: solid; border-color: grey; border-width: 1px; border-radius: 5px;}
.sensor-icon{vertical-align: 80%; margin: 0px;}
.sensor-data {display: inline-block; margin: 0px;}
</style>
<div class="container">
[/code]
The result is a user interface with responsive design
Thanks to Bootstrap, we automatically get a user interface with a responsive design that works just as well on a laptop and tablet as it does on a smartphone.
On a laptop:
On a smartphone:
You can play around with the style part of the file and the Bootstrap columns definitions to completely change the look and feel of the user interface to your liking.
Creating a simple web frontend for Domoticz
In this post we will create a simple web user interface for Domoticz running on a Raspberry Pi. This will allow us to check the status of our sensors and the status of the security panel of Domoticz.
In order to follow the steps we go through here, you should have a fair understanding of:
- HTML, Javascript, and jQuery (and ideally CSS)
- JSON data format
- How to upload your HTML file to your Raspberry using FTP or SFTP (useful guide)
Retrieving sensor data using JSON http request
Domoticz provides a JSON http interface for reading the sensor values remotely. Use can test it by typing a JSON http request in the address field of your web browser. If you type the below request, it should fetch all the sensor data to your browser:
192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name
The response contains a lot of information.
{
"ActTime" : 1457448022,
"ServerTime" : "2016-03-08 15:40:22",
"Sunrise" : "06:41",
"Sunset" : "17:56",
"result" : [
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CustomImage" : 0,
"Data" : "On",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 3,
---We will create an HTML file with JavaScript that extracts the information that is relevant for us. This will primarily be the sensor name, value and time when it was last updated.
Creating a basic HTML file with a JSON http request using Javascript
We start with a basic HTML file prepared with the jQuery library included. We create one <div> element with the id ”sensor-container”. It’s within this <div> we will publish the sensor data.
<!DOCTYPE html> <html> <head> <title>Home Security Frontend</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery.js"></script> </head> <body> <div id="sensor-container"> </div> </body> </html>
Next we add a simple script to publish the name, status and update time of the first of our sensors. This script uses a JSON http request to retrieve the data from your Domoticz server. The response data will be accessible through the callback function with the parameter ”result”.
<body>
<script>
$(document).ready(function(){
//We request a list of all sensor data
$.getJSON("http://192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name", function(result){
document.getElementById("sensor-container").innerHTML += '<div>'+
'<h4>' + result.result[0].Name + '</h4>'+
'<h5>Status: ' + result.result[0].Data + '</h5>'+
'<p>Updated: ' + result.result[0].LastUpdate +'</p>'+
'</div>';
});
});
</script>
<div id="sensor-container">
</div>To extract the desired data we access the ”result” array by indexing it with the number of the sensor. The number [0] corresponds to the first sensor in the array. The HMTL file with the JSON scripts gives the following output in our browser when we run it from our laptop.
Our power plug Status: On Updated: 2016-03-08 19:21:00
It’s not super beautiful but it works. The name of our first sensor is ”Our power plug”, the status in ”On” and it the information was last updated 19:21. Since we want to make our frontend work with all the sensors with have set up with Domoticz, we simply have to loop through the ”result” array given to us in the JSON http request. We update our scripts with a for loop like this.
<script>
$(document).ready(function(){
var sensorInfo = "";
//We request a list of all sensor data and loop through it to publish on our web page
$.getJSON("http://192.168.1.99:8080/json.htm?type=devices&filter=all&used=true&order=Name", function(result){
for (i = 0; i < result.result.length; i++) {
sensorInfo += '<div>'+
'<h4>' + result.result[i].Name + '</h4>'+
'<h5>Status: ' + result.result[i].Data + '</h5>'+
'<p>Updated: ' + result.result[i].LastUpdate +'</p>'+
'</div>';
}
document.getElementById("sensor-container").innerHTML = sensorInfo;
});
});
</script>This gives an output in a browser that shows the status of all our sensors.
Our power plug Status: On Updated: 2016-03-08 19:21:00 Our motion sensor Status: Off Updated: 2016-03-08 11:06:46 Temperature & Humidity Status: 22.2 C, 34 % Updated: 2016-03-08 20:16:54 Sound Siren Dummy Status: Off Updated: 2016-03-08 15:14:59
Regardless of how many sensors we have, this script will loop through them all and present their status. In an upcoming post, we’ll go through how to make this look more beautiful och also have a responsive design dependant on whether you’re using a laptop, smartphone or a tablet.