TestingDocs.com
    Software Testing website
    • Automation
      • Selenium
      • JBehave Framework
    • Tutorials
      • MySQL Tutorials
      • Testlink
      • Maven
      • Git
    • IDEs
      • IntelliJ IDEA
      • Eclipse
    • Flowcharts
      • Flowgorithm
      • Raptor
    • About

    Selenium

    Inspect elements in Chrome with Developer Tools

    Overview

    In this tutorial, we will learn to inspect elements in Google Chrome browser with Developer Tools. Developer tools are in-built in the browser.

    To interact with the web elements with automation we need to identify them properly. Good location strategy is key to effective test design.  We can use these tools suite to inspect, debug HTML, CSS and JavaScript.

    Steps

    Launch Google Chrome Browser.

    Click on the three dots menu icon in the top right corner.

    Choose the menu option More Tools >> Developer Tools.

     

    Developer Tools Google Chrome Browser

    The keyboard short cut is Ctrl + Shift + I

    Inspect Elements

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

    Example

    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

     

    Inspect Elements Google Chrome Browser

     

    We can use these tools for inspecting elements during page object design or when creating automation scripts.

    —

    Selenium Tutorials on this website:

    https://www.testingdocs.com/selenium-webdriver-tutorial/

    Official Website:

    https://www.selenium.dev/

    Related Posts

    Windows 10 Settings

    Selenium /

    Add Microsoft Webdriver on Windows OS

    Download Selenium Components

    Selenium /

    Getting Started with Selenium Webdriver

    LambdaTest Testing Cloud SaaS Platform

    Selenium /

    LambdaTest – Testing Cloud SaaS Platform

    Selenium /

    Selenium 3.0 and Mozilla GeckoDriver

    SauceLabs Website

    Selenium /

    Run an Example Test on SauceLabs

    ‹ Find elements By XPath in Selenium› Download Mozilla GeckoDriver on Ubuntu

    Recent Posts

    • ChatGPT Plans Free and PlusChatGPT Subscription Plans
    • Stellar Converter for Database ToolStellar Converter for Database
    • Stellar MySQL Log AnalyzerStellar Log Analyzer for MySQL
    • Stellar Repair for MySQLStellar Repair for MySQL
    • ChatGPT IntroductionChatGPT Capabilities
    • How to secure your SQL Database: Tips and Tricks
    • ChatGPT4 Conversational AI FeaturesChatGPT4 Conversational AI Features
    • Trends in Software EngineeringShaping the Future of Development: Exploring Key Trends in Software Engineering
    • Java PerformanceImproving Java Performance with Multithreading
    • QDrant Vector DatabaseOpen-source Vector Databases
    • Difference between PHP and JavaScript?
    • Bing AI Browser Web ContentBing Conversation Styles
    • ChatGPT PreviewChatGPT Introduction
    • Open Source AI Frameworks TensorFlowOpen Source AI Frameworks
    • Artificial Intelligence Tools

    Back to Top

    Links

    • Contact
    • Privacy Policy
    • Cookie Policy

    www.TestingDocs.com