Using Firebug in Selenium WebDriver to find Xpath and CSS Selector
Finding xpath using Firebug in Selenium WebDriver is so easy, So the People who have been dirtying their hand in automation with selenium would be familiar with the pain of failing test due to wrong element locator and because they don’t get the right way to find out the Xpaths, CSS path . Firebug is the solution of all such pain and it also helps you to speed your automation work.
Oh I am taking much time of yours, Ok then let me start with the steps to find out the Xpaths and CSS path through Firebug of any element on a web page. But let me tell you what XPath is
Xpath is just the combination of HTML tag that helps in identifying the specific element on a webpage.
But before this
1- Firefox should be installed
2- Firebug add-on should be installed. To install Firebug follow this, go to Tool–> Add-ons –> Search Firebug –> Install
Assuming you have installed Firebug and Firefox on your Windows or Mac machine.
Steps for finding Xpath through Firebug
1- Open Firefox browser with its Mozilla home page
2- Click on Bug tab at the right corner of the Browser
3- Click on Inspect element button and place your tip of cursor on any element for which you want to find Xpath
4- Here I have selected the Mozilla logo as soon as we put cursor on Logo and click once on it, HTML tag get highlighted in Firebug
5- Right Click on highlighted code and Select Copy Xpath like this
6- Now place this Xpath in to your script.
But i will suggest first learn how to find Xpath Without using Firefox and for that read my last blog post XPath in Automation mainly in Selenium
Now this tool needs not to be installed separetly because Firefox has made effort and have integrated this with firefox. So you can start using this as soon as you download and install the firefox browser. But every single steps you can use in firefox to find the xpath and CSS.
To read more about this read this link
Recommend one to install FirePath. It’s basically Firebug with an Xpath & CSS tester. Meaning it can help you find XPath and also allow you to test custom XPath that you wrote. Type/paste in XPath and run/eval it and see if it finds what you want. Very useful to use before you actuallly use the Xpath in Selenium test.
Same could be done through console by using this nomenclature like
Ex:
Suppose you have written one xpath like //li/a[text()=”xyz”]
so to test whether you have written the right xpath or not
steps:
1- Click on Console
2- Write $x(“your xpath”)
3- if you would have written right xpath then it will show the element’s HTML code
otherwise it would throw [].
4- So why you just want to install one more plugin to check the xpath/css locator.
Well, if that works, learned one new thing today. For those not well versed with Firebug or browser dev tools, or the latest tech in web development, that feature might not be apparent. Because the console (at least for other browsers like Chrome and Safari) is more generally termed (javascript) error console. So it’s use is more for working with & testing javascript like document.getElementById(‘someId’).value to print out the value of some element which has value attribute.
On that note, does what you mention for the console work across browser consoles or just for Firebug?
And last, while your method works, you have to encapsulate the XPath with $(“”) which is like jQuery-ish. With Firepath, there is a text field in the tool where you type/past in the XPath as is w/o encapsulating with $(“”). So to a regular non-dev user, it is more natural to use. Still I think whether one uses it a lot or not, the more tools you have the better. And use whichever one works at a given time. One tool doesn’t always work for everything even when you might think it does (there are sometimes rare/hidden bugs).
On a funny related note, we can use shorthand $x() and $$() to test XPath & CSS selectors in browser developer console, so don’t need extra tools to test, but one might wonder, why are we forced to go with a longer named API with WebDriver as in driver.findElement(By.xpath(‘value’)).click() when it might be nice to have something like driver.x(‘xpathValueHere’) and driver.$(‘cssHere’). No one complaining there…
Above demo gives X-path id.
How to get X-path position rather X-path id ?
Learn XPath, really. The demo above should return XPath with positioning like
//html/body/div[1]/span[5]/div/div[6]
where the numbers in brackets are the position. But with Firebug, it may or may not have the positioning depending on whether the XPath that Firebug calculates/determines needs one or not.
You’re more better off using FirePath, which does what Firebug does but also lets you modify then test the XPath to see if it still works. As a way for you to learn XPath.
By knowing XPath, you can certainly define XPaths by position. Even absolute/special positioning as in
(//someXPathHere)[5]
which would get the 5th match of whatever XPath is inside the parenthesis. Very useful when whatever is in parenthesis returns multiple matches and you only want certain ones, without having to define some other XPath.
Hi,
i am find xpath in firefox 51 version ,47 and 48 firefox getting but 51 firefox not working.can u please advise this.
regards,
sreedhar.
how to find xpath on firefox 51 and above version please help on this.