Search uftHelp.com:

Thursday, 20 November 2014

Learn Object Spy in UFT

Hello Friends!! My name is object spy. You can find me in my new avatar of hat and goggles in UFT. Today I am going to tell you about myself.

Object spy in UFT
My new look 

Introduction to Object Spy?

I am an inbuilt tool which comes bundled with UFT, I help automation testers with following capabilities:-


1. Highlight the object. (How to do highlight in Selenium)
2. Adding objects to Object repository.
3. Check the properties of object (also you copy that to clipboard).
4. Check what all the operations that can be performed on the object.
Object Spy UFT
Object Spy UFT

How to launch me?

1.       From menu bar icon

Launch object spy from menu bar
Launch from Menu Bar
2.       Tools -> Object Spy

Object Spy in Tools
Object Spy launch from Tools
3.       Resources -> Object  Repository Manager

Launch object spy object repository manager
Launch from object repository manager
4.       Resources -> Object Repository
Launch Object spy from local OR
Launch from local OR

Understand my UI?

Hand: - This is the point where you can start my interaction with the objects, just click it and move my hand over the required object and ill provide you the properties which is consumed by UFT in object identification. Moreover you can press CTRL key to hide my hand to perform normal operations of mouse.
Press CTRL key in object spy UFT
Working with hand icon in object spy

Highlight:-
This feature of mine will be disabled until and unless no object is added to my UI.
Highlight button is disabled
Highlight is disabled 
Highlight button enabled in object spy
Highlight/add to OR/ Copy to clipboard are enabled one's object is added
One’s the object is added ill help you highlight that particular object in the application (with a blink around that object.)

Note:
Incase I am not able to find the object due to nonexistent of object or properties are not unique, I’ll generate an error message like below.

Highlight failure message UFT
Error message for non exiting object in application 
Add object to object repository (OR):-
Using this feature you can add the selected object to object repository.

Add objects to OR in object spy
Add objects to OR

Note: -
  • Only the selected object from the hierarchy will be added to OR
  • One’s that object is added to OR, this button will become disabled and small bucket like symbol will appear next to the object.
  • Object will be added to local Object repository incase i am launched from Local object repository or from menu bar icon or from tools options. I will add object to shared OR only incase i am launched from object repository manager.


Adding object to OR from object spy
Object added to OR 

Copy to clipboard:-
Click on this button to copy all the object properties in ,name:=value pair combination. 
Copy to clipboard in object spy
Copy to clipboard in Object Spy

Paste them in any of the editor say notepad, to employ in automation.

Copy object properties in object spy
Copied object properties from object spy
Note:
This feature is important while working with descriptive programming(DP) in UFT, as you can utilize this properties in DP.

Keep me on Top while spying:-
You can keep me on the top of the application while hand button is active or make me invisible while object spy is active.

Keep object spy on top while spying
Keep object Spy in top of Application while spying 
Tips:-
I am really powerful, as when I am active, you can’t perform any operation in UFT, so you need to close me before you can work on UFT or Object repository manager.

How to work with me:-

Launch me -> click on hand -> hover over the object with which you want to work -> select it -> Try to highlight (to cross check that we have captured the correct object) -> add to OR / copy to clipboard/ check properties or operations that can be performed on object

Note:-
  • Under properties: - we can select identification and native properties/operations.
  • Identification Properties are properties that UFT uses to identify objects in application, these come as name value pairs like “title: =HOME”.


Object Spy identification properties dialog box
Object spy Identification Properties

When to use Native properties/operations?

Sometimes my identification properties are not enough to fulfil many automation requirements. To deal with these problems you can leverage ‘Native Properties' of the application under test.

Note:-
You can retrieve native properties value for an object using .object

Below example shows the native properties/methods of link object.
Native method of link in UFT
Working with Native properties and Methods
You can find the same native methods/properties for link in my UI.


Link native methods in UFT
Link Native methods

  • Native properties are properties as created by the creator of object, e.g. Microsoft is creator for IE explorer objects.
  • Identification properties are subset of native properties.
  • We can use .object to retrieve Native Properties, utilize native operations, and manipulate native properties.


