Developer Tool in Chrome

In this tutorial we are going to learn about chrome dev tools with respect to selenium webdriver.

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, control-f-chrome-selenium-webdriver

4. Find bar helps to verify CSS selector, Xpath. dev-chrome-xpath-selenium-webdriver

5. We can also copy the xpath and CSS selector by right clicking the souce html code >Copy >Xpath or Selector. right-click-on-source-code-for-xpath-chrome

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

Developer tool in firefox browser is still in development stage, so we may find difficulty to verify our css selector or xpaths.

Firefox developers currently trying to implement Chrome's developer tool on Firefox, till then we have to use work around to inspect and find the element.

To verify xpath in firefox, we can use Try Xpath add on to write selenium webdriver testcases Or we can follow Firefox developer tool approach

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 Chrome'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") dev-firefox-xpath-selenium-webdriver

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. highlight-element-dev-xpath-single-element

5. we can also copy the xpath by right clicking the souce html code >Copy >Xpath or CSS Selector. right-click-on-source-code-for-xpath

You can also share knowledge by Adding a topic here

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions