Pre-requisite - Install Firepath Firefox Add-on as explained in the previous post.
We use Firepath to find out the XPath or CSS Locators of the required elements. (Locators are generally used to locate the UI elements on the Application while running Automation scripts. Locators concept will be explained later. XPath and CSS Locators concept will also be explained in the later posts). So lets find out the Xpath Locator followed by CSS Selector Locator using Firepath below:
Finding out the 'Xpath' value of the inspected UI element using Firepath
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
 |
5. Click on the 'Firepath' tab to find out the Xpath value of the inspected element (i.e. Google Logo in this example) as shown below:
6. Ensure that 'Xpath' property value of the selected UI element (i.e. Google Logo) is displayed by default as shown below:
7. Copy the 'Xpath' propery value of the inspected element (How to use this Xpath value in Selenium Automation will be explained in the upcoming posts)
Finding out 'CSS' Selector value of the inspected UI element using Firepath:
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
4. Click on the Dropdown field as shown below and select 'CSS'
5. Click on the 'Inspect Element' firebug option and select any UI element say 'Google Logo' to inspect as shown below:
 |
7. Copy the 'CSS' Selector property value of the inspected element (How to use this CSS value in Selenium Automation will be explained in the upcoming posts)
Please comment below to feedback or ask questions.
How to Install Java JDK will be explained in the next post.
Please comment below to feedback or ask questions.
How to Install Java JDK will be explained in the next post.
12 comments:
Manvi
I found an excellent blog for learning selenium. Thank u so much for providing this blog. I hope this blog may reach to millions of persons. What about post after 157 , I was read all.Please update remaining too.
@ Siva naga mani - Thank You.
After you are done with these posts, you can go through my other posts available at
Selenium RC Posts - www.SeleniumOne-by-arun.blogspot.com
Selenium WebDriver Posts - www.SeleniumTwo-by-arun.blogspot.com
I appreciate for your time and effort.
Thank you so Much
Arun,
In real time project we need to make our customize css paths. I would like to know what would be the best mechanism to validate if our customized css path is a valid one before using it in our code.
Regards
AB
AB, see the "Eval" button in the screenshots of this blog post? Manually type in the CSS (or XPath) into the text field where the CSS/XPath value normally shows when you inspect element, then click "Eval".
If there are matches, it looks similar to the element inspection procedures. If no match, you get nothing highlighted, no HTML source shown and status bar says no matches found, etc. And if CSS/XPath syntax is incorrect, the text field will be highlighted in red to let you know. But of course valid formatted CSS/XPath also does not mean it will match anything, which is why you then use the Eval button.
This method is simply the reverse of the tutorial - put in CSS/XPath and see if it matches anything rather than inspect and return you a value.
hi arun i am unable to see firepath in when i installed firebug, i am trying to find css/xpath
Excellent Arun:-) Very nice blog
Good work Arun.This blog helps me to work with selenium comfortable as a begginer
How to use Firepath? Step 7 has a typo property missing the t
I never come a cross - such a wonderful blog, which helps you thoroughly to achieve your goal. Thanks a ton to Arun. Keep up your good effort.
Hi Arun,
Thank you for be the best UI blog of selenium.
Hi Arun,
Nice post but this is all about Firefox browser. What if my application is compatible with only IE browser? Please suggest
Post a Comment