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 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.


madhavi said...

Hi Arun,

I can see the same o/p if we don't give 'click' in command textbox.Since the testcase is recorded we are getting same o/p.What is the use of giving 'click' there and what is the ideal difference in both cases?

Thanks in advance.

Arun Motoori said...

@Madhavi - I am practically showing how the element is identified and clicked using Click command. If its clicked, we can double assume that the element is identified properly.

madhavi said...

@Arun - Thanks for the reply :)

Unknown said...

Hi Arun,

In the above example, if i do inspect with Xpath and CSS then i'm getting same value for button with name, is this valid??

Arun Motoori said...

Yes its valid, but Xpath and CSS comes next in terms of priority when compared to ID and Name usage for identifying locators. So we locate elements by Id first, if not possible go for Name, like this CSS and after it Xpath.

Unknown said...

Hi Arun,
when i try to run step13.i dont find any highlited with yellow colour it shows 0failure.what does it mean?
is there any error?

Unknown said...

Hi Arun,

If i give the click command,the testcase is getting failed.why the testcase is failing?