In this tutorial, we will learn to inspect elements in Google Chrome browser with Developer Tools. Developer tools are in-built in the browser.
Launch Google Chrome Browser.
Click on the three dots menu icon in the top right corner.
Choose the menu option More Tools >> Developer Tools.
The keyboard short cut is Ctrl + Shift + I
- Open the web page under test in Google Chrome browser.
- Launch the tools from the menu.
- Choose the Inspector arrow icon.
- Select the element to inspect and examine the element.
In the example, we will inspect the Login name text box element in TestLink Login page.
Click the Inspect arrow element. Choose the Login name text box.
Check the Properties tab for the element to inspect the element.
We can see that the id of the Login Name text box web element is : tl_login
We can use these tools for inspecting elements during page object design or when creating automation scripts.
Selenium Tutorials on this website: