Developer Tool in Chrome

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

Chrome developer tools allow the user to find css, xpath values, and also it allows the 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 :

  • Press F12 key.
  • Select More Tools > Developer Tools from Chrome's Main Menu.
  • Right-click a page element and select Inspect.
  • 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 source of the page

2. If you want to inspect any page, you have to click the inspector and choose the element, now it opens the source 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 source HTML code >Copy >Xpath or Selector. right-click-on-source-code-for-xpath-chrome

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

Xpath in Selenium

Developer Tool in Firefox

Developer tool in firefox browser is still in the 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-click an element and 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. Navigate to the console tab

2. On the console editor, we can verify our xpath

3. For verifying xpath we have to use our xpath in the 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 source HTML code >Copy >Xpath or CSS Selector. right-click-on-source-code-for-xpath

Implicit Wait in Selenium

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions