Protractor Training

new tutorial I am starting new Protractor training batch on Weekends. Course starts from 24-Aug-2019 [10am IST to 1 pm IST] based on online.

Interested people can confirm the seat by calling to +91 8971673487 or whatsapp to +91 9003381224. You can attend first class(3 hours) for free. Only 10 Seats in Total

Find the course content : View Content

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 involve 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.

  • WebElement Commands

    Subscribe to my youtube channel :


    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 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 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 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 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();
    											});
    										});			
    										


    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 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.

    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 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

    • 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 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 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

    Subscribe to my youtube channel :


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

    Capture Screenshot

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

    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
  • Protractor Training

    new tutorial I am starting new Protractor training batch on Weekends. Course starts from 24-Aug-2019 [10am IST to 1 pm IST] based on online.

    Interested people can confirm the seat by calling to +91 8971673487 or whatsapp to +91 9003381224. You can attend first class(3 hours) for free. Only 10 Seats in Total

    Find the course content : View Content