26. Locate UI elements by CSS

What is CSS ?

CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed (i.e. The styles of the HTML elements are defined in the CSS document).

Suppose if you have specified that all the headings i.e. elements between the  <h1> to <h6> tags should be displayed in red color in the CSS document. When the HTML document uses this CSS document, all the heading tags in the HTML document will import the style defined for the headings in the external CSS document and display all the headings in Red color.

CSS documents save a lot of time for the developers. By changing the style properties in CSS document, the style of the elements in the HTML code changes. That is the developer wont have to go through each and every step in HTML code to change the style of the elements. 

Suppose the developer has to change the color of the headings from red to blue. By changing the color property of headings in CSS will save the time of the developers. If not he has to find all the heading tags in the HTML code and change the style properties for every tag.

What are CSS selectors ?

In CSS, selectors are the patterns used to select the elements. 

Examples of selectors:

• .intro (Selects all the elements with the class attribute specified as class="intro" )
• #firstname (Selects all the elements with the id attribute specified as id='firstname' )
• * (Selects all the elements)
• p (Select all the <p> elements in HTML code of the web page)

In this way there are many selectors in CSS which are used to locate the elements. 

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. 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, we need to choose CSS Locator or XPath Locator. If we have to choose between CSS Selector or XPath statement for locating the UI element, then we need to choose CSS Selector because of its advantages over XPath. 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 FireFox 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 ] )

19. Type 'verifyElementPresent' command into the Command text box on the Selenium IDE as shown below:

20. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected text  (i.e. 'Selenium: Beginners Guide' text in this example ) is verified whether it is present on the page or not and the test in the Selenium IDE is passed as shown in the below video:

Click here to watch the video

Which is best XPath Locator or CSS Locator ?
XPath statements slow down the tests where as CSS selectors run faster than the equivalent XPath. So CSS Selectors are preferred out of all the available locators to identify the elements. when we are not able to locate the UI element using ID 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.