Developer Tool in Chrome

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 the 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.

chrome-dev-console-selenium-webdriver

3. PressCtrl+Fopen 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.

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 a workaround to inspect and find the element.

To verify XPath in Firefox, we can use Try Xpath add on to write selenium webdriver test cases Or we can follow Firefox developer tool approach

How to open Developer Tool in Firefox :

  • Press F12( common for all browsers)
  • Right-click an element choose Inspect element.
  • Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
  • 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.

firefox-dev-tool-selenium-webdriver

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 source HTML code >Copy >Xpath or CSS Selector.

right-click-on-source-code-for-xpath

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions