Testing angularjs site with protractor
0
/
2066
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.jsID provided is not a Gistpen repo.
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-contrib-jshint – to check javascript code syntax and semantics.
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
1 | <span class="token string">webdriver-manager start</span> |
1 | <span class="token string">protractor path to conf.js</span> |
- 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.