While testing the functionality for your website, especially web elements such as radio buttons, text boxes, drop-down, etc., you need to make sure that you are able to access these elements. Selenium locators serve this exact purpose: by using this command we can identify these web elements, DOM (Document Object Model), to perform through our scripts. Selenium test automation These Selenium locators are vital for scripting as if they’re wrong, your automation scripts won’t work. Thus your Selenium test automation efforts rely on these Selenium locators in any testing framework. Protractor, an Angular JS framework, has many Selenium locators that can be identified by using a specific By method during runtime. In this protractor testing tutorial, we will discuss the Selenium locators in Protractor in-depth and how we can use locators to interact with the application and fetch the current running state. So, let’s get started. What Is The Importance Of Selenium Locators In Protractor? Let’s start our protractor testing tutorial by discussing various features that should be kept in mind when choosing a locator with respect to its performance. The Selenium locators in Protractor have proven to be good and reliable in most scenarios. Some of the features that it provides are: 1. Good Readability: The Selenium locators in the protractor are easily readable and accessible. The locators offer enough flexibility to the test code by making it accessible to the user. 2. Less Maintenance: The Selenium locators in protractors are developed in an optimized manner and hence, they require less maintenance overhead. The structure of the locator is designed in a great fashion so that there is no need to update the locator even when there is a change in the location of the element. It requires modification only if there is any change in the functionality of the web application. 3. Improved Speed: This is one of the most important properties of the Selenium locators as this feature determines the performance of the web application. The Selenium locators in the protractor have a unique id which makes them relatively faster than other Selenium locators. Sometimes, the speed of locating an element is also dependent on the internal processing speed of the browsers. The Objective of Selenium Locators in Protractor Moving on with our protractor testing tutorial, we’ll discuss the importance of Selenium locators. The important point to remember in order to write good end-to-end tests in Protractor is discovering the proper Document Object Model (DOM) elements for the web pages. It tends to globally export the locator factories through the instantiated objects. Since the protractor is built upon Selenium interfaces, the Selenium locators in the protractor are quite comparable and similar to the ones associated with . Therefore, it’s interesting to know that the framework supports Selenium locators in protractors as well along with its own. Selenium WebDriver Working of Selenium Locators in Protractor Next, in this protractor testing tutorial, we’ll discuss how Selenium locators work in Protractor. The way the locator functions in Protractor is by exporting a global function i.e. ‘element’, which inputs the locator and provides us with the ElementFinder in return. The ElementFinder, on the other hand, offers a fundamental way to communicate with an element and get details about the same with various action methods such as getText(), click(), and sendKeys(). These methods are quite popular and are used frequently when executing Selenium test automation. The main purpose of the ‘element’ function is to locate a single element. To locate multiple elements, the ‘element.all’ the function is used. There are several other means by which we can find the elements in Protractor and by using elements locating strategies in Angular JavaScript framework such as by.model(), by.repeater(), by.binding(), etc. List of Selenium Locators in Protractor Now in this section of the Protractor testing tutorial, let’s get familiar with global variables that are majorly used in locating the DOM elements with examples for a better understanding of these Selenium locators in Protractor. These are a group of element locator strategies that are associated with the “by” keyword such as by.className, by.css, by.model, etc. Some of the most commonly used are: by.className by.id by.CSSby by.linkText by.name by.partialLinkText by.tagName by.xpath 1. by.className The className locator is one of the most widely used Selenium locators in Protractor. ts objective is to check for the elements in the page with a class attribute and then further classify the elements specific to their class name. For Example: Sample XML Document :- <ul = > < = >5</ > < = >-6</ > </ul> /* The list contains a class for positive or negative */ class "digits" li class "positive" li li class "negative" li Locator Used:- even = browser.findElement(by.className(positive)); expect(even.getText()).toBe( ); expect(browser.findElement(by.className( ))).toBe( ); /* The locator that returns the expected element for the specified class */ var '5' // making use of our locator in our test script // 'even' '-6' The Id locator is used to discover an element in the web page based on the id attribute defined in the XML document structure. 2. by.id For Example: Sample XML Document :- /* The positive negative */ <ul = > <li = > </li> <li = = > </li> </ul> list contains class for or class "digits" class "negative" -6 class "positive" id "positiveNumber" 5 Locator Used:- var positive = browser.find ); expect(positive.get ). ; /* The locator that returns the expected element for the specified id */ // making use of our locator in our test script // Element( . (' ') by id positiveNumber Text() to Be('5') 3. by.css The assists in identifying the elements and classify them based on the CSS selector i.e. the identifier value used to distinguish the element existing on the web page. These Selenium locators are also one of the most preferred substitutes in protractor when we do not have a choice to select based on class name or id. CSS locator For Example: Sample XML Document :- <ul =" "> < =" "> </ > < =" " =" "> </ > </ > /* The list contains class for two color i.e blue or red */ class color li class first blue li li class second id secondColor red li ul Locator Used:- var first = browser.find ); expect(first.get ). ; expect(browser.find )). ; /* The locator that returns the expected element for the specified CSS */ Element( . ('. ') by css first Text() to Be(' ') blue // making use of our locator in our test script // Element( . ('# ') by css secondColor to Be(' ') red 4. by.linkText The objective of the linkText locator is to identify the matching string text corresponding to the anchor element i.e. tag in the DOM. It works only on the hyperlink and by default, the first link text is selected if there are multiple elements present for the link text on the web page. < a > For Example: Sample XML Document :- < href= >LambdaTest</ > < href= >LambdaTest</ > /* The anchor tag which contains the website name and its URL */ a "http://www.lambdatest.com" a a "http://www.lambdatest.com" a Locator Used:- // making our our script // myLink = (by.linkText(‘LambdaTest a /* The locator that returns the expected element for the link i.e. Lambda Test*/ use of locator in test var element ')); expect(myLink.getTagName()).toBe(' '); 5. by.name The name locator is used to discover the element having the specific value in the name attribute. For Example: Sample XML Document :- /* The a two names i.e John Mark */ <ul> <li = >John</li> <li = >Mark</li> </ul> list contains class for and name "developer" name "tester" Locator Used:- var developer = browser.find ); var tester = browser.find ); expect(developer.get ). ; expect(tester.get ). ; /* The locator that returns the expected element for the specified name */ // making use of our locator in our test script // Element( . (' ') by name developer // making use of our locator in our test script // Element( . (' ') by name tester Text() to Be('John') Text() to Be('Mark') 6. by.partialLinkText The is used in scenarios where there is a need to find the elements which contain the string or the portion of the string in the link text element. partialLinkText locator For Example: Sample XML Document :- /* The list contains which has the required text */ Selenium test automation Cloud</a></li> Online Selenium Grid Automated Testing</li> </ul> anchor tag <ul> <li> <a href="http://www.lambdatest.com"> <li> for Locator Used :- myLink = browser.findElement(by.partialLinkText( )); myLink.click(); // /* The locator that returns the expected element i.e. gives us the 'a' element value ‘Selenium test automation Cloud’ and navigates to the same link */ // making use of our locator in our test script // var 'Cloud' 7. by.tagName The tagName locator is used to locate elements having a specific tag name. It looks for elements in the web page having any tag name like < a > , < div > , < p > etc. It functions similar to that of the getElementsByTagName function used in the XML document structure. For Example: Sample XML Document :- /* The list contains which has the required text */ LambdaTest</a> anchor tag <a href="http://www.lambdatest.com"> Locator Used :- expect(element(by.tagName( )).getText()).toEqual( ); // /* The locator that returns the expected element i.e. gives us the 'a' tag value and that matches with the text given */ // // making use of our locator in our test script // 'a' 'LambdaTest' 8. by.xpath The is used to find the matching element for the XML Xpath Selector provided. An important thing to note when dealing with XPath Selenium locators is that to search and element the entire XML document model we must we begin our XPath locator with “//” Xpath locator For Example: XPath = *[ @ value= ] - matches Inbox xpath= [ = ] - matches Gmail // 'Inbox' with //button @name "Gma" with Sample XML Document :- /* The list contains which has the required text */ Selenium test automation Cloud </a> </li> Online Selenium Grid Automated Testing </li> </ul> anchor tag <ul> <li> <a href="http://www.lambdatest.com"> <li> for Locator Used:- xpathEle = browser.findElement(by.xpath( )); expect(xpathEle.getText()).toBe(‘Selenium test automation Cloud’); // /* The locator that returns the expected element i.e. gives us the 'a' tag value with the help of XPath and that matches with the text given */ // making use of our locator in our test script // var '//ul/li/a' Angular Specific Selenium Locators Now, in this protractor testing tutorial, let us have a look at some of the Selenium locators that are used in Angular but are also available for the Protractor framework. by.model by.buttonText by.partialButtonText by.exactBinding by.binding by.exactRepeater by.repeater by.cssContainingText by.options by.deepCss by.addLocator 1. by.model The model locator identifies the element having the exact text associated with the ng-model attribute. For Example: Sample XML Document :- <input = ng-model= > // /* The XML input type contains the text with the model attribute */ // type "text" "developer.name" Locator Used:- element(by.model( )).click(); // /* The locator finds the element with the model attribute and returns the value */ // // making use of our locator in our test script // 'developer.name' 2. by.buttonText The buttonText locator finds a match with an element having the same text of the button tag or inside the sub-element of the tag. For Example: Sample XML Document :- // // < test automation Cloud </ /* The XML contains the button with the required value */ button> Selenium button> Locator Used:- element(by.buttonText( )); // /* The locator finds the element with the button tag and returns the value */ // // making use of our locator in our test script // 'Selenium test automation Cloud' 3. by.partialButtonText The partialButtonTextlocator finds a match with an element that contains the part of the text i.e. partial match in the button tag or inside the sub-element of the tag. For Example: Sample XML Document :- // // < test automation Cloud </ /* The XML contains the button with the required value */ button> Selenium button> Locator Used:- element(by.partialButtonText( )); // /* The locator finds the element with the button tag and returns the value */ // // making use of our locator in our test script // 'Cloud' 4. by.exactBinding The exactBinding locator is used to locate the ng-bind attribute with the exact string/text value provided. It will not check for any partial matches in the text. For Example: Sample XML Document :- <p ng-bind= > // /* The XML input type contains the text with the bind attribute */ // "developer.name" </ > p Locator Used:- expect(element(by.exactBinding( )).isPresent()).toBe( ); // /* The locator finds the element with the bind attribute and returns the value */ // // making use of our locator in our test script // 'developer.name' true 5. by.binding This binding locator is used to locate the ng-bind attribute with the given text value. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned. For Example: Sample XML Document :- < ng-bind= >John</p> // /* The XML input type contains the text with the bind attribute */ // p "developer.name" Locator Used:- eleName = element(by.binding(developer)); expect(eleName.getText()).toBe( ); // /* The locator finds the element with the bind attribute and returns the value */ // // making use of our locator in our test script // var 'John' 6. by.exactRepeater The exactRepeater locator identifies the element having the exact text associated with attribute ng-repeat. It will not check for any partial matches in the text. For Example: Sample XML Document :- < ng- = ></ > < ng- = ></ > // /* The XML input type contains the text with the bind attribute */ // li repeat "dev in developer_names" li li repeat "test in tester_names" li Locator Used:- expect(element(by.exactRepeater( )).isPresent()).toBe( ); // /* The locator finds the element with the bind attribute and returns the exact value */ // // making use of our locator in our test script // 'dev in developer_names' true 7. by.repeater The repeater locator is used to find the element that has the attribute ng-repeat. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned. For Example: Sample XML Document :- // /* The XML input type contains the text with the repeater attribute */ // < = > tr ng-repeat "developer_info" < > td {{dev.id}} </ > td < > td {{dev..name}} </ > td < > td {{dev.salary}} </ > td </ > tr Locator Used:- devID = element(by.repeater( ).row( )); expect(devID.getText()).toBe( ); devName = element(by.repeater( ).row( )); expect(devName.getText()).toBe( ); // /* The locator finds the element with the repeater attribute and returns the value */ // // making use of our locator in our test script // var 'developer_info' 0 '2' var 'developer_info' 1 'Mark' 8. by.cssContainingText The cssContainingText locator finds the element by CSS having the specific text string, i.e. it combines the function of the CSS locator and the text element locator to identify the element. For Example: Sample XML Document :- <ul> <li =" "> </ > < =" "> </ > </ > // /* The XML input type contains the text with the css text */ // class color Blue li li class color Red li ul Locator Used:- blue = element(by.cssContainingText( , )); // /* The locator finds the element and returns the value for the Blue color but not the Red color */ // // making use of our locator in our test script // var '.color' 'Blue' 9. by.options The options locator identifies the element associated with attribute ng-option. For Example: Sample XML Document :- // // < ng- ="Colors options in the custom collection"> < ="0">Blue Color</ > < ="1">Red Color</ > < ="2">Green Color</ > </ > /* The XML input type contains the text with the option attribute */ select options option value option option value option option value option select Locator Used:- colorOptions = element.all(by.options( )); expect(colorOptions.count()).toEqual(Green); // /* The locator finds the element with the options attribute and returns the value */ // // making use of our locator in our test script // var 'Colors options in the custom collection' 10. by.deepCss The deepCss locator in Protractor is used to discover the shadow DOM elements, which by default is not easily discoverable by using standard element Selenium locators. For Example: Sample XML Document :- // /* The XML input type contains the text and returns the fetched value */ // <div> <span id="outerspan"> //outerspan <"shadow tree"> //shadow tree <span id="span1"> </span> <"shadow tree"> <span id="span2"> </span> </> </> </div> Locator Used:- mySpan = element.all(by.deepCss( )); expect(mySpan.count()).toEqual( ); checkSpans = element.all(by.css( ); expect(checkSpans.count()).toEqual( ); // /* The locator finds the element with the options attribute and returns the value */ // // making use of our locator in our test script // var 'span' //myspan 7 // making use of our locator in our test script // var 'span' //verify span 5 In this next section of the Protractor testing tutorial, we’ll discuss how you can integrate Protractor with other powerful tools. Before that, if you want to set up a protractor to run your Selenium automation scripts you can check out our documentation. support 11. by.addLocator The addLocator in protractor is used to create custom locators and load them later in config. For Example: Sample XML Document :- < ng-click= >View</ > // /* The XML input type contains the text and returns the fetched value */ // button "viewResults()" button Locator Used:- by.addLocator( , { using = opt_parentElement || , buttons = using.querySelectorAll(‘Automate testing’); .prototype.filter.call(buttons, { button.textContent === buttonText; }); }); // /* The locator finds the element with the options attribute and returns the value */ // // making use of our locator in our test script // 'Selenium Grid' ( ) function buttonText, opt_parentElement, opt_rootSelector var document return Array ( ) function button return Integrating Protractor with LambdaTest For Faster Selenium Test Automation When performing Selenium test automation, we always look for ways that can help us increase our test coverage and improve our test cases. Protractor framework also has the capability to integrate with multiple tools and platforms such as Git, Jenkins, LambdaTest, etc. The best part of integrating your Protractor scripts with LambdaTest can help you ditch the hassle of maintaining an in-house Selenium infrastructure as you can run your scripts over a cloud-based Selenium Grid of 2000 + real browsers for both desktop and mobile. To integrate Protractor with our online Selenium Grid, you won’t have to make any changes to your specification files. All you need to do is tweak the config file a little to specify the hub details and access key required to connect to Remote WebDriver for our online Selenium Grid. T Therefore, when it is coupled with the internal capabilities of Protractor, it provides better flexibility to manage our tests and executing parallel Selenium test automation which will exponentially boost our testing execution speed. Conclusion As we have seen in this Protractor testing tutorial, that since Protractor is built upon Selenium and mostly used for Angular websites, it inherits properties from them. This is the reason we use Selenium locators in protractor, and it adds more charm to the framework and makes it more robust when used to the fullest. On the other hand, Protractor is not just about Selenium locators there are many other aspects and features of the protector testing available for use in the market which adds more, that we will cover eventually in our protractor testing tutorials. Previously published at https://www.lambdatest.com/blog/selenium-locators-in-protractor/
