Testing Angular.js code using protractor syntax

1. (https://www.cronj.com/blog/) 0 ? Blog Home (https://www.cronj.com/blog/) / Angular.js Development services (https://www.cronj.com/blog/category/angular-js/) / Testing Angular.js code using protractor syntax (https://www.cronj.com/blog/wp-content/uploads/Testing-Angular.js-code-using-protractor- syntax.png) ANGU L AR. JS (HT T PS: //W W W .CRONJ.COM /BL OG/CAT EGORY/ANGU L AR-JS-EN/), ANGU L AR. JS DEVEL OPM ENT SERVI CES (HT T PS: //W W W .CRONJ.COM /BL OG/CAT EGORY/ANGU L AR-JS/) Testing Angular.js code using protractor syntax 

2. (https://www.cronj.com/blog/author/cronj/) CronJ (https://www.cronj.com/blog/author/cronj/), 9 years ago (https://www.cronj.com/blog/testing-angular-code-using-protractor-syntax/) ? ? 2 min ? Listen to Post Angular code is tested by protractor. There are so many approaches to test the code like selecting element, expectation and get etc., Example:

3. <form> <div class="form-group"> <div id="divId"> <h5 class="heading">This is test example</h5> <p class="class1" ng-show="attribute.id">View Attribute {{attribute.id}}</p> <p class="class2" ng-hide="attribute.id">New Attribute</p> <div class="col-md-12"> <input type="text" class="col-md-12 attributeClass" name="attributeName" ng-m </div> <div class="col-md-12"> <input type="checkbox" class="col-md-4 attributeClass" name="isChecked" ng-mo </div> <div id="list"> <p> These are list items </p> <ul ng-repeat="item in itemList"> <li>Number: {{item.number}}</li> <li>Name: {{item.name}}</li> </ul> </div> <button class="btn btn-default" ng-show="status == 'new'" ng-click="save(attrib <button class="btn btn-default" ng-show="status == 'view'" ng-click="back()">Ba </div> <div ng-show="error" class="error"> <p>Fill the form with valid data</p> </div> </div> </form> 1. Select an element with protractor There are di?erent ways to select an element using protractor. You can get it by using id or tagName or css selector or or ng-repeat etc.

4. Select an element by id element(by.id(‘element id’)); Ex: element(by.id(‘divId’)); Select element by class element(by.css(‘.className’)); Ex: element(by.css(‘.heading’)); Select element by tag name element(by.tagName(‘html tag name’)); Ex: element(by.tagName(‘h1’)); Select element by attribute element(by.css(‘attributeValue’)); Ex: element(by.css(‘[ng-click=”Save()”]’)); Select element by ng-repeater element.all(by.repeater(‘pickedItem in repeaterName’)); Ex: element.all(by.repeater(‘item in itemList’));

5. (https://www.cronj.com/careers.html? utm_source=Blog&utm_medium=CTA_Testing_Angular_js_code_usi ng_protractor_syntax) Select element by model element(by.model(‘modelName’)); Ex: element(by.model(‘attribute.name’)); If you want to send data to model Ex: element(by.model(‘attribute.name’)).sendKeys(‘Attribute one’); Select checkbox element element(by.model(‘modelName’)).click(); Ex: element(by.model(‘attribute.name’)).click(); This will check the checkbox if it is not checked vice versa. Select particular element from array element.all(by.condition)).then(function(items) { items[index].action();

6. }); Ex: element.all(by.css(‘.attributeClass’)).then(function(items) { items[1].click(); }); 2. Expecting an element with protractor There are di?erent ways to expect an element using protractor. You can expect by element presence or url etc. Expect element based on visibility on web page expect(condition().isDisplayed()).toBe(true / false); Ex: expect(element(by.css((‘class1’)).isDisplayed()).toBe(true); Expect browser url based on visibility in window expect(browser.getCurrentUrl()).toContain(‘url’); Ex: expect(browser.getCurrentUrl()).toContain(‘/attribute’);

7. (https://www.cronj.com/careers.html? utm_source=Blog&utm_medium=CTA_Testing_Angular_js_code_usi ng_protractor_syntax) Expect count expect(condition().count()).toBe(countNumber); Ex: var listCount = element.all(by.repeater(‘item in itemList’)); expect(listCount.count()).toBe(3); Expect text expect(element(condition).getText()).toContain(‘text message’); Ex: expect(element(by.tagName(‘h1’)).getText()).toContain(‘This is test example’); 3. Get an element with protractor

8. There are di?erent ways to check an element using protractor. You can check by element count or text etc. Get element by index Ex: element.all(by.repeater(‘item in itemList’)).get(0); Get url in window browser.get(‘url’); Ex: browser.get(‘http://localhost:3036/#/’); (https://www.cronj.com/careers.html? utm_source=Blog&utm_medium=CTA_Testing_Angular_js_code_usi ng_protractor_syntax) DEMO

9. Check this link for demo https://github.com/Cron-J/protractor-basic- setup (https://github.com/Cron-J/protractor-basic-setup) Run app: 1.harp server (in one window) 2.protractor (in another window) Note: To run this app harp server (http://harpjs.com/) is required Looking for AngularJS Development Company (https://www.cronj.com/angularjs-development-company.html), your search ends here! (https://www.cronj.com/careers.html? utm_source=Blog&utm_medium=CTA_Testing_Angular_js_code_usi ng_protractor_syntax) VIA SOURCE TAGS #ANGULAR (HTTPS://WWW.CRONJ.COM/BLOG/TAG/ANGULAR/) #ANGULAR.JS (HTTPS://WWW.CRONJ.COM/BLOG/TAG/ANGULAR-JS/) #PROTRACTOR (HTTPS://WWW.CRONJ.COM/BLOG/TAG/PROTRACTOR/) #TESTING (HTTPS://WWW.CRONJ.COM/BLOG/TAG/TESTING/) ANGU L AR. JS DEVEL OPM ENT SERVI CES (HT T PS: //W W W .CRONJ.COM /BL OG/CAT EGORY/ANGU L AR- JS/)

10. Angular.js testing using Protractor (https://www.cronj.com/blog/angular- js-testing-using-protractor/) s testing using protractor/) s://www.cronj.com/blog/angular- (HT T PS: //W W W .CRONJ.COM /BL OG/CAT EGORY/NODE-JS- (https://www.cronj.com/blog/ BACK-END/), NODE. JS ? (HT T PS: //W W W .CRONJ.COM /BL OG/CAT EGORY/NODEJS- for-setting-header-in-expres W EB-DEVEL OPM ENT /) hapijs/) Set Header in express.js and hapi.js (https://www.cronj.com/blog/tutorial- / CronJ (https://www.cronj.com/blog/author/cronj/) CronJ is a product development company which solves problems in Video analytics, IoT, Industrial automation, Manufacturing 4.0, Smart Factory, Smart City, Blockchain, Arti?cial Intelligence, Mobility Solutions and supply chain consulting. Related posts 4 Comments Angular.js testing using Protractor | Cron-J (https://www.cronj.com/blog/angular-js-testing- using-protractor/)

11. […] For more usage check http://www.cronj.com/blog/testing- angular-code-using-protractor-syntax/ […] 9 years ago (https://www.cronj.com/blog/testing-angular-code-using-protractor- syntax/#comment-139) ? Angular JS | Pearltrees (http://www.pearltrees.com/abcde_line/angular- js/id12988373/item137259096) […] Testing angular code using protractor syntax | Cron-J. Angular code is tested by protractor. […] 8 years ago (https://www.cronj.com/blog/testing-angular-code-using-protractor- syntax/#comment-140) ? Homepage … [Trackback] […] Find More Information here: https://www.cronj.com/blog/testing-angular-code- using-protractor-syntax/ (https://www.cronj.com/blog/testing-angular-code- using-protractor-syntax/) […] 8 years ago (https://www.cronj.com/blog/testing-angular- code-using-protractor-syntax/#comment-141) ? Angular.js testing using Protractor - CronJ Blog (https://www.cronj.com/blog/angular-js-testing- using-protractor/) […] For more usage check http://www.cronj.com/blog/testing- angular-code-using-protractor-syntax/ […]

12. 6 years ago (https://www.cronj.com/blog/testing-angular-code-using-protractor- syntax/#comment-417) ? Comments are closed. WordPress Theme built by Shu?ehound. (https://shu?ehound.com)