Why And How to Use Firebug,FirePath

Here we learn why and how to use Firebug and FirePath from Firefox........

1.Why we need this tools for Web Automation Using Selenium Web Driver ?

Web page object can refer to any of UI (User Interface) controls that exists in a particular web page. It can be a text, button, text box, drop down, radio button or any other UI elements.

Automation test scripts exploit UI elements to simulate any user interaction that can happen in that particular page. The interaction can be a type in text box, a click of a button, a select of a drop down or radio button and so on.

It is the responsibility of automation test developer to supply intended web objects for test scripts to perform any interaction what user expects to take on that page.

We take advantage of this tools to perform object identification in easier way.

When we proceed further we learn how to feed this object to Selenium Web Driver.

2.How we use this tools ?

Firebug :

A. Open Firebug

Start Firebug from Firefox Tools -> Web Developer -> Firebug ->Open Firebug or just press F12 or view -> Firebug or click on the bug sign on the Toolbar.

 Firebug will be opened and it shown below of the Firefox, it looks like this.....

B.Identify objects using Firebug

Firebug pane will be displayed with different internal representation of web page such as HTML, CSS, DOM and so on in which it is activated. The internal representation depicts the actual implementation of web elements (UI controls) that formed the web page on which firebug is mounted. Click on each tab in firebug to see implementation of page in HTML, CSS and DOM forms.

Click on inspect icon (next to bug icon in opened firebug) to identify any elements on web page.

Now click on the web element in page it will be highlighted in web page as shown below

 Or we can directly Inspect the web element just Right click on the web element and Choose Inspect Element With Firebug from the context menu.

FirePath :

 The FirePath allows the test developers to choose among XPath, CSS or SIzzle (JQuery) of web element  and it gives out object representation result in specified form after identifying it.

A. Open FirePath

  If FirePath is installed along with Firebug then FirePath tab should be visible on Firebug when it is opened.

B.Finding XPath Using FirPath

1.Open the Firebug.
2.Open the URL like www.google.com.
2.Navigate to the FirePath tab.

3.Click on the Inspect element button right hand side of the bug icon.....
4.Click on the web element like search text input box.
5.We see the XPath expression of this web element.
6.If we select CSS from the dropdown then we get the CSS path from it.

 
We will try to go deep on XPath  as well as finding and locate web element using different approach for Selenium Web Driver.