KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use buildElementHelper method in Protractor
Best JavaScript code snippet using protractor
browser.js
Source:browser.js 
...69 * @private70 * @param {Browser} browser A browser instance.71 * @returns {function(webdriver.Locator): ElementFinder}72 */73function buildElementHelper(browser) {74 var element = (function (locator) {75 return new element_1.ElementArrayFinder(browser).all(locator).toElementFinder_();76 });77 element.all = function (locator) {78 return new element_1.ElementArrayFinder(browser).all(locator);79 };80 return element;81}82;83/**84 * @alias browser85 * @constructor86 * @extends {webdriver.WebDriver}87 * @param {webdriver.WebDriver} webdriver88 * @param {string=} opt_baseUrl A base URL to run get requests against.89 * @param {string=} opt_rootElement Selector element that has an ng-app in90 * scope.91 * @param {boolean=} opt_untrackOutstandingTimeouts Whether Protractor should92 * stop tracking outstanding $timeouts.93 */94var ProtractorBrowser = (function (_super) {95 __extends(ProtractorBrowser, _super);96 function ProtractorBrowser(webdriverInstance, opt_baseUrl, opt_rootElement, opt_untrackOutstandingTimeouts) {97 var _this = _super.call(this) || this;98 // These functions should delegate to the webdriver instance, but should99 // wait for Angular to sync up before performing the action. This does not100 // include functions which are overridden by protractor below.101 var methodsToSync = ['getCurrentUrl', 'getPageSource', 'getTitle'];102 // Mix all other driver functionality into Protractor.103 Object.getOwnPropertyNames(selenium_webdriver_1.WebDriver.prototype).forEach(function (method) {104 if (!_this[method] && typeof webdriverInstance[method] === 'function') {105 if (methodsToSync.indexOf(method) !== -1) {106 ptorMixin(_this, webdriverInstance, method, _this.waitForAngular.bind(_this));107 }108 else {109 ptorMixin(_this, webdriverInstance, method);110 }111 }112 });113 _this.driver = webdriverInstance;114 _this.element = buildElementHelper(_this);115 _this.$ = element_1.build$(_this.element, selenium_webdriver_1.By);116 _this.$$ = element_1.build$$(_this.element, selenium_webdriver_1.By);117 _this.baseUrl = opt_baseUrl || '';118 _this.rootEl = opt_rootElement || 'body';119 _this.ignoreSynchronization = false;120 _this.getPageTimeout = DEFAULT_GET_PAGE_TIMEOUT;121 _this.params = {};122 _this.ready = null;123 _this.plugins_ = new plugins_1.Plugins({});124 _this.resetUrl = DEFAULT_RESET_URL;125 _this.ng12Hybrid = false;126 _this.debugHelper = new debugger_1.DebugHelper(_this);127 _this.driver.getCapabilities().then(function (caps) {128 // Internet Explorer does not accept data URLs, which are the default...
protractor.js
Source:protractor.js
...112 * @param {=Array.<webdriver.Locator>} opt_usingChain113 * @return {function(webdriver.Locator): ElementFinder}114 */115 elementFinder.element =116 buildElementHelper(ptor, usingChain.concat(locator));117 /**118 * Shortcut for chaining css element finders.119 * Example:120 * var name = element(by.id('container')).$('input.myclass');121 * browser.get('myurl');122 * name.sendKeys('John Smith');123 *124 * @param {string} cssSelector125 * @return {ElementFinder}126 */127 elementFinder.$ = function(cssSelector) {128 return buildElementHelper(ptor, usingChain.concat(locator))(129 webdriver.By.css(cssSelector));130 };131 return elementFinder;132 };133 /**134 * element.all is used for operations on an array of elements (as opposed135 * to a single element).136 *137 * Example:138 * var lis = element.all(by.css('li'));139 * browser.get('myurl');140 * expect(lis.count()).toEqual(4);141 *142 * @param {webdriver.Locator} locator143 * @return {ElementArrayFinder}144 */145 element.all = function(locator) {146 var elementArrayFinder = {};147 /**148 * @return {number} the number of elements matching the locator.149 */150 elementArrayFinder.count = function() {151 return using().findElements(locator).then(function(arr) {152 return arr.length;153 });154 };155 /**156 * @param {number} index157 * @return {webdriver.WebElement} the element at the given index158 */159 elementArrayFinder.get = function(index) {160 var id = using().findElements(locator).then(function(arr) {161 return arr[index];162 });163 return ptor.wrapWebElement(new webdriver.WebElement(ptor.driver, id));164 };165 /**166 * @return {webdriver.WebElement} the first matching element167 */168 elementArrayFinder.first = function() {169 var id = using().findElements(locator).then(function(arr) {170 if (!arr.length) {171 throw new Error('No element found using locator: ' + locator.message);172 }173 return arr[0];174 });175 return ptor.wrapWebElement(new webdriver.WebElement(ptor.driver, id));176 };177 /**178 * @return {webdriver.WebElement} the last matching element179 */180 elementArrayFinder.last = function() {181 var id = using().findElements(locator).then(function(arr) {182 return arr[arr.length - 1];183 });184 return ptor.wrapWebElement(new webdriver.WebElement(ptor.driver, id));185 };186 /**187 * @type {webdriver.promise.Promise} a promise which will resolve to188 * an array of WebElements matching the locator.189 */190 elementArrayFinder.then = function(fn) {191 return using().findElements(locator).then(fn);192 };193 /**194 * Calls the input function on each WebElement found by the locator.195 *196 * @param {function(webdriver.WebElement)}197 */198 elementArrayFinder.each = function(fn) {199 using().findElements(locator).then(function(arr) {200 arr.forEach(function(webElem) {201 fn(webElem);202 });203 });204 };205 /**206 * Apply a map function to each element found using the locator. The207 * callback receives the web element as the first argument and the index as208 * a second arg.209 *210 * Usage:211 * <ul class="menu">212 * <li class="one">1</li>213 * <li class="two">2</li>214 * </ul>215 *216 * var items = element.all(by.css('.menu li')).map(function(elm, index) {217 * return {218 * index: index,219 * text: elm.getText(),220 * class: elm.getAttribute('class')221 * };222 * });223 * expect(items).toEqual([224 * {index: 0, text: '1', class: 'one'},225 * {index: 0, text: '1', class: 'one'},226 * ]);227 *228 * @param {function(webdriver.WebElement, number)} mapFn Map function that229 * will be applied to each element.230 * @return {!webdriver.promise.Promise} A promise that resolves to an array231 * of values returned by the map function.232 */233 elementArrayFinder.map = function(mapFn) {234 return using().findElements(locator).then(function(arr) {235 var list = [];236 arr.forEach(function(webElem, index) {237 var mapResult = mapFn(webElem, index);238 // All nested arrays and objects will also be fully resolved.239 webdriver.promise.fullyResolved(mapResult).then(function(resolved) {240 list.push(resolved);241 });242 });243 return list;244 });245 };246 return elementArrayFinder;247 };248 return element;249};250/**251 * Build the helper '$' function for a given instance of Protractor.252 *253 * @private254 * @param {Protractor} ptor255 * @return {function(string): ElementFinder}256 */257var buildCssHelper = function(ptor) {258 return function(cssSelector) {259 return buildElementHelper(ptor)(webdriver.By.css(cssSelector));260 };261};262/**263 * Build the helper '$$' function for a given instance of Protractor.264 *265 * @private266 * @param {Protractor} ptor267 * @return {function(string): ElementArrayFinder}268 */269var buildMultiCssHelper = function(ptor) {270 return function(cssSelector) {271 return buildElementHelper(ptor).all(webdriver.By.css(cssSelector));272 };273};274/**275 * @param {webdriver.WebDriver} webdriver276 * @param {string=} opt_baseUrl A base URL to run get requests against.277 * @param {string=body} opt_rootElement Selector element that has an ng-app in278 * scope.279 * @constructor280 */281var Protractor = function(webdriver, opt_baseUrl, opt_rootElement) {282 // These functions should delegate to the webdriver instance, but should283 // wait for Angular to sync up before performing the action. This does not284 // include functions which are overridden by protractor below.285 var methodsToSync = ['getCurrentUrl', 'getPageSource', 'getTitle'];286 // Mix all other driver functionality into Protractor.287 for (var method in webdriver) {288 if(!this[method] && typeof webdriver[method] == 'function') {289 if (methodsToSync.indexOf(method) !== -1) {290 mixin(this, webdriver, method, this.waitForAngular.bind(this));291 } else {292 mixin(this, webdriver, method);293 }294 }295 }296 /**297 * The wrapped webdriver instance. Use this to interact with pages that do298 * not contain Angular (such as a log-in screen).299 *300 * @type {webdriver.WebDriver}301 */302 this.driver = webdriver;303 /**304 * Helper function for finding elements.305 *306 * @type {function(webdriver.Locator): ElementFinder}307 */308 this.element = buildElementHelper(this);309 /**310 * Helper function for finding elements by css.311 *312 * @type {function(string): ElementFinder}313 */314 this.$ = buildCssHelper(this);315 /**316 * Helper function for finding arrays of elements by css.317 *318 * @type {function(string): ElementArrayFinder}319 */320 this.$$ = buildMultiCssHelper(this);321 /**322 * All get methods will be resolved against this base URL. Relative URLs are =...
Using AI Code Generation
1var buildElementHelper = require('protractor-element-helper').buildElementHelper;2var helper = buildElementHelper(by);3var buildElementHelper = require('protractor-element-helper').buildElementHelper;4var helper = buildElementHelper(by);5var buildElementHelper = require('protractor-element-helper').buildElementHelper;6var helper = buildElementHelper(by);7var buildElementHelper = require('protractor-element-helper').buildElementHelper;8var helper = buildElementHelper(by);9var buildElementHelper = require('protractor-element-helper').buildElementHelper;10var helper = buildElementHelper(by);11var buildElementHelper = require('protractor-element-helper').buildElementHelper;12var helper = buildElementHelper(by);13var buildElementHelper = require('protractor-element-helper').buildElementHelper;14var helper = buildElementHelper(by);15var buildElementHelper = require('protractor-element-helper').buildElementHelper;16var helper = buildElementHelper(by);17var buildElementHelper = require('protractor-element-helper').buildElementHelper;18var helper = buildElementHelper(by);19var buildElementHelper = require('protractor-element-helper').buildElementHelper;20var helper = buildElementHelper(by);21var buildElementHelper = require('protractor-element-helper').buildElementHelper;22var helper = buildElementHelper(by);23var buildElementHelper = require('protractor-element-helper').buildElementHelper;24var helper = buildElementHelper(by);25var buildElementHelper = require('protractor-element-helper').buildElementHelper;26var helper = buildElementHelper(by);27var buildElementHelper = require('protractor-element-helper').buildElementHelper;28var helper = buildElementHelper(by);
Using AI Code Generation
1var protractor = require('protractor');2var buildElementHelper = protractor.buildElementHelper;3var elementHelper = buildElementHelper(protractor);4var element = elementHelper.element;5var by = elementHelper.by;6var EC = protractor.ExpectedConditions;7var EC = protractor.ExpectedConditions;8describe('Protractor Demo App', function() {9 it('should add one and two', function() {10 element(by.model('first')).sendKeys(1);11 element(by.model('second')).sendKeys(2);12 element(by.id('gobutton')).click();13 browser.wait(EC.visibilityOf(element(by.binding('latest'))), 3000);14 expect(element(by.binding('latest')).getText()).toEqual('3');15 });16});17Error: Failed: unknown error: Element <[object Object]> is not clickable at point (57, 4). Other element would receive the click: <[object Object]>18capabilities.setCapability("chrome.switches", Arrays.asList("--no-default-browser-check"));19browser.driver.manage().window().maximize();
Using AI Code Generation
1const protractorHelper = require('protractor-helper');2const { buildElementHelper } = protractorHelper;3const elementHelper = buildElementHelper(protractorHelper);4elementHelper.clickWhenClickable(element(by.id('myId')));5elementHelper.fillFieldWithTextWhenVisible(element(by.id('myId')), 'my text');6protractorHelper.clickWhenClickable(element(by.id('myId')));7protractorHelper.fillFieldWithTextWhenVisible(element(by.id('myId')), 'my text');8const protractorHelper = require('protractor-helper');9protractorHelper.clickWhenClickable(element(by.id('myId')));10protractorHelper.fillFieldWithTextWhenVisible(element(by.id('myId')), 'my text');11elementHelper.clickWhenClickable(element(by.id('myId')));12elementHelper.fillFieldWithTextWhenVisible(element(by.id('myId')), 'my text');
Using AI Code Generation
1var test = require('selenium-webdriver/testing');2var webdriver = require('selenium-webdriver');3var protractor = require('protractor');4var By = webdriver.By;5var until = webdriver.until;6var elementHelper = protractor.elementHelper;7var customLocator = elementHelper.buildElementHelper(By.css('.customLocator'));8test.describe('Custom Locator', function() {9 var driver;10 test.beforeEach(function() {11 build();12 });13 test.afterEach(function() {14 driver.quit();15 });16 test.it('should find an element using a custom locator', function() {17 driver.findElement(customLocator('search')).sendKeys('webdriver');18 });19});20var test = require('selenium-webdriver/testing');21var webdriver = require('selenium-webdriver');22var protractor = require('protractor');23var By = webdriver.By;24var until = webdriver.until;25var elementHelper = protractor.elementHelper;26var customLocator = elementHelper.buildElementHelper(By.css('.customLocator'));27test.describe('Custom Locator', function() {28 var driver;29 test.beforeEach(function() {30 build();31 });32 test.afterEach(function() {33 driver.quit();34 });35 test.it('should find an element using a custom locator', function() {36 driver.findElement(customLocator('search')).sendKeys('webdriver');37 });38});39var test = require('selenium-webdriver/testing');40var webdriver = require('selenium-webdriver');41var protractor = require('protractor');42var By = webdriver.By;43var until = webdriver.until;44var elementHelper = protractor.elementHelper;45var customLocator = elementHelper.buildElementHelper(By.css('.customLocator'));46test.describe('Custom Locator', function() {47 var driver;48 test.beforeEach(function() {
Using AI Code Generation
1var helper = require('protractor-element-helper');2describe('protractor element helper', function () {3 it('should show the element helper', function () {4 var searchBox = element(by.id('lst-ib'));5 helper.buildElementHelper(searchBox);6 searchBox.type('Protractor');
Using AI Code Generation
1var EC = protractor.ExpectedConditions;2var helper = require('protractor-element-helper');3var elementHelper = new helper.ElementHelper();4var test = function () {5 this.addTest = function () {6 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).click();7 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).getText().then(function (text) {8 expect(text).toEqual('Add');9 });10 };11 this.addTest1 = function () {12 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).click();13 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).getText().then(function (text) {14 expect(text).toEqual('Add1');15 });16 };17 this.addTest2 = function () {18 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).click();19 elementHelper.buildElementHelper(by.css('[ng-click="add()"]')).getText().then(function (text) {20 expect(text).toEqual('Add2');21 });22 };23};24module.exports = test;25exports.config = {26 onPrepare: function () {27 browser.driver.manage().window().maximize();28 jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({29 }));30 },31 capabilities: {32 chromeOptions: {33 }34 }35};36{37 "scripts": {38 },39 "dependencies": {40 }41}42{
Using AI Code Generation
1var myHelper = buildElementHelper(by.id('myId'));2myHelper.getText().then(function(text) {3 console.log(text);4});5var myHelper = buildElementHelper(by.id('myId'));6myHelper.getText().then(function(text) {7 console.log(text);8});9var myHelper = buildElementHelper(by.id('myId'));10myHelper.getText().then(function(text) {11 console.log(text);12});13var myHelper = buildElementHelper(by.id('myId'));14myHelper.getText().then(function(text) {15 console.log(text);16});17var myHelper = buildElementHelper(by.id('myId'));18myHelper.getText().then(function(text) {19 console.log(text);20});21var myHelper = buildElementHelper(by.id('myId'));22myHelper.getText().then(function(text) {23 console.log(text);24});25var myHelper = buildElementHelper(by.id('myId'));26myHelper.getText().then(function(text) {27 console.log(text);28});29var myHelper = buildElementHelper(by.id('myId'));30myHelper.getText().then(function(text) {31 console.log(text);32});
Selenium Protractor Tutorial
Protractor is developed by Google Developers to test Angular and AngularJS code. Today, it is used to test non-Angular applications as well. It performs a real-world user-like test against your application in a real browser. It comes under an end-to-end testing framework. As of now, Selenium Protractor has proved to be a popular framework for end-to-end automation for AngularJS.
Let’s talk about what it does:
- Protractor, built on WebDriver JS (Selenium), offers Angular-specific locator strategies.
- It helps to construct automated tests for applications other than Angular JS and is not just intended to test AngularJS applications.
- Page object design pattern is supported by Protractor Selenium, which improves in producing clear and legible code. Automation testers need to write clean code.
- Frameworks like Jasmine, Cucumber, and others are fully integrated with Protractor.
Chapters:
Protractor is a JavaScript framework, end-to-end test automation framework for Angular and AngularJS applications.
Protractor Selenium provides new locator methods that actually make it easier to find elements in the DOM.
Two files are required to execute Protractor Selenium tests for end-to-end automation: Specs & Config. Go through the link above to understand in a better way.
To carry out extensive, automated cross browser testing, you can't imagine installing thousands of the available browsers on your own workstation. The only way to increase browser usage is through remote execution on the cloud. To execute your automation test scripts across a variety of platforms and browser versions, LambdaTest offers more than 3000 browsers.
We recommend Selenium for end-to-end automation for AngularJS because both are maintained and owned by Google, and they build JavaScript test automation framework to handle AngularJS components in a way that better matches how developers use it.
For scripting, selenium locators are essential since if they're off, your automation scripts won't run. Therefore, in any testing framework, these Selenium locators are the foundation of your Selenium test automation efforts.
To make sure that your Selenium automation tests function as intended, debugging can be an effective option. Check the blog to know more.
Get familiar with global variables that are majorly used in locating the DOM elements with examples for better understanding of these Selenium locators in protractor.
If you are not familiar with writing Selenium test automation on Protractor, here is a blog for you to get you understand in depth.
Selenium tests are asynchronous and there are various reasons for a timeout to occur in a Protractor test. Find out how to handle timeouts in this Protractor tutorial.
In this Protractor tutorial, learn how to handle frames or iframes in Selenium with Protractor for automated browser testing.
Handle alerts and popups in Protractor more efficiently. It can be confusing. Here's a simple guide to understand how to handle alerts and popups in Selenium.
Run Protractor automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
