HPE Software is now Micro Focus
HPE Software is now Micro Focus
Quality and Testing Blog
cancel

Using Selenium for Web Automation? Let UFT Pro (LeanFT) help you!

Using Selenium for Web Automation? Let UFT Pro (LeanFT) help you!

YossiRachelson

 

Intro

Selenium is a widely used, cross-platform, open-source framework for web application automation. Selenium’s core feature is its WebDriver API, which allows the creation of tests (scripts) in various programming languages, and run them on various browsers.

HPE UFT Pro (LeanFT) is a functional test automation solution that enables automating applications of common technologies, including web applications. In addition to its proprietary comprehensive API, LeanFT provides a plugin for the standard development IDEs that includes a variety of tools to help you efficiently create robust and maintainable tests, run them, and easily analyze their run results.

Starting with its latest release (version 14, released on January 2017), LeanFT includes a solution on top of Selenium, which is targeted to Selenium users. The solution (henceforth – “LeanFT for Selenium”) increases their productivity and enables them to create more robust and more maintainable Selenium tests.

 

LeanFT for Selenium – Quick Overview

LeanFT for Selenium is bundled with HPE UFT Pro (LeanFT) and enables Selenium users to create and maintain Selenium scripts easily. It is available for Windows, Linux and Mac, and supports the most common browsers.

LeanFT for Selenium includes the following:

 

A Java library that extends the WebDriver API with additional locators and utilities. Using this library you can create more robust / generic identifications for your objects, and use built-in utilities instead of implementing them at your end from scratch.

An IDE plugin (for Eclipse and IntelliJ) that provides you with:

o IDE project templates for Selenium projects – Using these templates you can create projects that are ready for Selenium automation, in just a few clicks

o An Object Identification Center – A powerful spying tool that enables you to efficiently build WebDriver-based object identifications, validate them, and generate the identification code easily;  reducing test creation time and improving test robustness.

 

The rest of this article will focus on the process and benefits of using LeanFT for Selenium for your automated web application testing


Creating your Selenium projects with LeanFT

The LeanFT plugin extends the IDE with project templates that enable you to easily create Selenium projects with just a few clicks. To create your Selenium projects simply perform the following steps:

 

1.  In your IDE, start creating a new project (e.g., in Eclipse: select File -> New -> Project). The “New Project” wizard opens.


2.  Under the “LeanFT” folder, select “LeanFT Testing Project”:

image001.png 

Click “Next”.


3. Then:

image002.png

  • Under “Testing Framework”, select the testing framework to use in your project.  
  • Under “Automation SDK”, select “Selenium” and use the “Browse” button to select the Selenium library (either the Selenium standalone JAR, or the collection of the Selenium Java binding JAR files). You can also create your project as a Maven project.

 

4. Click “Next”, and specify your project name and package, as with any other Java project. Finally click “Finish”.

A new project will be created:

image003_.png 

The created project automatically includes a class file in which you can start creating your test. The format of this class is based on the testing framework you selected (e.g.: JUnit). The basic packages needed in order to work with this framework and with the WebDriver API are already imported. Some imports for basic classes of the LeanFT Selenium extension library (mentioned above) are included as well. Needless to say, all the required libraries (the testing framework library, the Selenium library, and the LeanFT Selenium extension library) are automatically referenced in the project.

Now you are ready to go and implement your test. Wasn’t that easy?

 

Start implementing your test

Let’s move to the fun part. You would like to actually implement your test. You will usually start by writing Selenium code that launches your browser and navigates to the application under test. E.g., if you would like to launch Chrome and navigate to Google, your code will look like:

ChromeDriver driver = new ChromeDriver();
driver.get("http://google.com");


Then you will want to write code that interacts with objects in the application, taking care to implement the scenario you want to automate. Let’s see how to accomplish this with LeanFT for Selenium.

 

Identifying your objects

Let’s say you want to automate the scenario of searching in Google, therefore need to write code that puts some value into Google’s search field and clicks the “Google Search” button:

 image004.png


When automating application objects, you need to first create identification code for these objects. The identification code is responsible for locating these objects in the application, based on a certain search criteria.  

Now, creating this identification code is not always easy:

  1. You need to somehow understand what your options are for identifying the object
  2. If you do know how to identify it (e.g.: the object’s element includes a “name” attribute), you must make sure that this identification is unique, meaning there is an object in the application, but only one object, that matches this identification
  3. You must make sure your identification is robust. Meaning: it won’t be broken easily as a result of changes in the application (e.g.: changes in the layout), otherwise, you will find yourself investing a lot of energies in just keeping your tests relevant

 

