Pre-requisite - Install Chropath Add-on on Chrome Browser as explained in the previous post.
FireBug and Firepath add-ons got deprecated and hence discontinued. Hence we need to use Chropath add-on in place of them. In this article, I will explain, how to use Chropath in Chrome browser in a step by step manner. Please follow the below steps to understand:
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Blog Contents
Please visit www.Selenium-By-Arun.blogspot.com or www.selenium143.blogspot.com for Blog Contents (Open the contents page in a new tab, while you go through the posts in a different tab, to check your ongoing status)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
How to use Chropath Add-on in Chrome Browser?
1. Launch Chrome Browser and browse any site say www.google.com
2. Press 'F12' key on your keyboard, while the above Google page is opened in the Chrome Browser:
Observe that on pressing 'F12' key on your keyboard, the above Chrome Developer options will be displayed as shown in the above image.
3. Select 'Elements' tag and then select the 'Chropath' option as shown below:
4. Click on the 'Inspect Element' option on the Chrome Developer Options as shown below, select any UI element on the page say 'Google Logo' and ensure that the source code of the selected UI element (i.e. Google Logo in this example) is highlighted as shown below:
Also, observe that the XPath Expressions and CSS Selectors locators got auto-generated as shown below (The usage of these locators in Selenium will be explained later)
5. Observe that the above highlighted source code is in html format. We may need this source code to identify the properties of the selected UI element (i.e. Google Logo in this example)
6. For example if we want to know the id property details of the selected UI element Google Logo. First we need to inspect the Google Logo by following the above 4 steps and copy the 'id' details from the highlighted source code as shown below
7. You can also copy the XPath Expressions and CSS Selectors locators that are auto-generated by Chropath as shown below:
How to use the copied 'id' property value or Xpath Expressions or CSS Selectors will be explained later.
Please comment below to feedback or ask questions.
How to install Firepath Add-on for Firefox will be in the next post.
12 comments:
Good one
Thank You
Nicely explained..Good One Arun...
@BRU - Thank You
Thnq Arun,nice blog
@Harithoshima - Thank You
Arun.. Is it possible for you to convert your entire blog to pdf ?
http://www.blogbooker.com/
Nice Arun....Very helpful for beginners like me....till now everything going smooth....cheers
I have latest version of mozila Firefox for which no firebug available showing. So please help me how to set firepath
@Smrutiranjan - Downgrade to older version of Firefox say 47.0.1.
Before downgrading stop the auto downgrades from Tools > Options of firefox. And setting this option, install the older version of Firefox i.e. 47.0.1 from http://www.filehippo.com
Reason: FireBug, Firepath and Selenium IDE add-ons wont work from 55 version of Firefox. Hence install older version of Firefox when you need these add-ons.
Hey Arun,
I tried to download firebug and firepath in my new laptop recently but i'm not getting any links for it while i search as firbug addon. Since the support of both is not available now from Mozilla the links are also not available. Can u pls let me know if there is any other option to get these 2 addons.
Thanks in Advance.
Hi Ritanjali,
Yes Firebug and Firepath are now removed from web by their creators.
You can use an alternative addon known as ChroPath.
You can install this addon on either Firefox or Chrome Browser.
You can call me/whatsapp me on +91 - 9908895533 for more details.
Regards,
Arun
Post a Comment