{"id":2568,"date":"2017-06-08T11:27:47","date_gmt":"2017-06-08T05:57:47","guid":{"rendered":"https:\/\/code4developers.com\/?p=2568"},"modified":"2017-06-27T01:57:06","modified_gmt":"2017-06-26T20:27:06","slug":"angularjs-application-end-to-end-testing-with-protractor-tool-part-1","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angularjs-application-end-to-end-testing-with-protractor-tool-part-1\/","title":{"rendered":"AngularJS Application End to End Testing with Protractor Tool : Part 1"},"content":{"rendered":"<p><strong>What is End to End Testing?<\/strong><\/p>\n<p>End to End Testing is used to determine the performance of application as per requirement. For large and complex applications manual testing is not sufficient to verify the correctness of new features, catch bugs and notice regression. To resolve issue of integration between components End to End tests are made.<!--more-->The purpose of End to End testing is to verify flow of an application from start to end. Hence, the name End to End.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Using Protractor<\/strong><\/p>\n<p>Protractor, officially known as <strong>End to End Testing<\/strong> framework. It is open source functional automation framework that is used to test AngularJs web applications.<\/p>\n<p>Protractor is a \u201c<strong>Node.js<\/strong>\u201d Program. It runs End To End tests that are written in JavaScript. Protractor uses \u201cJasmine\u201d test framework and it is default inbuilt framework that comes with protractor by default.<\/p>\n<p>Protractor will set up test using a local standalone selenium server that is used to control browsers. To run this server it requires <strong>\u201cJava Development Kit (JDK)\u201d<\/strong> to be installed. To get instance of running selenium server protractor has provided <strong>\u201cWebdriver-Manager\u201d<\/strong> helper tool that comes with protractor as default tool.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Prerequisites &amp; Installation<\/strong><\/p>\n<p><span style=\"text-decoration: underline;\">Prerequisites<\/span><\/p>\n<ul>\n<li>Node.js Source Code (Latest Version)<\/li>\n<li>Java Development Kit(JDK)<\/li>\n<\/ul>\n<p><u>Installation<\/u><\/p>\n<p><strong>Step 1:\u00a0Install Node.Js<\/strong><\/p>\n<ol>\n<li>Download the windows installer of Node js\u00a0from\u00a0<a href=\"http:\/\/nodejs.org\/download\" target=\"_blank\" rel=\"noopener\">http:\/\/nodejs.org\/download<\/a><\/li>\n<li>Follow the steps to install Node js from\u00a0http:\/\/blog.teamtreehouse.com\/install-node-js-npm-windows<\/li>\n<li>To test Node js installation properly open command prompt and execute any single command <strong>&#8220;node \u2013version&#8221;<\/strong> or <strong>&#8220;node \u2013v&#8221;.\u00a0<\/strong>This should print version number of node. So you will see something like v4.5.0 (i.e. latest installed version of node in your computer)<\/li>\n<li>Once Node js is installed properly, make sure its path configured correctly, so that command execution can Find Node.\n<ul>\n<li>To check path configuration open \u2018Advanced System Settings\u2019 by selecting \u2018properties\u2019 option of \u2018My Computer\u2019.<\/li>\n<li>Check System Variables having \u2018Path\u2019 variable with its configure value i.e \u2018C:\\Program Files\\nodejs\\\u2019 (This value is added in \u2018Path\u2019 variable once Node.Js installer is installed successfully)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Step 2:\u00a0Install\u00a0Java Development Kit(JDK)<\/strong><\/p>\n<ol>\n<li>Download the JDK from the following link by selecting Accept License Agreement option,\u00a0<a href=\"http:\/\/www.oracle.com\/technetwork\/java\/javase\/downloads\/index.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.oracle.com\/technetwork\/java\/javase\/downloads\/index.html<\/a><\/li>\n<li>Follow the steps to install JDK from\u00a0<a href=\"http:\/\/docs.oracle.com\/javase\/7\/docs\/webnotes\/install\/windows\/jdk-installation-windows.html\" target=\"_blank\" rel=\"noopener\">http:\/\/docs.oracle.com\/javase\/7\/docs\/webnotes\/install\/windows\/jdk-installation-windows.html<\/a><\/li>\n<\/ol>\n<p><strong>Step 3: Install Protractor Globally<\/strong><\/p>\n<ol>\n<li>Open the command prompt and type <strong>&#8220;npm install \u2013g protractor&#8221;<\/strong>\u00a0command to install protractor globally<strong>Note:\u00a0<\/strong>To install protractor locally in project directory open command prompt in local project directory and type following command\n<pre class=\"lang:default decode:true\">npm install protractor\r\n<\/pre>\n<p><strong>Verify Installation:<\/strong>\u00a0To verify installation type following command in command prompt once protractor is installed.<\/p>\n<pre class=\"lang:default decode:true\">Protractor \u2013version<\/pre>\n<p>If protractor is installed properly, the system will display version of protractor, otherwise you will have to recheck the installation process.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>What is End to End Testing? End to End Testing is used to determine the performance of application as per requirement. For large and complex applications manual testing is not&hellip;<\/p>\n","protected":false},"author":3,"featured_media":2571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,24],"tags":[25,27,26],"powerkit_post_featured":[],"class_list":{"0":"post-2568","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angularjs","8":"category-testing","9":"tag-angularjs","10":"tag-protractor","11":"tag-testing"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angularjs.png?fit=160%2C160&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Fq","jetpack-related-posts":[{"id":2575,"url":"https:\/\/code4developers.com\/remove-hash-from-application-url-in-angularjs\/","url_meta":{"origin":2568,"position":0},"title":"How To Remove Hash From Application URL In AngularJS","author":"Arif Khoja","date":"June 10, 2017","format":false,"excerpt":"Introduction Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding. To find more, refer the URL https:\/\/docs.angularjs.org\/guide Going further, I assume that you\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":2568,"position":1},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2613,"url":"https:\/\/code4developers.com\/ui-routing-basics\/","url_meta":{"origin":2568,"position":2},"title":"UI-Routing &#8211; Basics","author":"Arif Khoja","date":"June 17, 2017","format":false,"excerpt":"Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":2568,"position":3},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3222,"url":"https:\/\/code4developers.com\/improving-the-performance-of-angular-js-code-by-learning-the-basics-of-ng-repeat\/","url_meta":{"origin":2568,"position":4},"title":"How to optimize the performance of ng-repeat in AngularJS?","author":"Arif Khoja","date":"February 7, 2018","format":false,"excerpt":"Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities. ng-repeat :-\u00a0 It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3097,"url":"https:\/\/code4developers.com\/angularjs-10-best-practices-create-custom-directives\/","url_meta":{"origin":2568,"position":5},"title":"AngularJS &#8211; 10 Best Practices to Create Custom Directives","author":"Arif Khoja","date":"September 2, 2017","format":false,"excerpt":"This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment\/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2568"}],"version-history":[{"count":4,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2568\/revisions"}],"predecessor-version":[{"id":2573,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2568\/revisions\/2573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2571"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2568"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}