LeanFT for Selenium enables you to easily address all of the above:

• Revealing your identification options and validating them (without the need for actually running your test) can be accomplished by using LeanFT’s Object Identification Center.
• Creating robust identifications can be done using LeanFT’s extension to the Selenium API. This extension provides you with additional locators (on top of those provided OOTB by Selenium itself) that enable you to create more “generic” identifications that are less sensitive to changes in your applications.

The good news is that the Object Identification Center is provided on top of both Selenium’s built-in locators, and the LeanFT locators. So when using it, you have a variety of identification options for your objects that allow you to create better identifications, validate them directly from the tool, and even easily generate the identification code to use in your script. In the next section we’ll see how to use the Object Identification Center to accomplish this.

 

LeanFT’s Object Identification Center (for Selenium)

The Object Identification Center enables you to easily create robust identification code for your objects. It’s included in the LeanFT IDE plugin, and can be opened from the “LeanFT” menu in the IDE menu bar:

 image005.png


Once open, this is what you will see:

 image006.png

Click the drop-down button in the upper left corner to see the list of the browsers you can spy on:

 image007.png

The actual browsers you will see depend on the platform you are working with (e.g.: in Linux, Internet Explorer won’t be presented).

Now you should launch your desired browser, by clicking it in the drop-down.

Note that you need to have the browser’s Selenium driver deployed on your machine and its location should be included in the system’s PATH (an exception for this are old Firefox versions, which do not need a driver).

Once your browser opens, navigate to the application you want to test. Then click the big “hat” button in the dialog above to start spying objects you need to create identification code for. Hover over the objects that you want to automate. When hovering over an object, you will see a rectangle surrounding it, and some information about the object that helps you understanding whether this is indeed the object you would like to automate. For instance, hovering over Google’s search field will show you this:

 image008.png

 

Then click the object. The Object Identification Center dialog will show up again, showing information about the spied object:

 LeanFT Object Identification Center for SeleniumLeanFT Object Identification Center for Selenium

Let’s understand together what we see here:

• On the left, we can see the DOM hierarchy of the spied object. The last node in the tree represents the object you spied on. Each of the objects in the tree are configurable, which enables creating more accurate and maintainable identifications for your objects.

• On the right, we can see a list of locators that can be used to identify the selected object. For each locator, we can see its value, which is fetched automatically by LeanFT. You can edit the values of these locators to create your own custom identifications (e.g.: using a regular expression as the value of a certain locator). The locators list includes both:


o Built-in Selenium locators (e.g.: className, id, name, tagName,..).
Pay attention that LeanFT automatically computes and presents values for the XPath and CSS locators.

o Additional locators provided by LeanFT on top of Selenium’s built-in locators (e.g.: attributes, role, styles, visibleText, type and more). The purposes of these locators is to expand your options and enable you to create better identifications. These locators are associated with the locators that are included in the LeanFT extended Selenium library.

 

You can hover over any of the objects in the tree and click the “Highlight” button (“eye”), in which case the corresponding object in the browser will be highlighted:

 imageXYZ.jpg

Now it’s time to actually create an identification for the object. All you need to do is select one or more of the locators in the right pane of the Object Identification Center, examine whether your selection results in a unique identification, and generate the identification code. For instance, to create an identification code for our spied object, you should:

1. Select (check) the “id” locator:

 image012.png

2. Hover over the “hat” button in the bottom-right corner to display the floating toolbar, and click the “Validate” button:

image013.png 

If the identification is successful, meaning the locators you selected produce a unique object match, the object will be highlighted in the browser, and you will see a notification in the upper area of the Object Identification Center:

 image014.png

Whenever there is more than one object in the application which matches the identification, these objects will be marked in the browser, and you will get a warning notification, e.g.:

 image015.png

If there are no objects in the application matching the identification, an error notification will appear, e.g.:

 image016.png

3. Generate the identification code, by clicking the “Generate code to clipboard” button:

 image017.png


The code will be generated and copied to your machine’s clipboard. You can now simply paste it into your script: 

driver.findElement(By.id("lst-ib"));

 

Now you can use the WebDriver API to perform the required operation on the object. For example, if you want some text to be typed into the search field, use WebDriver’s sendKeys method, and provide it with the value you want to search, e.g.: 

driver.findElement(By.id("lst-ib")).sendKeys("LeanFT");


Of course, this is just the tip of the iceberg. We’ll see more in the next sections.


