Web Elements – Selenium’s Golden Nuggets

Web elements are the foundation of all that is visible through a browser. For more information check W3Schools. A web page is made up of HTML elements. These are  buttons,  links, labels, input, etc. etc. etc. Selenium WebDriver addresses and recognizes these as Web Elements. These Web Elements are what Selenium interacts with to interrogate and manipulate a web page.

A Test Automation Developer uses Selenium to locate , interrogate and interact with these Web Elements to produce a desired state and eventually feed the result to a set of verifications to pass or fail a test. So Selenium is part of a bigger picture but a very essential part.

Moving On . . .

You might question Yourself “How do I know what to look for ? First I need to see what I have and then interrogate it.” You are right we need to see the source of a web page of a site and then figure out which element we want to interact with, locate it and make sure we got the right one and then act on it. We need to be able to do this with an accurate source and not an old dirty read of the page, because a page can be very dynamic and asynchronous in nature. Luckily there is something you can do about it and avoid the hassle of having to go through a fine comb through the hundreds of lines of elements on the page source.

I will show you two ways of doing this using some tools. The first method is no longer supported however I will still show you how just in case you are working for a company such as say a bank, and you are restricted by the versions of tools you are allowed to use.

The second method is the way to go although not as easy as the first method, it is the newly supported method and that is what we are moving onto.

We will now go ahead and install some additional tools.

 

Install the latest version of Firefox ESR

You might be asking yourself why Firefox ESR and not the normal Firefox. Well Firefox ESR as its name suggests is the Extended Support Release. This is what companies use for their applications. They need a stable browser to act as a front end to the systems that they use. If the browser is always accumulating new functionality there is a risk of encountering backward compatibility issues and the result is broken legacy systems.

Therefore for this exercise we will use Firefox ESR as the basis for other important plugins that will help us identify web elements.

Navigate to https://www.mozilla.org/en-US/firefox/organizations/faq/ to get access to the latest Mozilla Firefox ESR.

Click on the Download Mozilla Firefox ESR blue button. This will take you to the following page https://www.mozilla.org/en-US/firefox/organizations/all/

Notice the multitude of supported languages. I tend to download the British English localised version (notice how I spelled localised not localized lol). At this point select your language preference and download the 64 bit version for your operating system. Since I am installing this on Windows I am downloading the 64 bit Windows version.

Go ahead and install it !

Installing Firebug

Ok once it is installed we are going are going to install our first helper plugin. Firebug integrates with Firefox and then you can edit, debug, and monitor CSS, HTML, and JavaScript live in the web pages you navigate to. Although this is no longer maintained and we should be moving onto Firebug.next, this is what the old test automation developers grew up with, so it is only fair to cover it. I still use it today.

Navigate to https://blog.getfirebug.com/2017/03/01/firebug-2-0-19/

firebug link.png

Click on the Firebug 2.0.19 link and you will be redirected to the following page

Firebug 2.png

Click on the Add to Firefox button

Firebug 1.png

The add-on starts downloading.

firebug 3.png

When the add-on is successfully downloaded the Install button is enabled. Click it to complete the installation.

firebug 4.png

If you navigate to the Extensions in your browser notice Firebug is now installed and enabled.

Navigate to any page and click on the bug.

firebug button.png

Firebug opens at the bottom of the page and you can investigate the loaded DOM for the page.

firebug highlighted and search selectedA.png

 

Installing FirePath

Navigate to https://addons.mozilla.org and in the search bar, search for FirePath. Once it is located click on the Add to Firefox button

firepath1.png

Once installed Firefox might ask you to restart. Do That. Then navigate to a page of your choice and click on the Firebug button situated on the top right next to the Search bar. Notice the new FirePath tab.

firepath2.png

Installing Firefinder

Navigate to https://addons.mozilla.org and in the search bar, search for Firefinder. Once it is located click on the Add to Firefox button

firefinder1.png

Once installed Firefox might ask you to restart. Do That. Then navigate to a page of your choice and click on the Firebug button situated on the top right next to the Search bar. Notice the new Firefinder tab.

firefinder2.png

A Demo to look for some elements

Ok so now that we have the tools installed, how do we go about using them? Let’s use my blog site as an example: I would like to be able to address the Search input box and the Search button. How do I go about it? Easy !

Click the Firebug button

firebug button.png

Once Firebug opens at the bottom click the inspect button

inspect.png

Next move the mouse to the desired web element, in this case the search input box and click it.

search input.png

