Testing angularjs site with protractor
Intro:- Testing angularjs site with protractor
What is angularjs?
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. [Ref]
Testing is an integral part of any software development. Testing ensures software quality and robustness. It’s categorized mainly into manual and automation. Manual testing plays a key role for testing things which cannot be automated by a bot and are not repetitive. Any repetitive stuff which needs a lot of time doing it manually is a good candidate for automation. For automation testing we have a wide array of libraries available like mocha, chai, jasmine, karma and protractor which is widely used for testing angularjs sites. However, protractor can also be used for testing non angularjs sites.
This blog will talk more about the setup needed for Test driven development for angularjs sites. These days all web apps rely heavily on node.js npm package management tools for creating the run-time environment as well as dependency injection. Node can be downloaded from here.
Next most popular tool is either grunt or gulp which is used to automate the build process. grunt can be installed from command prompt using the following command:-
npm install grunt -g and npm install grunt-cli -g.
To run the tests, we also need the following to be installed:-
selenium web driver manager which can be installed from node command prompt with the following command:-
npm install webdriver-manager –save-dev
Last but not the least, we need protractor which can be installed using the following
npm install protactor -g
The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a gruntfile used in the project. This allows multiple versions of Grunt to be installed on the same machine simultaneously. We need to write a gruntfile.js in the project directory which will have all the commands needed to build/deploy/minify/test the app as needed.
Below is a simple gruntfile.js
The above gruntfile is written only for automating the tests as this blog is about TDD. It doesn’t involve any tasks related to concatenation, minification etc of the js/css files as obviously they are not a part of this gruntfile.
Grunt file uses the following packages which need to be installed if they are not already present
npm install grunt-contrib-watch – to keep an eye on project files which get changed and making sure that the latest code is always deployed.
npm install grunt-shell – used to execute commands in the command prompt.
npm install grunt-bg-shell – used to execute commands in background in the command prompt.
To run the test cases, following commands need to be run
Start the selenium web driver server using the command
<span class="token string">webdriver-manager start</span>
and then run the tests using the command
<span class="token string">protractor path to conf.js</span>
The above 2 commands are clubbed together in gruntfile and when the above gruntfile is executed it will take care of both the above commands. tests is the project directory where the test scripts are placed and conf.js contains config parameters for the selenium server as well as the test script file which contains all the tests. Below are the conf.js files and snapshot of the tests which will be executed by the grunt command given at command prompt.
Below is a sample test script file which tests an angularjs app which searches people from a people directory. The angularjs app is hosted here.
The test scripts runs various test cases (UI ans JS) and matches the expected results with the actual obtained results and outputs test case pass/fail based on the outcome.
The high level explanation of the above test suite is as below:-
- It checks the UI (sequence of the icons shown on the screen in the app)
- Runs various search queries one by one and compares the actual and expected results. This is achived by DOM manipulation through different css selectors by launching the app in browser.
Below are videos of the test automation in action which will summarize this blog.
We will see how protractor can be used for testing non angularjs site in next part of this blog. Github repo for this angular app along with the test suite is here