Wednesday, October 29, 2014

Chapter12- Configure FireBug and FirePath

Configure FireBug and FirePath

To work with Selenium RC or Webdriver, we need to locate element based on their xpath or ID or name etc. Inorder to locate an element we need tools/plugins. Various ways of locating an element is dealt in detail in locators chapter.
Step : 1 Navigate to the URL : https://addons.mozilla.org/en-US/firefox/addon/firebug/ and download plugin.
Selenium IDE 62
Step : 2 The addon installer is shown to the user and it is installed upon clicking 'Install' button.
Selenium IDE 63
Step : 3 After Installing, we can launch the plugin by navigating to "Web Developer" >> "Firebug".
Selenium IDE 64
Step : 4 Firepath, a plugin which works within Firebug helps user to grab 'Xpath' of an element. Install Firepath by navigating to "https://addons.mozilla.org/en-US/firefox/addon/firepath/"
Selenium IDE 65
Step : 5 The addon installer is shown to the user and it is installed upon clicking 'Install' button.
Selenium IDE 66
Step : 6 Now launch "Firebug" by navigating to "Tools" >> "Webdeveloper" >> "Firebug"
Selenium IDE 67

EXAMPLE

Now let us understand how to use firebug and firepath with an example. For demo purposes, we will make use of www.google.com and capture the properties of the text box of "google.com".
Step : 1 First Click on the arrow icon as highlighted in the below screenshot and drag it to the object for which we would like to capture the properties. The HTML/DOM of the object would be displayed as shown below. We are able to capture the 'ID' of the input text box with which we can interact.
Selenium IDE 68
Step : 2 To fetch the xpath of the object, go to 'firepath' tab and perform the following steps.
  • Click on the Spy icon.
  • Select the Control for which we would like to capture the xpath
  • Xpath of the the selected control would be generated
Selenium IDE 69

No comments: