The main hurdle with Selenium automation is identifying the element on the web page. Once that is done, the rest is just performing actions on the element.

Since you do not know how a web page is developed, you cannot expect the developers to follow the same standard. For example, in some web pages, elements will have unique ids so that they can be easily identified while in others elements may only have classes which make them difficult to locate. Since there is no guarantee, you need to learn how to identify an element that may be nested deep within the html code.

It is therefore important that you have a basic understanding of HTML and CSS. You also need to understand the difference between id, name, tag name, div, class and span, and how they are structured.

Other pre-requisites are installing Visual Studio and following online step by step guide to create a new C# project and adding all the required selenium libraries for Firefox.

In this article, we will automate some key actions that will come up in many Selenium automation scripts/projects. The actions include:

• Opening a web page
• Clicking a button or a link to register for an account
• Entering values in text boxes
• Clicking buttons
• Hovering over a menu and then clicking sub menu
• Login/Logout of an account

For this exercise I have used the below e-commerce demo site, which is a good tool for learning basic Selenium automation (courtesy: http://toolsqa.com/).

http://store.demoqa.com/

The steps that will be automated are shown below.

Open the web page: http://store.demoqa.com/ 

Click My Account.

Then click Register. Type in username and email address and click Register button. This will then involve a manual process where you will receive a confirmation email to reset your password.

Once password is created, open login page and type in username and password, and then click Log In button.

This opens up the profile page. Hove over the logged in user account and click Logout.

At a glance, the visual studio C# Selenium project looks like below (just a snippet). I will explain the selenium code for each of the steps.

So to open the web page, use the below code. Because here we are not trying to find any element on the html code, we only need to create a Firefox driver and open the web page. Note that we would also like to maximise the Firefox browser.

Next, to click My Account, we need to know how to find it. Right click on My account and select Inspect. This will show the html code. In this case, the My Account element is <span> within <a> tagname within a <div> that can be clearly identified by the id=’account’. Because we have multiple nested elements within the code, I have used XPath here.

As you can see, in the code, XPath is defined by first identifying the <div> as //div[@id=’account’], then identifying the child <a> as /a[@class=’account-icon’] and finally identifying <span> element as /span[@class=’icon’] and clicking it.

This opens up the page with Register link. Note how there is an ImplicitWait in the code. This is to ensure that with the speed of automation, if the script is trying to locate elements before the page is fully loaded, then wait for 10 secs.

To find Register element, right-click on it and select Inspect. The XPath of the element is within a <div> with a class of ‘widget-wrapper’  and is defined by “//div[@class=’widget-wrapper’]/aside/ul/li/a”. Once selected, click the Register element.

 

To login, first go to the login page. Use ImplicitWait to allow elements to be loaded. To find the text boxes for username and password (input fields), right-click on those fields and inspect the elements. Note how the username and password fields have ids. So instead of “By.XPath”, we can simply use “By.Id” to find these elements as id is always unique on the page. After entering username and password, click the Log In button which is identified by id=’wp-submit’.

This logs in the user and takes him to profile page. To logout, hover over the user account at the top right corner, and select Logout from the sub-menu. The hover element is very deeply nested within the html code. Don’t be alarmed. No matter how long it is, there is always a way to identify the element. For the hover action, the element is as follows:

By.XPath(“//div[@id=’wpcontent’]/div[@id=’wpadminbar’]/div[@id=’wp-toolbar’]/ul[@id=’wp-admin-bar-top-secondary’]/li[@id=’wp-admin-bar-my-account’]”

The sub-menu option can be found as below:

By.XPath(“//div[@id=’wpcontent’]/div[@id=’wpadminbar’]/div[@id=’wp-toolbar’]/ul[@id=’wp-admin-bar-top-secondary’]/li[@id=’wp-admin-bar-my-account’]/div[@class=’ab-sub-wrapper’]/ul/li[@id=’wp-admin-bar-logout’]/a[@class=’ab-item’]”

Note how, wherever possible, I have used @id/@class to better identify an element within the structure. The idea here is to identify an element as accurately as possible.

Once you click the Log out sub-menu, it should take you to the below screen.

Remember, this article is just an introduction, showing you how to quickly get some basic understanding of Selenium automation. So the more you practice, the better you will get.

How about you try to automate google search?

• Open http://www.google.com
• Type in a search text
• Click enter which will return a bunch of search results
• Click ‘Images’ link at the top of the page. This will display all  images related to the searched text
• Click the first image

Remember, in google search page, they use same class many times and sometimes elements have two classes. So do a bit of research on how to find elements with those characteristics.

Using the knowledge from this article, do you think you can automate google search?