Post#14.Inspect Webpage

Inspecting WebElements is heart of Web Automation using Selenium. In the initial days Firebug & Fire-path (out dated) used to be the favorite tools for Web Developers and Automation testers. Now days there are many plug-ins and add-ons available for various browsers to inspect an element in the DOM. But mastering this art using the Developer Tools provided the browser will make you more conformable instead of relying on any browser plug-in or add-on.

Developer Tool in Chrome

Chrome developer tools allows user to find css, xpath values and also it allows user to edit the DOM (Document Object Model) on the webpage. Changes done to elements of the DOM will reflect in the page immediately.

How to open Developer Tool in Chrome : 
0. Press F12 key.

1. Select More Tools > Developer Tools from Chrome's Main Menu.

2. Right-click a page element and select Inspect.

3. Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

When we do one of the above said things, google opens developer tool like below.

1. Navigate to elements tab, you can see the html souce of the page

2. If you want to inspect any page, you have to click the inspector and choose the element, now it open the souce code.

3. Press Ctrl+F open the find bar at the bottom,

4. Find bar helps to verify CSS selector, Xpath.

5. We can also copy the xpath and CSS selector by right clicking the souce html code >Copy >Xpath or Selector.

This methods helps the developer/tester to verify the xpath and css value in the absence of right addon/tool to inspect elements.

Developer Tool in Firefox

How to open Developer Tool in Firefox : 
1. Press F12( common for all browsers)

2. Right an element choose Inspect element.

3. Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

4. Select More Tools > Web Developer > Console from browser's Main Menu.

Now firefox open developer tool like below.
1. Naviagte to console tab

2. On the console editor we can verify our Xpath 

3. For verifying xpath we have to use our xpath in following format : $x("xpath")

4. Press enter, to get the details of the matching elements. Move the mouse cursor to the Square box if you have more than one matching element to get to know the exact element.

5. We can also copy the xpath by right clicking the souce html code >Copy >Xpath or CSS Selector.

Try Xpath Add on

Try Xpath add on's sole purpose to verify whether our xpath is matching with any tool or not.

Try Xpath add helps the user to find te xpath on the firefox Quantum version, you can download the tryxpath from the firefox extensions

With try xpath you can verify the Xpath, CSS values in firefox latest versions.

Advantages of Try Xpath With Selenium Webdriver :
1. Try Xpath helps users to verify Xpath
2. Try Xpath helps to evaluate CSS selectors
3. If there are more than one matching elements, Try Xpath helps to focus on the required element using Focus button.

Installation Steps:

1.      Open Firefox latest version(release from FF 57)

2.      Click on Open menu /Tools Icon

1.      Click on Add-ons Options

4. Click on Get More Add Ons option from left Top corner 

5. Scroll to to bottom of the page and Choose See More Add ons!

6. Type Try Xpath on search field.

7. Click on the Try Xpath Add on

8. User will be navigated to Add on page, now Click add to firefox button

9. Try Xpath Add on will start installing into firefox.

10. Give permission to add the Try Xpath

11. If Try Xpath installed without failure, you may see successful message.

Verify Xpath with Try Xpath

1. You can find TX icon in tool bar of firefox, click the icon

2. On Click of the icon, it opens a dialog box which will multiple options such as xpath or CSS(query Selector), input field for value, and the number of matches, expression is corresct or not, result of the matches.

3. Choose Way:Xpath_Any, expression://input[@name='q'] after navigating to google page, hit Enter Keyon your keyboard or click Execute button.

4 If there is matching element , Try Xpath highlights the element with dashed redline. 

5. If there are more elements which matches the xpath, Try Xpath highlights all of them and you can use Focus button to find the right element.

5. You can narrow down the results by giving an index to xpath.

Verify CSS Selector with Try Xpath

1. Choose Way: querySelector, expression: select, hit Enter Key on your keyboard or click Execute button

2. If there is matching element for the given CSS value, Try Xpath highlights the element with dashed redline. 

3. If there are more elements which matches the xpath, Try Xpath will not highlight all of them except the first match. 

4. If we want to all the matches for the Given xpath, please do change the Way: querySelectorAll, hit Enter after changing the way, Try Xpath will highlight all the matching elements.

5. Scroll down the dialog box, to see all the element details.

6. With help of Focus button you highlight the elements(Blue Solid Line).