Hope this crisp introduction about myself, help You know and understand my usage in UFT. Do share your comments or feedback below . Will be happy to hear from You. Bye bye J



Wednesday, 19 November 2014

How to implement Highlight in Selenium WebDriver?

Highlight is the most prominent feature used in Object Spy in UFT/QTP. But the question comes into our mind can we have the same facility in Selenium also?.

Answer is YES!!


Highlight selenium
I want to highlight object in selenium

Why we use Highlight?
Highlight plays crucial role in  debugging of  test script. One way to know steps being performed in browser is to highlight the web page elements.

How is it possible?

Core principle is to use "JavaScriptExecutor" to inject javascript into our application, which will change the CSS properties of the element at runtime and we can pinpoint(visible see) the element with changed set of properties.

Example:- We can simply change the  the backgroundColor/border of the specified element yellow.(Like we see on clicking Find button in Selenium IDE).

Note:-

In Selenium RC we had a dedicated command for the same.
Syntax:-
selenium.highlight("element Locator"); element locator = id,css,xpath..

Code:-


JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.border='2px groove green'", element);

                                                                  OR


JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "color: Red; border: 2px dotted solid green;");
js.executeScript("arguments[0].setAttribute('style', arguments[1]);",element, "");


Explanation:-

Don't be afraid from the messy code, lets try to understand it ,
Arguments[0].style.border:- this script is injecting the CSS style tag into the element , and making its border settings with a 2px wide green line with groove look.
Element :- This is the element around which border will be drawn.

We can also try the following code also :-

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('test').style.border='2px groove green';");  

Working Demo:-
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;


public class HighLightMe {

 public static void main(String[] args) throws InterruptedException {
  WebDriver driver = new FirefoxDriver();
  //Open Application
  driver.navigate().to("http://www.uftHelp.com");
  //Maximize the browser
  driver.manage().window().maximize();
  //Find the element to highlight
  WebElement element = driver.findElement(By.xpath("//a[contains(text(),'Home')]"));
  //Function call to Highlight the element
  fnHighlightMe(driver,element);
  

 }

 public static void fnHighlightMe(WebDriver driver,WebElement element) throws InterruptedException{
  //Creating JavaScriptExecuter Interface
   JavascriptExecutor js = (JavascriptExecutor)driver;
   for (int iCnt = 0; iCnt < 3; iCnt++) {
      //Execute javascript
         js.executeScript("arguments[0].style.border='4px groove green'", element);
         Thread.sleep(1000);
         js.executeScript("arguments[0].style.border=''", element);
   }
 }
 
}


Learn More

Tuesday, 18 November 2014

What is JavaScriptExecutor in Selenium?

What is JavaScriptExecutor?

JavaScriptExecutor is an interface which provides mechanism to execute Javascript through selenium driver. It provides “executescript” & "executeAsyncScript" methods, to run JavaScript in the context of the currently selected frame or window. 

JavaScriptExecutor in Selenium
Lets inject Javascript into Browser using Selenium
Why we use it?

To enhance the capabilities of the existing scripts by performing javascript injection into our application under test.

In simple words  “Javascript can be executed within the browser with the help of JavaScript Executor.”

Package:-

import org.openqa.selenium.JavascriptExecutor;

Syntax:-


JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript(Script,Arguments);


script - The JavaScript to execute
Arguments - The arguments to the script.(Optional)


Scenario’s

1.How to generate Alert Pop window in selenium?

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
Js.executeScript("alert('hello world');");


2.How to click a button in Selenium WebDriver using JavaScript

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();", element);


3.How to refresh browser window using Javascript ?

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
driver.executeScript("history.go(0)");

4.How to get innertext of the entire webpage in Selenium?

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
string sText =  js.executeScript("return document.documentElement.innerText;").toString();



5.How to get the Title of our webpage ?

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
string sText =  js.executeScript("return document.title;").toString();



6.How to perform Scroll on application using  Selenium

Code:-
  JavascriptExecutor js = (JavascriptExecutor)driver;
  //Vertical scroll - down by 50  pixels
  js.executeScript("window.scrollBy(0,50)");

7.How to click on a SubMenu which is only visible on mouse hover on Menu?

Code:-
    JavascriptExecutor js = (JavascriptExecutor)driver;
    //Hover on Automation Menu on the MenuBar
    js.executeScript("$('ul.menus.menu-secondary.sf-js-enabled.sub-menu li').hover()");
8.Implement Highlight in Selenium?

9.How to navigate to different page using Javascript?

Code:-
JavascriptExecutor js = (JavascriptExecutor)driver;
//Navigate to new Page
js.executeScript("window.location = 'https://www.facebook.com/uftHelp'");



Working Demo:-
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;


public class JavaScriptExecuter {

 public static void main(String[] args) {
  WebDriver driver = new FirefoxDriver();
  //Launching the browser application
  driver.get("http://www.uftHelp.com");
  //Adding wait
  driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
  //Maximize window
  driver.manage().window().maximize();
  //Creating the Javascriptexecutor interface object by Type casting
   JavascriptExecutor js = (JavascriptExecutor)driver;
  //Fetching the Domain Name 
  String sDomain = js.executeScript("return document.domain;").toString();
  System.out.println("Domain = "+sDomain);
  //Fetching the URL 
  String sURL = js.executeScript("return document.URL;").toString();
  System.out.println("URL = "+sURL);
  //Fetching the Title
  String sTitle = js.executeScript("return document.title;").toString();
  System.out.println("Title = "+sTitle);
  //Vertical scroll - down by 200  pixels
  js.executeScript("window.scrollBy(0,200)");
  System.out.println("Successfully did the vertical scroll by 200px");
 
 }

}

Monday, 17 November 2014

Working with Action class in Selenium

To perform Advanced User Interactions, like drag and drop, keyboard events; selenium came up with Action and Actions class under a  comprehensive API, named as Advanced User Interaction which facilitate user actions to be performed on a application. Thus users can use this API to simulate usage of keyboard or mouse events.
Learn Action class in Selenium
Lets do some Action in Selenium


Example:-

  • To double-click a control we have DoubleClick(), method of Actions Class.
  • To Send keyboard actions, we have SendKeys() ,method.(Equivalent to WebElement.sendKey(...))
  • Clicking the mouse button that brings up the contextual menu.we can use “ContextClick()”, method.

Package:-

import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.Action;

Syntax:-


 Actions oAction=new Actions(selenium);
 oAction.contextClick(element).perform();
  
Methods of Action class selenium
Actions Class Methods


Explanation:-

We need to import above packages to access the action and actions class methods.Create the actions class object and access the range of available methods.

What about multiple mouse and keyboard actions?

In above case we simply performed one action on the element, incase we want to perform sequence of events on the same element, we can achieve same by using build method.

Code:-


   Actions oAction=new Actions(selenium);
   Actions moreActions = oAction
           .moveToElement(element)
           .click()
           .keyDown(element,Keys.SHIFT)
           .sendKeys(element,"selenium");

   Action enterInCaps= moreActions.build();
   enterInCaps.perform();


Scenarios:-

1.How to right click and open the application in new window.

Code:-
        Actions oAction=new Actions(selenium);
        oAction.contextClick(element).perform();
        oAction.sendKeys("w").perform();



2.How to fetch tool tip of a control in Selenium .

Code:-
 Actions oAction=new Actions(selenium);
 oAction.clickAndHold(element).perform();

3.How to send text in capital letters into a text-box?

Code:-
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;


public class ActionClass {

 public static void main(String[] args) {
  WebDriver selenium = new FirefoxDriver();
  System.out.println("Launching Browser");
  //Opening the URL
  selenium.get("http://www.uftHelp.com");
  //Implicit wait for the browser to launch
  selenium.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
  //Google Search Text-box 
  WebElement element =selenium.findElement(By.id("gsc-i-id1"));
  //Creating action class object
        Actions oAction=new Actions(selenium);
        //Creating action collection to perform numerous methods on element
        Actions moreActions = oAction
           .moveToElement(element)
           .click()
           .keyDown(element,Keys.SHIFT) //for caps
           .sendKeys(element,"selenium");
        
        Action enterInCaps= moreActions.build();
        enterInCaps.perform();
         System.out.println("Text is entered in Captial letters"); 
  //Closing the browser 
  //selenium.quit();
 }

}