notice in the HTML tab, the relevant line representing the web element is automatically found and highlighted.

search html.png

Notice the type of element which is an input, the class name and the other attributes. These can all be used in identifying a web element.

Click the FirePath tab , then again click the inspect button and then click the search text box. Notice the xpath that is automatically created to specifically point to the Search text box.

xpath for search imagexpath for search.png

Notice that the xpath itself is very specific and can become brittle in the future if this page is changed. To avoid such situations it is recommended to try and simplify and generalize the xpaths used in your tests. Let’s try :

from

.//*[@id='search-4']/form/label/input

to

//aside[@id='search-4']/form/label/input

The above returns one matching node which is the same as the Search text box. If you hover on the matching result you can see what web element gets highlighted.

highlighted xpath 1.png

 

Ok let’s move on to addressing the SEARCH button.

Click the inspect button

Next move the mouse to SEARCH button and click it.

Notice that the xpath :

.//*[@id='search-4']/form/input

Let’s change it a bit. Let’s try :

//aside[@id='search-4']/form/input

We get the following result:

xpath for search button.png

 

 

Bye Bye Firebug… Hello Firefox Dev Tools

Since the Firebug add-on is now in maintenance mode and nearing extinction, we need to look at the new way of doing things. It is time to get acquainted with the built-in Firefox dev tools and figure out how to achieve retrieving the same information to locate web elements.

We will use my blog again for this example:

Navigate to my blog

Press F12 to open up DevTools.

ff console.png

Select the console tab and type in :

$x("//aside[@id='search-4']/form/input")

xpath inconsole.png

Press enter and notice the result. The Console returns an array of one element in it, which is what we want.

xpath in console result.png

This turns out to be the SEARCH button. If you hover over the element in the array you get the following visualisation.highlighted result.png

That’s it ! This is the new way of checking for elements, in this case using xpaths (my favourite). I know I know, it is not as helpful as FirePath, but the reality is that the default result provided by FirePath tends to be a lazy way for a developer to get the gist of the xpath and then clean it up. You can do this also by looking at the html directly and then test it out by doing $x(“put your xpath here”) in the console in the Firefox devtools.

So there you go. Do spend time familiarising yourself with xpaths. There are numerous resources out there. Remember Google is your friend.

 

 

 

 

 

A Beginners Guide to Selenium: Setting up your environment

If you are in the business of automating web sites,  testing all the bits and bobs on pages, validating workflow, and pushing the boundaries of stress testing application servers, maybe even extend to denial of service tests, well then, look no further than Selenium WebDriver.

Selenium is very powerful and is backed up by major Browser Vendors. It is open source and does not come with any license fees. These are big pluses for both employers , professionals and students who can freely download the library and start using it with their preferred language. Have a look at http://www.seleniumhq.org and navigate through the site to investigate if your language of choice is supported and get on with automating! My language of choice has always been java. If your choice language is C#, Python, Ruby … then go ahead what are you waiting for ?

In this article I will describe how to set up a solid development environment that is scalable and ready for heavy-duty automation. I will describe in detail how to install the latest version of Java JDK and Eclipse EE for java which includes the very powerful Maven. I will then install TestNG which will be used to organize and drive our tests and finally download all the different WebDriver drivers for the various browsers of interest.

Finally I will write the first Selenium class example and execute against a browser.

I am very excited with the capabilities WebDriver especially Remote WebDriver and Selenium’s GRID capabilities. I personally only use this type of setup for my tests at work. It tends to be ready to scale up and also easy to  integrate with dev ops tools such as Jenkins. I will cover Remote WebDriver and GRID setup in a separate article. Jenkins deserves its own set of articles.

One step at a time …

 

Downloading and Installing the Java JDK:

Open your browser and navigate to the site java.oracle.com. On the Top Right hand side locate the link to the latest Java JDK and select it.

Screen Shot 07-25-17 at 07.54 PM

Click on the Download button under the JDK. We want the development kit not just the JRE.

Screen Shot 07-25-17 at 07.59 PM

Next accept the license agreement and select the right binary for your OS (in my case it is the Windows x64 bit installer).

Screen Shot 07-25-17 at 08.01 PM

Once the binary is downloaded successfully, locate it and execute it. Click Yes button for any security prompts and go ahead with the installation.

Screen Shot 07-25-17 at 08.14 PMScreen Shot 07-25-17 at 08.15 PM

The installer starts and displays an interactive Window. Click Next Button

