Google+

27. Finding locators for UI elements using the Selenium IDE's recording feature



There are cases where you have found the locators for the UI elements using the FireBug and Firepath tools but while running the test, the Selenium is not able to identify the UI elements using the given locators. So what is the solution for these kind of problems?

You have to use Selenium IDE's recording feature for recording the scenario and view the proper locator value so that the Selenium can run the tests without any issues. How to use Selenium IDE's recording feature to find the locators of the UI element will be explained in the below steps:

Task - Lets find out the locators for identifying the 'Chocolate' button at http://book.theautomatedtester.co.uk/chapter2


1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the record option on the Selenium IDE is turned on by default
3. Open http://book.theautomatedtester.co.uk in the Firefox Browser
4. Click on the 'Chapter2' link as shown below:



5. In Chapter 2 page, click on the 'Chocolate' button as shown below:


6. Now find out the steps that got recorded in the Selenium IDE using the recording feature while we are performing the above operations on the http://book.theautomatedtester.co.uk application.

7. Observe that the following steps were recorded in the selenium IDE:


8. Identify the step that is related to the 'Chocolate' button as shown below:


9. View the values listed down in the Target drop down box after selecting the above identified step as shown below. 


Each of the values listed down in the above Target drop down are nothing but the locators used by the Selenium IDE for identifying the UI element i.e. Chocolate button in this example. You can copy the locators displayed in the Target drop down field and use them any where required by the Selenium Tools i.e. Selenium RC and Selenium WebDriver.

10. Select the values displayed in the Target Dropdown field one by one and click on 'Find' Button beside it. Verify that the 'chocolate' button on the application is getting highlighted in yellow color when you click on 'Find' button. If the 'chocolate' button is getting highlighted on clicking 'Find' button, it means that we are able to locate the UI element using the selected value in the Target Dropdown field. If all the values displayed in the Target dropdown field are able to locate the 'chocolate' button, then you can choose according the Priority of locators explained in previous posts.

We came to a point where learning Core Java is must else we wont be able to understand the upcoming posts on Selenium 1, Selenium 2 and Selenium Grid etc which requires Core Java knowledge. So I've decided to write posts on Java.

The next post will give an introduction on how I am going to explain the Java Concepts that are required by Selenium






Please comment below to feedback or ask questions.

Usage of Java in Selenium will be explained in next post.


26. Locate UI elements by CSS



What is CSS ?

CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed (i.e. The styles of the HTML elements are defined in the CSS document).

Suppose if you have specified that all the headings i.e. elements between the  <h1> to <h6> tags should be displayed in red color in the CSS document. When the HTML document uses this CSS document, all the heading tags in the HTML document will import the style defined for the headings in the external CSS document and display all the headings in Red color.

CSS documents save a lot of time for the developers. By changing the style properties in CSS document, the style of the elements in the HTML code changes. That is the developer wont have to go through each and every step in HTML code to change the style of the elements. 

Suppose the developer has to change the color of the headings from red to blue. By changing the color property of headings in CSS will save the time of the developers. If not he has to find all the heading tags in the HTML code and change the style properties for every tag.

What are CSS selectors ?

In CSS, selectors are the patterns used to select the elements. 

Examples of selectors:

  • .intro (Selects all the elements with the class attribute specified as class="intro" )
  • #firstname (Selects all the elements with the id attribute specified as id='firstname' )
  • * (Selects all the elements)
  • p (Select all the <p> elements in HTML code of the web page)
In this way there are many selectors in CSS which are used to locate the elements. 

1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the record option on the Selenium IDE is turned on by default
3. Open http://book.theautomatedtester.co.uk in the Firefox Browser
4. Click on the 'Chapter2' link as shown below:


5. Turn off the Record option on the Selenium IDE as shown below:


6. Click on the FireBug option on the top right side of the page and ensure that the FireBug options are displayed as shown below:


7. Click on the 'Inspect Element' option from the FireBug options, select the 'Selenium: Beginners Guide' text  and ensure that the selected text is highlighted in the HTML code as shown below:



8. View the highlighted HTML code of the selected text and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected text. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.



9. What should we do then ? Answer : As explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we don't find the ID, we need to choose CSS Locator or XPath Locator. If we have to choose between CSS Selector or XPath statement for locating the UI element, then we need to choose CSS Selector because of its advantages over XPath. How to find out the CSS locator of the inspected element will be explained in the next step.

