Как найти xpath элемента в firefox

Была ли эта статья полезной?

Hello Folks,

In my last posts, we have learnt well how to locate web element in Selenium Webdriver using locators. We will learn in this post:

1. Tools to find XPath/Css path in Firefox.

It is good practice to write XPath by yourself. Advantages of writing XPath by yourself:

1. More perfect XPath expressions.
2. Better understanding of HTML elements code.
3. Clear concepts which helps in technical interviews

But, writing yourself will take time and it is tricky as well because you need to try different ways of writing expressions. I will suggest if you have time write it yourself otherwise use tools which I am going to discuss now.

Tools generate XPath of elements automatically. Just you need to copy it and use it.

Tools for Firefox:

Perform some steps:

1. Open Firefox.
2. Open Facebook URL.
3. Right click on ‘Email or Phone’ text box and select ‘Inspect Element(Q)’ and observe.

Firebug:

Firebug is a add-on of Firefox which helps you in identifying HTML, CSS and JAVASCRIPT web elements more easily.

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

How to install Firebug:

1. Launch Firefox browser.
2. Type about:addons in address and hit ‘Enter’.
3. Click on ‘Extensions’ from left side.
4. Type ‘Firebug’ in search box and press ‘Enter’.
5. Click on ‘Install’. It will download. It does not require restart of Firefox.
6. You should see an icon of ‘bug’ in right side top corner.

For Firefox version < 51.0.1 and Firebug version < 2.0.18

1. Now open Facebook URL and do Right click on ‘Email or Phone’ text box and select ‘Inspect Element(Q) with Firebug’ and observe. You will see below screen:

You can see separate tabs for HTML, CSS and Script(JS).

For Firefox version > 51.0.1 and Firebug version > 2.0.18

The Firebug extension isn’t being developed or maintained any longer. So, it will be disabled by default. When you do right click and see you will not get option to inspect with firebug. Firefox DevTools is alternative of Firebug.

Still you can use it but you need to enable it.

Steps to enable Firebug in Firefox:

1. Launch Firefox browser.

2. Type “about:config” is address bar and click on  ‘I accept the risk’.

3. Search for :
a. ‘browser.tabs.remote.autostart’ and set the value to ‘false’
b.  ‘browser.tabs.remote.autostart.1’ (if present) and set the value to ‘false’
c. ‘browser.tabs.remote.autostart .2’ and set the value to ‘false’

4. Restart the Firefox.

Now open Facebook URL and do right click on ‘Email or Phone’ text box. This time you will see ‘click on ‘Inspect Element(Q) with Firebug’.

Now question is what is use of installing firebug for us?

We can get XPath and CSS selector of Web element using Firebug. Let’s see how.

Do right click on web element which you want to locate and select Inspect Element with Firebug. It will highlight the code. Now do right click on highlighted code and observe options.

You will see three options:

1. Copy XPath: It will copy absolute XPath in clipboard. (/html/body/div[1]/div[1]/div/div/div/div/div[2]/form/table/tbody/tr[2]/td[1]/input)
2. Copy Minimal XPath: It will copy relative XPath in clipboard. (//*[@id=”email”])
3. Copy CSS Path: It will copy CSSpath in clipboard.  (html#facebook.tinyViewport.tinyHeight body.fbIndex.UIPage_LoggedOut._-kb.b_c3pyn-ahh.gecko.win.x1.Locale_en_GB div._li div#pagelet_bluebar div#blueBarDOMInspector div._53jh div.loggedout_menubar_container div.clearfix.loggedout_menubar div.menu_login_container.rfloat._ohf form#login_form table tbody tr td input#email.inputtext)

Note: Copying XPath from here, attribute values will be in double quotes. So, to use it in JAVA, replace double quote from single quote or escape it as:

Way 1:

//*[@id=”email”] should be changed as //*[@id=’email’]

Way 2:

//*[@id=”email”] should be changed as //*[@id=”email”]

You can verify copied XPath by hitting in console tab as below:

$x(“copied XPath”)

It will highlight element if correctly located.

We can achieve more functionality with Firebug with another add on named FirePath.

FirePath:

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors.

Advantages of using FirePath:

1. Edit XPath expressions, CSS3 selectors and JQuery selectors.
2. Evaluate the expression/selector on any HTML or XML documents.
3. Display the result of evaluations in a Firebug-like DOM tree.
4. Highlight the results directly on the document displayed by Firefox (works only with HTML documents).
5. Generate an XPath expression or a CSS selector for an element by right clicking on it and selecting “Inspect in FirePath” in the context menu.
6. Define the evaluation context (parent) of an expression/selector.
7. Choose the document in which to evaluate the expression/selector (only applicable for HTML documents with frames or iframes). (If do not understand this point, do not take load. I will explain it in upcoming posts)

Installation of FirePath:

1. Launch Firefox browser.
2. Type about:addons in address and hit ‘Enter’.
3. Click on ‘Extensions’ from left side.
4. Type ‘FirePath’ in search box and press ‘Enter’.
5. Click on ‘Install’. It will download. It requires restart of Firefox.
6. Now open Facebook URL and do Right click on ‘Email or Phone’ text box and select ‘Inspect in FirePath’.

Points to be known from above screenshot:

1. You will see a FirePath tab.
2. It will highlight the web element under FirePath tab.
3. It will give you relative XPath.
4. It will give you document in which element is present. It will show iframe if element is present inside iframe. (Will discuss later).
5. It will give you number of matching elements with given xpath.
6. You can see highlighted  ‘Highlight’ option. If you click it it will be not remain highlighted and will be not highlight matching web element in web page.
7. Click on down arrow just beside XPath. You will see option to select css. You can find css path as well using FirePath.
8. Now you can write XPath/css expression and click enter to know matching elements number. No need to go to console and try.

That’s it. You would have not seen this much long post on a very easy topic. But I just tried to explain all Whys and Hows.

If you like my posts, please like, comment and share. Suggestions and feedback are always welcomed.

Thank You!!

#HappyLearning