WebElement Operations in Protractor

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

Most of the time, web pages involve 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.

Protractor Locators

WebElement Commands

Click an Element in Protractor

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

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

If the element is not enabled and if you perform a click on it, protractor 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()
	});
});

papaparse module for Reading CSV

SendKeys method in Protractor

sendKeys method in protractor sets the text into an editable element (text bar, 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 the above code, you might have received the 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.


The above error comes due to the website; we tried to perform an 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 off 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")
	});
});

Create Select class for handling dropdowns in protractor

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 the sendkeys method in protractor

the clear() method will help the user to clear the field on the webpage, if we do not clear a field, then also protractor will not throw any exception, but it just appends the new value with the 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();
	});
});

Find Element with Javascript Executor in Protractor

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 inside a form element in the 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 the 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 the above code, the getText() method will fetch the values as Promise, which contains the string, so we have to resolve the promise to get the string.

handle Javascript Alerts Protractor

get Attribute of an Element in Protractor

getAttribute() method fetches the value of an attribute, in HTML code whatever is present in the left side of '=' is an attribute, the value on the right side is an 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

  • 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
  • getAttribute() returns blank as a value if the attribute is not set to any value (except for boolean values).
  • getAttribute() returns true in case if you are searching for a boolean value, and the value is not set.

    Few Boolean attribute examples : checked, readonly, required, multiple, complete so on.
  • getAttribute() returns null if there no such attribute

Get CSS Value of an Element in Protractor

getCssValue method in Protractor fetches the value of a CSS property of a webelement on Webpage; we have to pass the CSS property, which protractor has 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 depend on the browser; you may not get the same values for all the browser, below are few such examples

Few browsers may show 1px and others may show 1 px [ there is space indifference ]

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

winston logging

Get Size of an Element in protractor

getSize() method present in protractor determines the size of an element, size consists of two values width and height which are the 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);
		})
	});
});

WebElement State with the protractor

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, the 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);
		})
	});
});

Capture Screenshot in Protractor

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 checkboxes, 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);
		})
	});
});

Send emails using NodeMailer

Protractor Interview Questions

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • Sowjanya
    Hi KarthiQ,
    
    Could you please add tutorial with examples and differences for functions filter, map, each, foreach, evaluate and reduce.
    It would be great if you also provide some code and the control flow of execution of it in case of 
    1. multiple promises. 
    2. await and async examples.
    I would like to know why javascript is asynchronous?( may be a stupid question )
    
    
    
    
    Reply