Screen Shot 07-25-17 at 08.16 PM

In the next screen select optional features. I tend to leave it all with default values. Click the Next Button

Screen Shot 07-25-17 at 08.17 PM

The installer starts the background configuration.Then it prompts you to select the destination folder. I leave mine as default and click next

Screen Shot 07-25-17 at 08.17 PM 002Screen Shot 07-25-17 at 08.19 PM

Then the installers starts doing its job. Just sit tight and wait for the installer to complete.

Screen Shot 07-25-17 at 08.19 PM 001

Once the Installer states it has completed the installation, click the  close button.

The next task is very important and this is the way eclipse (my favourite IDE) will know how to find the JDK and be able to launch itself. We need to set a system environment variable JAVA_HOME.

 

From  explorer, select the Computer, right mouse click and select Properties from the menu.

Screen Shot 07-25-17 at 08.26 PM

This will open the System window. Choose the Advanced system settings option on the left hand side.

Screen Shot 07-25-17 at 08.28 PM

In the new window click Environment Variables.Screen Shot 07-25-17 at 08.28 PM 001

We want to add a system variable so click the New… button at the bottom of the window.

Screen Shot 07-25-17 at 08.29 PM

Enter the following values :

Variable name: JAVA_HOME

Variable value: C:\Program Files\Java\jdk1.8.0_141

Note if you have a different version of java (later version than mine) and also if you have changed the default installation path, this must be reflected in the value field.

Click OK to accept the new system variable. Click OK to close the Environment Variables window.

Screen Shot 07-25-17 at 08.31 PM

And Finally to verify that the JAVA_HOME is working , open a command prompt and type in java -version. You should not get any errors and the version of java is displayed on the screen.

Screen Shot 07-25-17 at 08.32 PM.PNG

So now that we have Java installed we move on to the next part of the setup which is the IDE. In this instance I am installing Eclipse. As of this article Oxygen is the latest version, so I will go ahead with that.

 

Downloading and installing Eclipse:

Go to the URL http://eclipse.org

Capture1.PNG

Select the Packages button.

Capture2.PNG

Select the Java EE version. In my case I am downloading the x64 version for Windows.

Capture3.PNG

Hit the download.

Capture4.PNG

Save the file to your downloads location. We will extract it later.

Capture5.PNG

Once the download completes, extract the zip file to the Installation location.

Capture6.PNG

I tend to keep my installed folders in partent folder called Apps. Do what best works for you.

Capture7.PNG

Click the Extract Button.

Capture8.PNG

Once the Extract is complete we are ready to work on customizing eclipse.

Customizing Eclipse:

To Launch eclipse, navigate to the installed folder. Launch the eclipse executable

Capture9.PNG

Click the Run buton. And off it goes.

Capture10.PNG

Accept the default workspace provided and click the Launch button

Capture11.PNG

The IDE loads and you are presented with a welcome page. Close the page and let’s get down to business.

Capture12.PNG

Installing TestNG:

TestNG will be our mechnism / framework to group and invoke tests. We can do loads of beautiful test customizations. So lets go ahead and install. In the IDE navigate to the Help Menu and select Eclipse Marketplace.

Capture13.PNG

In the Find field enter the string testng and hit Enter. The listing updates and shows the TestNG plugin for Exlipse. Click the Install button.

Capture14.PNG

Click the Confirm button.

Capture15.PNG

Accept the license and click The Finish button.

Capture16.PNG

Notice the installation progress in the bottom right hand corner of the IDE.

Capture17.PNG

When you get a warning about unsigned software click the Install anyway button.

Capture18.PNG

Click the Restart Now button.

Capture19.PNG

Once the Eclipse IDE restarts go to the Window menu and select Preferences

Capture20.PNG

Notice the new addition of a TestNG entry on the left hand side of the window. This means TestNG has installed successfully.

Capture21.PNG

Click the Cancel button to dismiss the window.

 

Setting up a Maven Project and configuring the POM:

The beauty of installing Eclipse IDE for Java EE is that it comes already configured with Maven built in plugin. This is ideal since Maven is one of the most popular tools to maintain external libraries in synch with your java project. Most software companies use the Maven repository to store and regulate softwate library releases. Since we will be using TestNG and also Selenium libraries, we might as well take advantage of Maven.

So first thing is to create a new Maven project.

In your eclipse IDE Select File Menu -> New -> Maven Project

Capture8.PNG

Click the Next button.

Capture9.PNG

Leave the default archetype and click the Next Button

Capture10.PNG

Fill in the Group id with your company’s URL name in reverse. Fill in the project name in the Artifact id. In my case it used the values com.code-test-automate and AutomateMyWay. Click the Finish button.

Capture11.PNG

You will see in the Project explorer and new project listed. In my case it is the AutomateMyWay.

Capture12.PNG

Change the perspective to Java. Select Window menu -> Perspective -> Open Perspective -> Java. The IDE refreshes to the Java perspective.

Capture13.PNG

You can now expand the project and see the package definition and the default source and reference files.

Capture14.PNG

Notice there is a pom file. Double click it to open it. We are going to edit this with references to dependencies we need. Click the tab pom.xml.

Capture15.PNG

Insert the following :

<dependency>
   <groupId>org.testng</groupId>   <artifactId>testng</artifactId>   <version>6.11</version></dependency>
<dependency>
   <groupId>org.seleniumhq.selenium</groupId>   
   <artifactId>selenium-java</artifactId>   
   <version>3.4.0</version>
</dependency

Click CTRL + s to save the pom.xml

Capture16.PNG

Once the pom.xml is saved. Select Project menu -> Clean. This will force the new dependencies to be downloaded from the maven repos.

Capture17.PNG

Click the Clean button

Capture18.PNG

Now go to your user directory and look for the .m2 directory. Notice the 2 new directories one Seleniumhq and one testng.

Capture22.PNG

 

Now before we delve into the coding world of automation we need to make sure we have the browser and associated driver software. I am going to use Internet Explorer which comes with the OS. If you want to use a different browser consult the http://www.seleniumhq.org pages and go ahead and download the appropriate driver for you browser of choice.

 

Installing the Internet Explorer Driver

In the browser navigate to http://www.seleniumhq.org. Click on the link Selenium WebDriver

Capture4.PNG

 

Select the Download tab.

Capture5.PNG

 

I want to use the 64 bit driver for Internet Explorer for Windows. Click ont the 64 bit Windows IE link.

Capture24.PNG

The download window pops up. Select Save File and click the OK button.

Capture25.PNG

I decided to save mine in a directory structure that is easily maintainable. I chose c:\Drivers\WebDriver\IE. When you have selected the destination click the OK button.

Capture27.PNG

And here we have the driver ready for us to use and abuse.

Capture28.PNG

 

Writing your first automation program

Time to code and run some magic. Under the project structure in ser/main/java locate App.java and double click it. It will oprn int he main view. Select all the code and replace it with the following :

package com.code_test_automate.AutomateMyWay;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.remote.DesiredCapabilities;

/**
 * Hello world!
 *
 */
public class App {
 public static void main(String[] args) {

String service = "C:/Drivers/WebDriver/IE/IEDriverserver.exe";
 System.setProperty("webdriver.ie.driver", service);
 DesiredCapabilities capabilities = DesiredCapabilities.internetExplorer();
 capabilities.setCapability("requireWindowFocus", true);
 
 // Create a new instance of the Internet Explorer driver
 WebDriver driver = new InternetExplorerDriver();
 driver.manage().window().maximize();
 // Launch the Online Store Website
 driver.get("http://www.code-test-automate.com");

// Print a Log In message to the screen
 System.out.println("Successfully opened the website www.Store.Demoqa.com");

// Wait for 5 Sec
 try {
 Thread.sleep(5000);
 } catch (InterruptedException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }

// Close the driver
 driver.quit();
 }
}

Press CTRL + s to save.

Your IDE should look like below

Capture30.PNG

Provided you did not commit any typing errors you should be ready to run this. Right click on the App.java. Select Run As -> Java Application

Capture31.PNG

The program executes. It launches Internet Explorer and navigates to this website! After 5 seconds it closes the browser and the program terminates.

Capture32.PNG

This concludes out first run! You are now set up and ready to start exploring the world of Selenium WebDriver. In the next posts I will introduce TestNG and we will start writing test scripts that run automation tasks with Selenium WebDriver.

I hope you enjoyed this , come back for more!

 

It all starts with a first step.

This is my very first post! YAY!!!. My name is Luzju Cardona , my mother always called me Luallan,  every body else calls me Lu. I am a an automation techie and love to see things happening like magic! So I have finally decided to create a site to put all the stuff that I learned during my automation feats. The idea behind this site is to share all the knowledge gained and the pains I went through to get automation off the ground, the challanges I faced and still face on customer projects and hopefully a meaningful one stop shop for your automation queries.