10. Ensure that you have already installed FirePath Addon for FireFox Browser, if not go through the my  earlier Post#  5 Install FirePath Addon for FireFox to install it

11. And also go through my earlier Post# 6 How to use Firepath if you dont know how to use Firepath

12. Click on 'Firepath' tab on the FireBug options Pane as shown below:

13. Under Firepath tab, change the value from XPath to CSS as shown below:

14. Repeat Steps 6 and 7 and observe that the CSS Locator of the inspected text element is displayed as shown below:



15. Copy the displayed CSS Value in the above step

16. Click on the blank space after the existing commands in the Selenium IDE as shown below:


17. Paste the copied CSS locator (i.e. Copied in the step 15)  into the Target Text box on the Selenium IDE as shown below: (i.e. paste css=[CopiedCSS] )



18. Click on the 'Find' button beside the Target text box to find out whether the inspected text element is getting highlighted in yellow color as shown below: (i.e If the inspected text is getting highlighted in Yellow color on clicking the 'Find' button  on the Selenium IDE, it means that selenium is able to find the inspected link using the CSS Locator [ i.e. .mainheading in this example ] )



19. Type 'verifyElementPresent' command into the Command text box on the Selenium IDE as shown below:



20. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected text  (i.e. 'Selenium: Beginners Guide' text in this example ) is verified whether it is present on the page or not and the test in the Selenium IDE is passed as shown in the below video:

Click here to watch the video

Which is best XPath Locator or CSS Locator ?
XPath statements slow down the tests where as CSS selectors run faster than the equivalent XPath. So CSS Selectors are preferred out of all the available locators to identify the elements. when we are not able to locate the UI element using ID locator.





Please comment below to feedback or ask questions.

How to find the locators for identifying the UI elements using the Selenium IDE's recording feature will be explained in the next post.



25. Locate UI elements by XPath



XPath is a full programming language.

In Selenium Automation, we are going to use XPath to parse the HTML code of any web page and find out the XPath path for identifying or locating the elements on the web page.

1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the record option on the Selenium IDE is turned on by default
3. Open http://book.theautomatedtester.co.uk in the Firefox Browser
4. Click on the 'Chapter2' link as shown below:


5. Turn off the Record option on the Selenium IDE as shown below:


6. Click on the FireBug option on the top right side of the page and ensure that the FireBug options are displayed as shown below:


7. Click on the 'Inspect Element' option from the FireBug options, select the 'Selenium: Beginners Guide' text  and ensure that the selected text is highlighted in the HTML code as shown below:


8. View the highlighted HTML code of the selected text and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected text. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.



9. What should we do then ? Answer : As explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we don't find the ID, then we need to choose XPath or CSS locators. In this case though the CSS Selector has the high priority over XPath, for the explanation point of view I am choosing XPath. So how to find out the XPath locator of the inspected element will be explained in the next step.

10. Ensure that you have already installed FirePath Addon for FireFire Browser, if not go through the my  earlier Post#  5 Install FirePath Addon for FireFox to install it

11. And also go through my earlier Post# 6 How to use Firepath if you don't know how to use Firepath

12. Click on 'Firepath' tab on the FireBug options Pane as shown below:

13. Repeat Steps 6,7 and Observe that XPath locator of the inspected text element is displayed as shown below:



14. Copy the displayed XPath value in the above step

15. Click on the blank space after the existing commands in the Selenium IDE as shown below:


16. Paste the copied XPath locator (i.e. Copied in the step 14)  into the Target Text box on the Selenium IDE as shown below: (i.e. paste xpath=[CopiedXpath] )



17. Click on the 'Find' button beside the Target text box to find out whether the inspected text element is getting highlighted in yellow color as shown below: (i.e If the inspected text is getting highlighted in Yellow color on clicking the 'Find' button  on the Selenium IDE, it means that selenium is able to find the inspected link using the XPath Locator [ i.e. html/body/div[1] in this example ] )



18. Type 'verifyElementPresent' command into the Command text box on the Selenium IDE as shown below:




19. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected text  (i.e. 'Selenium: Beginners Guide' text in this example ) is verified whether it is present on the page or not and the test in the Selenium IDE is passed as shown in the below video:

Click here to watch the video