4.How we can drag and drop element in selenium?
  
Code:-
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;


public class DragAndDrop {

 public static void main(String[] args) {
  
  WebDriver selenium = new FirefoxDriver();
  System.out.println("Launching Browser");
  //Opening the URL
  selenium.get("http://jqueryui.com/resources/demos/droppable/default.html");
  //Implicit wait for the browser to launch
  selenium.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
  //Identifying the elements to perform action 
  WebElement draggable = selenium.findElement(By.xpath("//*[@id='draggable']"));
  WebElement droppable = selenium.findElement(By.xpath("//*[@id='droppable']"));
  Actions oAction = new Actions(selenium);
  //Performing Drag and Drop operation 
  oAction.dragAndDrop(draggable, droppable).perform();
  System.out.println("Successfully completed the Drag-Drop operation");
 }

}


Note:- we can also re-size the control, just need to change syntax a bit 
oAction.dragAndDropBy(resize, 400, 200).perform();

5.How to refresh a application window using Action class?

Code:-
 Actions oAction=new Actions(selenium);
 oActions.keyDown(Keys.CONTROL).sendKeys(Keys.F5).perform();

Sunday, 16 November 2014

Let's learn JavaScript Hoisting

When was the last time, you encountered confusing questions on "JavaScript Hoisting" in your interview?

Not very long back if you are looking for change :)

Today's topic is very simple, but most misunderstood concept in our coder's fraternity.

Lets try to learn sharpen our concepts and be ready to face the interview panel with confidence.

Javascript Hoisting
Hoisting


What is JavaScript Hoisting?

JavaScript Hoisting(Raise Up), in simple words refer to moving declarations to the top.(Like our flag hoisting ceremony in school times ).

Technically it is the default behavior of JavaScript, to shift all the declarations to the top of the function or global scope .

Principle:-

In other words, declaring a variable anywhere in the code is equivalent to declaring it at the top which allows a variable to be used before it is declared. 

However, only the declaration will be hoisted. If the variable is initialized, the current value, at the top of the scope, will initially be set to undefined.
Meaning:-JavaScript only hoists declarations, not initialization.


Example:-

Variable Hoisting

function bar(){
          function foo(){}
          var a=7;
}


Will be interpreted as:

function bar(){
          var a;//initialized to undefined
          function foo(){}
          a=7; // assignments are not affected by Hoisting
}


Function Hoisting
Note:- Variable name = function name = foo

var foo =3;
function bar(){
          foo= 7;
         return;
          function foo(){}
}
bar();
alert(foo);

will be interpreted as:
var foo =3;// defines foo in global scope
function bar(){
          function foo(){} // defines foo in local scope and can be rewritten as “var  foo = function(){}”
          foo= 7;            // overwrites local variable foo
         return;
}
bar();
alert(foo);



In JavaScript, functions are the first class objects like strings and numbers which means they are assigned to variables that can be passed to other functions as well.

Explanation:-

  • Function foo() is hoisted first and it will act like var foo = function(){};,as a result a local variable foo is created
  • Local variable will always get precedence over global variable if there are two variables with same name (one in local, another in global).
  • In above example, foo=7; means setting the value in the local scope. So the result of alert will be 3
  • JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.
  • Declaring variables in a function means that variables declared in a function are accessible within that function, even before they are assigned a value.


How Name Resolution Order works:-

  • Both local and global scope, have the special name this, defined in them , which points the current object.
  • Function scope also has the named arguments , defined in them which are passed to them.

Confused!! Lets comprehend with example,

For example, JavaScript will find the name in the following order when accessing a variable named bar inside the scope of a function.
1.    Use var bar; statement if it is present in current/function scope.
2.    Use function parameter if it is having the name as “bar”.
3.    Use function itself, if its name is “bar”.
4.    Look in the outer scope and repeat the entire process from point 1.




Key Learning's:
Always declare variables at the top of the scope (function/global)