{"id":40437,"date":"2016-09-14T18:58:25","date_gmt":"2016-09-14T13:28:25","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=40437"},"modified":"2016-09-19T12:18:01","modified_gmt":"2016-09-19T06:48:01","slug":"mobile-web-automation-using-protractor","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/mobile-web-automation-using-protractor\/","title":{"rendered":"Mobile Web Automation using Protractor"},"content":{"rendered":"<p>Protractor is an end-to-end <a title=\"automation testing services\" href=\"http:\/\/www.tothenew.com\/testing\/automated-independent-manual-testing\">automation testing<\/a> framework tool. To test Angular web page on a mobile device, we have to use the Appium with Protractor to perform our E2E testing. Both Appium and Protractor are open-source automation testing tool. Appium provides a bridge between a system and a mobile device. It supports three types of mobile application:<\/p>\n<ul>\n<li>Native<\/li>\n<li>Mobile Web<\/li>\n<li>Hybrid application<\/li>\n<\/ul>\n<p><strong>Step-by-Step Installation<\/strong><\/p>\n<p><strong>Step 1:-<\/strong> Download &amp; install the Chrome browser in the system where we run our test.<\/p>\n<p><strong>Step 2:-<\/strong> Download the \u2018Recommended For Most Users\u2019 one Node.js and then install it.<\/p>\n<p><strong>Step 3:-<\/strong> Now we need to check whether Node.js is installed correctly or not on our machine<\/p>\n<p>Open console window and type <strong>npm &#8211;version<\/strong> [This will display the npm version]<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-40438 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img1_prot.png\" alt=\"\" width=\"553\" height=\"152\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img1_prot.png 553w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img1_prot-300x82.png 300w\" sizes=\"(max-width: 553px) 100vw, 553px\" \/><\/p>\n<p><strong>Step 4:-<\/strong> To install Protractor, type <strong>npm install \u2013g protractor <\/strong>[This command globally installs the Protractor using node package manager]<\/p>\n<p>Type <strong>protractor &#8211;version<\/strong> [This will display the Protractor version]<\/p>\n<p>Type <strong>npm -g list<\/strong> [This will give all the nodes which you have installed]<\/p>\n<p><strong>Step 5:- <\/strong>Install and set up Java<\/p>\n<p>Type <strong>java -version<\/strong> [You will get the java version]<\/p>\n<p><strong>Step 6:-<\/strong> Setting up a Selenium Server<\/p>\n<p>Type <strong>webdriver-manager update<\/strong> [This is for updating the Chrome driver]<\/p>\n<p>Type <strong>webdriver-manager start<\/strong> [This command will start up a Selenium Server and will output a cluster of data logs]<\/p>\n<p><strong>Step 7:- <\/strong>To install Appium through NPM type <strong>npm install -g appium<\/strong><\/p>\n<p><strong>Step 8:-<\/strong> Download Appium on your system<\/p>\n<p>Install it by clicking on appium-installer.exe than launch Appium.<\/p>\n<p><strong>Step 9:-<\/strong> Attach mobile device with your system and check that whether the device is attached or not with the help of command<strong>\u00a0adb devices <\/strong>on the command prompt window.<\/p>\n<p><strong>Setup conf.js File<\/strong><\/p>\n<p>Normally, Protractor runs test on localhost:4444. However, we need Protractor to connect with Appium which runs test on localhost:4723<\/p>\n<p>Some capabilities must be set in the conf.js to make sure Appium can connect to your device which are given below:<\/p>\n<ul>\n<li><strong>appium-version: <\/strong>Version of Appium tool.<\/li>\n<li><strong>platformName:<\/strong>\u00a0Name of the device OS platform wants to utilize<\/li>\n<li><strong>platformVersion:<\/strong>\u00a0Name of the device OS version wants to use<\/li>\n<li><strong>deviceName:\u00a0<\/strong>Actual device number or name which is connected to our system.<\/li>\n<\/ul>\n<p style=\"text-align:center\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-40439 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img2_prot.png\" alt=\"\" width=\"697\" height=\"494\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img2_prot.png 697w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img2_prot-300x212.png 300w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img2_prot-624x442.png 624w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/p>\n<p><strong>A Use Case<\/strong><\/p>\n<ol>\n<li>Go to \u2018Contact Us\u2019 page<\/li>\n<li>Enter all the valid credentials in the Request for services form leaving behind the \u2018Requirement\u2019 field<\/li>\n<li>Click on the \u2018Talk to Us\u2019 Button<\/li>\n<li>Verify the error message.<\/li>\n<\/ol>\n<p style=\"text-align:center\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-40440 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img3_prot-161x300.png\" alt=\"img3_prot\" width=\"161\" height=\"300\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img3_prot-161x300.png 161w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img3_prot.png 391w\" sizes=\"(max-width: 161px) 100vw, 161px\" \/><\/p>\n<p><strong>Our First Test Script<\/strong><\/p>\n<p>Following is the code piece for our use case.<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-40441 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img4_prot.png\" alt=\"\" width=\"962\" height=\"282\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2016\/09\/img4_prot.png 962w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img4_prot-300x87.png 300w, \/blog\/wp-ttn-blog\/uploads\/2016\/09\/img4_prot-624x182.png 624w\" sizes=\"(max-width: 962px) 100vw, 962px\" \/><\/p>\n<p>As my application is non-angularJS for that I\u2019m using the following command in my script <em>browser.ignoreSynchronization = true;<\/em><\/p>\n<p>In this test script, in order to click the button we are using the script:\u00a0<em>element(by.css(&#8216;[id=&#8221;edit-submit&#8221;]&#8217;)); <\/em><\/p>\n<p>In our mobile device web application, the HTML Code for the button is:\u00a0<em>&lt;input data-drupal-selector=&#8221;edit-submit&#8221; type=&#8221;submit&#8221; id=&#8221;edit-submit&#8221; name=&#8221;op&#8221; value=&#8221;Talk to Us&#8221; class=&#8221;button js-form-submit form-submit&#8221;&gt;<\/em><\/p>\n<p><strong>Types of Locators<\/strong><\/p>\n<p>A locator directly helps Protractor to identify elements. Following is the list of locators we can use:<\/p>\n<ol>\n<li>Find an element utilizing a CSS selector <em>css(&#8216;.myclass&#8217;)<\/em><\/li>\n<li>Find an element with a specified id <em>id(&#8216;myid&#8217;)<\/em><\/li>\n<li>Find an element with a specific ng-model <em>model(&#8216;name&#8217;)<\/em><\/li>\n<li>Find an element bound to a given variable <em>binding(&#8216;bindingname&#8217;)<\/em><\/li>\n<\/ol>\n<p><strong>Run the Test Script<\/strong><\/p>\n<ul>\n<li>Once all the above steps are completed. Open a new console window and give the path of the test script \u2018AppData\\Roaming\\npm\\node_modules\\protractor\\example\u2019.<\/li>\n<li>Run the script with <strong>protractor conf.js<\/strong><\/li>\n<\/ul>\n<p>As the script runs, the Chrome browser window will maximize on the mobile device and will be navigated to the <a href=\"http:\/\/www.tothenew.com\/contact-us\">TO THE NEW contact us page<\/a>, automatically details in the \u2018Request for Service\u2019 form will be filled and \u2018Talk to Us\u2019 button will be clicked and with that the browser closes itself.<\/p>\n<p>The protractor automation tool is specially designed for <a title=\"Angularjs development\" href=\"http:\/\/www.tothenew.com\/front-end-angularjs-development\">AngularJS application<\/a>, but we can also use this tool to test the non-AngularJS application.<\/p>\n<p><strong>HAPPY TESTING!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Protractor is an end-to-end automation testing framework tool. To test Angular web page on a mobile device, we have to use the Appium with Protractor to perform our E2E testing. Both Appium and Protractor are open-source automation testing tool. Appium provides a bridge between a system and a mobile device. It supports three types of [&hellip;]<\/p>\n","protected":false},"author":107,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":8},"categories":[1818,1816],"tags":[1561,4851],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/40437"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=40437"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/40437\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=40437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=40437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=40437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}