Before concluding this post, I would like to let you know that:

In my experience, I've found that most of the UI elements are identified by using the XPath or CSS Selector locators. If you don't find any unique ID value to locate the UI elements, then we have to decide on using XPath or CSS Selector.

XPath Statements or CSS Selectors? Which is preferred ?

XPath statements slow down the tests where as CSS selectors run faster than the equivalent XPath. So CSS Selectors are preferred out of all the available locators if we are not able to locate the UI element using its unique ID property.





Please comment below to feedback or ask questions.

How to identify the elements using the 'CSS' locator will be explained in the next post. 



24. Locate UI elements by Link



1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the record option on the Selenium IDE is turned on by default
3. Open http://book.theautomatedtester.co.uk in the Firefox Browser
4. Click on the 'Chapter2' link as shown below:


5. Turn off the Record option on the Selenium IDE as shown below:


6. Click on the FireBug option on the top right side of the page and ensure that the FireBug options are displayed as shown below:


7. Click on the 'Inspect Element' option from the FireBug options, select the 'Index' link and ensure that the selected link is highlighted in the HTML code as shown below:


8. View the highlighted HTML code of the selected link and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected link. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.



9. What should we do then ? Answer : As explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we don't find the ID then we have to choose XPath or CSS Selector. But I am choosing Link locator for explanation purpose. Now lets go forward and once again view the highlighted HTML code of the selected/inspected Button to find out whether it has 'Link' Locator. Observe that <a href="/">Index</a is displayed in the highlighted HTML code of the inspected button (i.e. Link is named as Index in HTML format using anchor tags, so Index is the link property value of the selected/inspected element in this example as shown below:



10. Copy the link name value of the highlighted HTML code (i.e. Index in this example)
11. Click on the blank space after the existing commands in the Selenium IDE as shown below:


12. Paste the link=[Link Name] (i..e link=Index in this example) of the highlighted HTML code (i.e. which is copied in the above Step 10 ) into Target Text box as shown below:



13. Click on the 'Find' button beside the Target text box to find out whether the inspected element is getting highlighted in yellow color as shown below: (i.e If the inspected Link is getting highlighted in Yellow color on clicking the 'Find' button  on the Selenium IDE, it means that selenium is able to find the inspected link using the Link Locator [ i.e. Index in this example ] )



14. Type 'click' command into the Command text box on the Selenium IDE as shown below:


15. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected link (i.e. 'Index' link in this example ) is clicked and the test in the Selenium IDE is passed as shown in the below video:






Please comment below to feedback or ask questions.

How to identify the elements using the 'XPath' locator will be explained in the next post. 



23. Locate UI elements by Name



1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the record option on the Selenium IDE is turned on by default
3. Open http://book.theautomatedtester.co.uk in the Firefox Browser
4. Click on the 'Chapter2' link as shown below:


5. Turn off the Record option on the Selenium IDE as shown below:


6. Click on the FireBug option on the top right side of the page and ensure that the FireBug options are displayed as shown below:


7. Click on the 'Inspect Element' option from the FireBug options, select the 'Button with Name' button and ensure that the selected button is highlighted in the HTML code as shown below:


8. View the highlighted HTML code of the selected Button and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected button. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.



9. What should we do then ? Answer : As explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we don't find the ID locator we've to look out  for XPath or CSS Selector. But I am choosing Name Locator for explanation purpose. Now lets go forward and once again view the highlighted HTML code of the selected/inspected Button to find out whether it has 'Name' Locator. Observe that name="but2" is displayed in the highlighted HTML code of the inspected button in this example as shown below:



10. Copy the name value of the highlighted HTML code (i.e. but2 in this example)
11. Click on the blank space after the existing commands in the Selenium IDE as shown below:


12. Paste the name value of the highlighted HTML code (i.e. which is copied in the above Step 10 ) into Target Text box as shown below:


13. Click on the 'Find' button beside the Target text box to find out whether the inspected element is getting highlighted in yellow color as shown below:


14. Type 'click' command into the Command text box on the Selenium IDE as shown below:


15. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected button (i.e. 'Button with name' button ) is clicked and the test in the Selenium IDE is passed as shown in the below video:

Click Here to watch the video





Please comment below to feedback or ask questions.

How to identify the elements using the 'Link' locator is explained in the next post.