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 will enable the user to edit the DOM (Document Object Model) on the webpage. Changes done to elements of the DOM will reflect on the page immediately.
How to open the Developer Tool in Chrome :
When we do one of the above-said things, google opens a 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, and now it opens the source 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 source HTML code >Copy >Xpath or Selector.
This method helps the developer/tester to verify the XPath and CSS value in the absence of the right addon/tool to inspect elements.
The developer tool in the firefox browser is still in the development stage, so we may find difficulty to verify our CSS selector or xpaths.
Firefox developers are 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 :
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")
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 source HTML code >Copy >Xpath or CSS Selector.