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:
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:
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:
19. Type 'verifyElementPresent' command into the Command text box on the Selenium IDE as shown below:
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.