29. 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. We can use any of these listed locators identified by the Selenium IDE in the Selenium RC Tests as shown below:

• First listed item in the Target drop down list of the above screenshot (i..e.  name=verifybutton1 ): We can use this name locator as shown in the below example:

              object1.click("name=verifybutton1");

• Second listed item in the Target drop down list of the above screenshot (i.e. css=input[name="verifybutton1"] ):

             object1.click("css=input[name="verifybutton1"]");

• Third listed item in the Target drop down list of the above screenshot (i.e. xpath=//input[@name='verifybutton1'] ):

            object1.click("xpath=//input[@name='verifybutton1']");

• Fourth listed item in the Target drop down list of the above screenshot (i.e. xpath=//div[@id='divinthecenter']/input[2] ):

            object1.click("xpath=//div[@id='divinthecenter']/input[2]");

• Fifth listed item in the Target drop down list of the above screenshot (i.e. xpath=//div[5]/input[2] ):

            object1.click("xpath=//div[5]/input[2]");

Please comment below to feedback or ask questions.

Using click( ) method will be explained in the next post.