We use Firepath to find out the XPath or CSS Locators of the required elements. (Locators are generally used to locate the UI elements on the Application while running Automation scripts. Locators concept will be explained later. XPath and CSS Locators concept will also be explained in the later posts). So lets find out the Xpath Locator followed by CSS Selector Locator using Firepath below:
Pre-requisite - Install Firepath Firefox Add-on as explained in the previous post.
Finding out the 'Xpath' value of the inspected UI element using Firepath
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
4. Click on the 'Inspect Element' FireBug option and select any UI element say 'Google Logo' as shown below:
5. Click on the 'Firepath' tab to find out the Xpath value of the inspected element (i.e. Google Logo in this example) as shown below:
6. Ensure that 'Xpath' property value of the selected UI element (i.e. Google Logo) is displayed by default as shown below:
7. Copy the 'Xpath' propery value of the inspected element
Finding out 'CSS' Selector value of the inspected UI element using Firepath:
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
4. Click on the Dropdown field as shown below and select 'CSS'
5. Click on the 'Inspect Element' firebug option and select any UI element say 'Google Logo' to inspect as shown below:
6. Ensure that 'CSS' property value of the inspected UI element (i.e. Google Logo) is displayed as shown below
7. Copy the 'CSS' Selector property value of the inspected element.
Find more xpath and css function in my previous post
Finding out the 'Xpath' value of the inspected UI element using Firepath
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
4. Click on the 'Inspect Element' FireBug option and select any UI element say 'Google Logo' as shown below:
5. Click on the 'Firepath' tab to find out the Xpath value of the inspected element (i.e. Google Logo in this example) as shown below:
6. Ensure that 'Xpath' property value of the selected UI element (i.e. Google Logo) is displayed by default as shown below:
7. Copy the 'Xpath' propery value of the inspected element
Finding out 'CSS' Selector value of the inspected UI element using Firepath:
1. Launch Firefox and navigate to any site say www.google.com
2. Click on the FireBug icon on the top right side of the page as shown below:
3. Ensure that FireBug interface along with 'FirePath' tab is displayed on the bottom of the page as shown below:
4. Click on the Dropdown field as shown below and select 'CSS'
5. Click on the 'Inspect Element' firebug option and select any UI element say 'Google Logo' to inspect as shown below:
6. Ensure that 'CSS' property value of the inspected UI element (i.e. Google Logo) is displayed as shown below
7. Copy the 'CSS' Selector property value of the inspected element.
Find more xpath and css function in my previous post