More about building identifications with the Object Identification Center

In the previous section we covered the basics of the Object Identification Center and focused on how easy it is to use it for creating object identifications. Let’s take this one step further and drill down to additional options that are available when creating your identifications with the tool.


Identifying objects with LeanFT’s locators for Selenium

LeanFT extends the list of locators provided by Selenium itself, with additional locators that enable you to create more robust identifications for your objects. A classic example of this is LeanFT’s visibleText locator. As implied by its name, this locator enables locating objects based on their visible text. For instance, to identify Google’s search button, we can use the visibleText locator, providing it with the value “Google Search”. Identifications created with this locator are more robust as they are agnostic to the actual location of the objects in the DOM and to other object’s properties which might be dynamic. It also makes your code more readable and maintainable.

The syntax for using LeanFT’s locators for Selenium is similar to the one for Selenium’s built-in locators. In the case of the visibleText locator, your code will look like: 

driver.findElement(By.visibleText("Google Search")); 

This, and other LeanFT locators for Selenium, are part of the LeanFT extended Selenium library, which means you can use them in your code even without using the Object Identification Center. However, if you do use the Object Identification Center, you will be able to validate the identification without running your test and to create the identification code more easily. For instance, to create the identification code for the “Google Search” button, just spy the button, select the visibleText locator in the tool, click the “validate identification” button to test it and then generate your code using the “Generate code to clipboard” button in the floating toolbar:

 image018.png

 Let’s move on.

Another interesting LeanFT locator for Selenium is the “attributes” locator, which can be used to identify objects based on one or more of their corresponding element attributes. As an example, let’s say we are automating the process of buying a certain tablet in an online shop. Selecting the tablet is done by clicking its image:

 image019.png

We would like to automate clicking the tablet’s image. So first we need to create identification code for this image. When spying this object, we’ll have the following under the “attributes” locator:

image020.png 

The “src” attribute holds the source URL of the image. Therefore, identifying the image using this attribute might be a good idea. If we select (check) this attribute and test the identification from the Object Identification Center, we’ll see that the identification is indeed successful. All we have to do now is generate the code using the “Generate code” button. This is the code we’ll get: 

driver.findElement(By.attributes(new HashMap<String, String>(){{
	put("src","/catalog/fetchImage?image_id=3100");
}}));

 

Using regular expressions for object identification

There are cases in which we will want to identify objects using a certain locator, but instead of providing a fixed value for this locator, use a pattern which represents the value. This is very useful when we have locators whose values are dynamic, but based on a well-defined pattern.

An example:

In our online shop, after adding the tablet to the cart, we get a summary form which presents the total price of the purchase:

 image021.png

Let’s say that we would like to verify that the total price is as expected. We need to identify the price element, fetch its value, and compare it to the expected price. When spying the price element we’ll see that it has neither an id nor a name, but that its visibleText locator has the value of “$1,009.00”. So theoretically we can identify it using the visibleText locator with the value of “$1,009.00”. This is probably a bad idea. Why? Because the price is exactly what we would like to verify, so we can’t use it to identify the object... This is where regular expressions can help us: one thing we can assume about the price, is that its value starts with a “$” sign. If only we could use a pattern to identify objects it would be great, right? Well, with LeanFT for Selenium we can do this easily:

After spying the price element, we’ll update the visibleText locator’s value with a regular expression that represents a price (meaning: starts with a “$” sign), and mark this value in the Object Identification Center to be treated as a regular expression:

 image022.png

If we now validate the identification (using the “Validate” button) we’ll see that price is identified correctly, but that the identification it is not unique (if you look carefully at the “order summary” image above, you will understand why). So we can refine the identification by adding, for example, an additional locator like the “className” locator:

 image023.png

If we validate the identification again, the Object Identification Center will gracefully tell us that we have a successful unique identification. Now we can easily generate the identification code, using the “Generate code” button. Let’s do this and assign the returned object to a WebElement named “priceElement”:

WebElement priceElement = driver.findElement(new ByEach(
		By.className("roboto-medium totalValue ng-binding"),
		By.visibleText(Pattern.compile("\\$.*"))
	));

We can see that the visibleText locator uses a regular expression as its value. We can also see that in this case the identification is done by a combination of two locators (className and visibleText). This is supported by LeanFT for Selenium’s SDK, using the “ByEach” locator (an extension of the Selenium API which enables locating objects by more than one locator).

Now we can easily perform the price verification. The code above returns an object of type “WebElement”. We can use the WebElement’s interface to fetch its text (the price) and compare it to the expected price, e.g. (using JUnit’s assert): 

assertEquals("$1,009.00", priceElement.getText());

 

Identifying objects using their parents

In some cases, it might be a good idea to identify objects, while using one or more of their parents (in the hierarchy) as an anchor for identification. Let’s see an example. Take a look at the following image, taken from our virtual online shop:

 image024.png

Let’s say we want to build an identification for the left tablet’s “View Details” link. When spying this link, we’ll see that it has neither an id nor a name:

image025.png

We can identify it using its visibleText locator, which has the value “View Details”. However, in this case we won’t get a unique identification, as the same exact link appears also for the tablet in the right. We could use the “Index” locator, presented at the top of the Object Identification Center, to resolve this conflict. However, using an Index is not a best practice and it is better to use it only when there are no better options. In our case, we do have a better option:
We notice that in the tree, the “div” node (two levels above the selected node) has a “name” (“HP_ELITEPAD”). If we hover over it and use the “Highlight” button (described earlier) to highlight the corresponding object in the application, we see that an element in the page that includes the tablet’s image and its title (“HP ELITEPAD 1000 G2”) is highlighted:

image026.png

Selecting this “div” node in the tree, we’ll see that it has an id of “HP_ELITEPAD”. So, we figure out that we can create a unique identification for our link by relying on this parent-div. All we need to do is select the “div” node in the tree, checking its “id” locator, then selecting our leaf node and its visibleText locator, and validate its identification using the “Validate” button. We’ll get a unique identification:

image027.png


Now we can use the “Generate code” button to generate our identification code based on the identification we created in the Object Identification Center. The generated code in this case will be:

driver.findElement(new ByChained(
		By.id("HP_ELITEPAD"),
		By.visibleText("View Details")
	));

“ByChained” is a built-in Selenium locator for identifying objects based on their parents. It is equivalent to identifying the object as: 

driver.findElement(By.id("HP_ELITEPAD")).findElement(By.visibleText("View Details"));

 

LeanFT Extended Selenium API

As discussed above, LeanFT provides an API on top of the WebDriver API, extending it with additional locators and utilities. We have seen the usage of some of the locators. At this point I’ll just emphasize that the extended Selenium API stands alone, meaning: as long as this library is referenced from your project, you can use it in your scripts, regardless of the usage of the Object Identification Center.  In case you wondered,  you can use the extended API in your scripts also when running your tests against a Selenium grid

In addition to the locators provided, the API also includes some useful utilities, e.g.: a utility for highlighting a certain object in the application (which can be useful when debugging your test) and a utility which takes a snapshot of a specific object. Let’s talk about the last one:

Taking a snapshot of a given object in the application can be very useful in many situations, for example if you are building a reporting framework for test executions, as well as in other situations. Selenium provides an API which enables you take a snapshot. However, you can use it only for taking a snapshot of the entire page in the browser. The snapshot utility provided by the LeanFT for Selenium API enables you to easily take a snapshot of a specific object. Let’s say we want to take a snapshot of our tablet’s image object. First, we need to build an identification for the object. Well, we have actually already done this:

WebElement tabletImage = driver.findElement(By.attributes(new HashMap<String, String>(){{
	put("src","/catalog/fetchImage?image_id=3100");
}}));

Of course, there are several other ways to identify this object.

We then use LeanFT’s API to take the snapshot of this object:

 

RenderedImage tabletSnapshot = Utils.getSnapshot(tabletImage);

We can save the image to the file system as following:

File tabletSnapshotFile = new File("c:\\tabletImage.jpg");
ImageIO.write(tabletSnapshot, "jpg", tabletSnapshotFile);

 

You can also easily take an object snapshot using the Object Identification Center.
Simply spy the object and then press the “Capture object image” button:

image028.png

A snapshot of the object is automatically taken, and a file dialog opens, enabling you to provide a name and location for the image file.

 

Outro

So… We reviewed the different options you can use to create your Selenium tests with LeanFT and how to easily create tests which are more robust and maintainable.

If you would like to play with LeanFT for Selenium yourself, you can download the full version of UFT Pro (LeanFT), available for a 60-day free evaluation here. You can find useful information about LeanFT, in the LeanFT Help Center.

We will be glad to hear your feedback, including ideas for additional capabilities you would like to see in LeanFT for Selenium. To provide your feedback just send us an email to:
leanft_contactus@hpe.com

Yossi Rachelson
HPE LeanFT Functional Architect
  • Future of Testing
About the Author

YossiRachelson