Absolute path means full path. In CSS path, it starts from html.
Lets Implement the Absolute CSS Selectors path:
1. Suppose if we want to locate all paragraph text elements on the http://compendiumdev.co.uk/selenium/basic_web_page.html page by using Absolute CSS Selectors path then follow the below steps.
2. View the page source of this page as shown below:
3. By looking at the hierarchy of the above HTML Source, lets create absolute CSS path for locating the 'Another paragraph on the page' text.
4. Since we are creating an absolute path, the path should start with html selector (i.e. Root tag)
5. There are two child tags for <html> tag, i.e. <head> and <body>. But we need to locate 'Another paragraph on the page' text which is inside the <p> tag. There are two <p> tags and both of them are under the <body> tag. So html > body > p
7. As <p> tags are children to the <body> tag, we can write the absolute CSS path for identifying both the paragraphs as html > body > p
So from this Process we've found that html > body > p is the absolute CSS path for locating all the paragraph text elements on the page. But lets verify whether we can locate them using this Absolute path by following the below steps:
1. Launch Firefox Browser
2. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in the Firefox Browser
3. Click on 'FireBug' option and ensure that the 'FireBug' options got displayed as shown below:
4. Click on the 'Firepath' tab, select the CSS option, paste the created absolute CSS path i.e. html > body > p into the text box as shown below and click on 'Eval' button:
5. Observe that all the paragraph texts on the page are highlighted as shown below:
So we've used the Absolute CSS path html > body > p for locating all the paragraph text elements on the page.
Please comment below to feedback or ask questions.
Relative CSS Selector path will be explained in the next post.
