298. 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 we know that we are going to identify and choose the locators according to the priority from the list of locators explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we dont find the ID locator we've to look out for the next priority locator i.e. Name Locator. 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. Hence name=but2 is the locator we've to use in the Selenium WebDriver Automation Test Script for locating the Button with name Button in the above screenshot.

Example of Selenium WebDriver Automation Test Using name=but2 locator: 


Please comment below to feedback or ask questions.

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

No comments: