WebElement Operations

With Protractor, We can perform all the operations that we perform on a webpage and objects on webpage manually.

Most of the time web pages involves in clicks, setting values, dragging & dropping, state of the elements and the text in the elements.

To perform any operation in Protractor, we have to find the element/elements on the webpage.

Click an Element in Protractor

We can perform clicking operation using protractor, before performing the click operation we have to uniquely find the elements using locators

The height and width of element must be more than 0px to click the element using Protractor

If element is not enabled and if you perform a click on it, selenium throws InvalidElementStateException anugularjs-website-protractor Program to perform click operation in Protractor.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											it('click operation', function() {
												browser.get('https://angularjs.org/');
												browser.sleep(1000)
												element(by.linkText("angular.io")).click()
											});
										});			
										

SendKeys method in Protractor

sendKeys method in protractor sets the text into an editable elements (textbar,text area, button) without replacing the previously available content.

If you use more than one sendkeys on a field then Protractor appends all of them, Protractor will not replace existing value when we use sendKeys.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											it('sendkeys operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).sendKeys("hello")
											});
										});			
										

If you have executed above code, you might have received below error.
Failed: Angular could not be found on the page https://google.com/. If this is not an Angular application, you may need to turn off waiting for Angular.


Above error comes due to the website, we tried to perform operation on google but does google built using angular ?? Big NO.

So when we execute our scripts on non-angular websites we have to turn of the waiting for angular elements as, non-angular pages will not have angular elements.

Now modify the above program like below.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true; // for non-angular websites
											it('sendkeys operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).sendKeys("hello")
											});
										});			
										

Clear Text in an Element in Protractor

If we want to set values to a textfield in protractor, we have to clear the field first and set the value using sendkeys method in protractor

clear() method will help the user to clear the field on the webpage, if we donot clear a field then also protractor will not throw any exception but it just appends the new value with old value.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).clear();
											});
										});			
										


Submit Method in Protractor

submit() method in protractor submits a form, user can use it only along with form or with form element only.

submit() method clicks a button is a misconception, it works only when that particular button is present in side a form element in webpage (forms are formed using <form> tag).


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://SomeSite.com/');
												browser.sleep(1000)
												element(by.name('someValue')).submit();
											});
										});			
										


Get Text of an element in Protractor

text variable present in the webElements, the values present between > > are considered as text in protractor.

Protractor will fetch the values of the text, not only current element text but also the text of other elements inside that element.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.partialButtonText('out')).getTagName().then(function(textValue){
													expect(textValue).toBe("About", "Actual text is not match with expected text")
												})
											});
										});			
										


In above code getText() method will fetch the values as Promise which contains string, so we have to resolve the promise to get the string.

get Attribute of an Element in Protractor

getAttribute() method fetches the value of an attribute, in html code whatever is present in left side of '=' is attribute, value on the right side is Attribute value


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).getAttribute("title").then(function(tooltip){
													expect(tooltip).toBe("Search", "tooltip is not 'Search'")
												})
											});
										});			
										

Insight about get Attributes:

Below are few insights from my experience about the get attribute

1. Selenium return the attribute present at the time of query, if the attribute value changes after the query then selenium will not return the new value

2. getAttribute() returns blank as value if attribute is not set to any value (exception for boolean values).

3. getAttribute() returns 'true' incase if you are searching for boolean value, and the value is not set

Few Boolean attribute examples : checked, readonly, required, multiple, complete so on.

4. getAttribute() returns 'null' if there no such attribute

Get CSS Value of an Element in Protractor

getCssValue method in Protractor fetches the value of an css property of an webelement on Webpage, we have to pass the css property, which protractor have to fetch.

Whenever you want to retrieve any css property you should check the property name in the Computed tab and pass the value to the method.


											import { browser, element, by} from 'protractor'
											import { protractor } from 'protractor/built/ptor';
											describe('Protractor Typescript Demo', function() {
												browser.ignoreSynchronization = true;
												it('click operation', function() {
													browser.get('https://google.com/');
													browser.sleep(1000)
													element(by.name('q')).getCssValue("font-size").then(function(fontSizeValue){
														console.log("Font size is : " +fontSizeValue);
													})
												});
											});			
											

Css values are depends on the browser, you may not get same values for all the browser, below are few such examples

Few browsers may show 1px and other may show 1 px [ there is space in difference ]

Few browser may show rgba(0, 123, 255, 1) and other may show rgb(0, 123, 255) [ rgb and rgba difference]

Get Size of an Element in protrcator

getSize() method present in protractor determines the size of an element, size consists of two values width and height which are sum of respective attributes

Width = margin-left + margin-right + padding-left + padding-right + actual width; width get size in selenium webdriver

Height = margin-top + margin-bottom + padding-top + padding-bottom + actual height; height get size in selenium webdriver

Above images are only for info purpose, size variable returns the dictionary containing height a


											import { browser, element, by} from 'protractor'
											import { protractor } from 'protractor/built/ptor';
											describe('Protractor Typescript Demo', function() {
												browser.ignoreSynchronization = true;
												it('click operation', function() {
													browser.get('https://google.com/');
													browser.sleep(1000)
													element(by.name('q')).getSize().then(function(elementSize){
														console.log("Width of the element : "+elementSize.width);
														console.log("Height of the element : "+elementSize.height);
													})
												});
											});			
											

isDisplayed method in Protractor

isDisplayed() method in Protractor verifies and returns a boolean value based on the state of the element whether it is displayed or not.

If there is no such attribute as hidden, protractor considers that the element is displayed (visit Boolean Attribute for details) and returns true.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).isDisplayed().then(function(displayFlag){
													console.log("Displayed flag is : "+displayFlag);
												})
											});
										});			
										

isEnabled method in Protractor

isEnabled() method in Protractor verifies and returns a boolean value based on the state of the element whether it is enabled or not.

If there is no such attribute as enabled, Protractor considers that the element is enabled (visit Boolean Attribute for details) and returns true.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.name('q')).isEnabled().then(function(enabledFlag){
													console.log("Enabled flag is : "+enabledFlag);
												})
											});
										});			
										

isSelected method in Protractor

isSelected() verifies if an element is selected or not, isSelected() method returns boolean value, true if the element is selected and false if it is not.

It is widely used on check boxes, radio buttons and dropdowns in Protractor.


										import { browser, element, by} from 'protractor'
										import { protractor } from 'protractor/built/ptor';
										describe('Protractor Typescript Demo', function() {
											browser.ignoreSynchronization = true;
											it('click operation', function() {
												browser.get('https://google.com/');
												browser.sleep(1000)
												element(by.xpath("//input[@id='selected']")).isSelected().then(function(selectedFlag){
													console.log("Is element selected : "+selectedFlag);
												})
											});
										});			
										

 
Join My Facebook Group
Join Group
 

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
 
Selenium-Webdriver.Com [Group]
Facebook Group · 801 members
Join Group
Learn Selenium Webdriver Concepts and Interview Questions Learn and code
 
Copyright © CherCher Tech