103. CSS selector Optimization Strategy Three - Use Relative CSS Statements instead of Absolute CSS Statements

Absolute CSS selector statement has the disadvantage of typing the expression to a particular input structure. Sometimes you need a  CSS selector statement that is flexible in the face of varying input. Hence relative CSS selector statements are better and recommended to use.

Now lets follow the below steps to change the Absolute CSS to Relative CSS:

1. Open http://book.theautomatedtester.co.uk/chapter1 in Firefox Browser
2. Select the HTML tag in the FireBug options as shown below:

3. Right click on the 'Home' page link and select 'Inspect Element with FireBug' option as shown below:

4. Ensure that the HTML code related to the inspected 'Home Page' link is high lighted in the HTML code as shown below:

5. Right click on the high lighted HTML code and select 'Copy CSS Path' option as shown below:

6. Select the Firepath tab from the FireBug options, select CSS option and paste the copied CSS Selector value into the text box and click on 'Eval' button:

7. Ensure that the 'Home Page' element link got high lighted on the page as shown below:

8. But as the copied CSS Path is an Absolute CSS Path , lets change the Absolute CSS Path in the text box field to Relative CSS Path as the Relative CSS Path is recommended over the Absolute CSS Path.

9. Now lets replace the Absolute CSS Path in the text box field with the Relative CSS Path a as shown below and click on 'Eval' button:

10. Ensure that the 'Home Page' element link on the page is high lighted as shown below:

This is how we have to change the Absolute CSS Path to Relative CSS Path and use in the Selenium Automation code.


Please comment below to feedback or ask questions.

Practice CSS Path  will be explained in the next post.