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:
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. Find out whether the Name property value of the selected/inspected element is available in the highlighted HTML code. Observe that 'Name' property value is also not shown in the highlighted HTML code. 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 and 'Name' locator is the next in priority. If we don't find the ID, Name, Link locators and we dont want to use Xpath for some reasons then we've to look out for the next priority locator i.e. CSS Locator. 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 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 dont know how to use Firepath
12. Click on 'Firepath' tab on the FireBug options Pane 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:
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 ] )
18. Hence css=.mainheading is the locator we've to use in the Selenium WebDriver Automation Test Script for locating the'Selenium: Beginners Guide' heading text in the above screenshots.
Example of Selenium WebDriver Automation Test Using css=.mainheading css 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.