301. Locate UI elements by CSS

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

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 ] )

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: 

_driver.findElement(By.cssSelector(".mainheading"));

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.