Quick Contact

    Element Inspector in Mozilla, Chrome and IE

    Inspecting elements in the browser helps web developers and designers to understand the process which occurs during the http request and response to and fro from the server. The inspection of elements is also used by persons working in automation testing.

    The information about the features of a web page can be found by inspecting the page or any particular element available in the page, such as

    • Web page view feature. For example:
      • BG color
      • Font style
      • Font size
      • height of the page
      • width of the page
      • Alignment of any element in the page
      • Padding of the page
    • Html information or url
    • Network information
    • Source of the web page
    • Error which occurs during page load in the browser.
    Inspection of element in Firefox browser

    Inspection of element in firfox browser is done using a plugin called “Firebug”. The steps to install firebug and inspect element in the Firefox browser are:

    1. Download and install Firefox.
    2. Once Firefox get installed successfully go to tools and select Add-ons
    3. After selecting Add-ons search for “Firebug”
    4. Now click on Install button will install the firebug in your Firefox browser.
    5. Once the firebug installed successfully, any page can be load by right click on it.
    6. After right click select the option “Inspect Element with Firebug”
    7. Clicking on “Inspect Element with Firebug” will inspect all the elements available in the page or if you want to inspect any particular element, mouse over on that element and right click and select the same option will inspect the particular element.
    8. Once inspected you can view all the information at the bottom of the page.
    Inspection of element in Chrome browser:

    Chrome browser comes with default “Inspect Element” Option. The steps to install firebug and inspect element in the chrome browser are:

    1. Launch the Google Chrome’s Developer tool. Press F12 to launch the tool. You would be able to see like the below screen.
    2. Take a note that “Element” tab is highlighted in the above screenshot. Thus, element tab is the one which displays all the HTML properties belonging to the current web page. Navigate to the “Element” tab if it is not opened by default on the launch.
    3. You can also launch developer tool by right-clicking anywhere within the web page and by selecting “Inspect element” which is very similar to that of firebug’s inspection.
    4. Locate the desired object within the web page. One way to do the same is to right click on the desired web element and inspect. The HTML property belonging to that web element would be highlighted in the developer tool. Another way is to hover through the HTML properties and the matching web element would be highlighted. Thus, in this way user can locate ids, class, links.
    Inspection of element in Internet Explorer browser:

    The steps to install firebug and inspect element in the Internet Explorer browser are:

    • Open internet explorer and load the web page in the browser.
    • Press F12 button in the key board will open the inspect window at the bottom. In IE it is known as “Developer Tool”.
    • Pressing F12 again will disable the inspection of the page.
    • If F12 does not work, then follow the other option which as below:
    • Open internet explorer and load the web page in the browser.
    • Click on Tools icon shown at right top and click on the option F12 developer tools.
    • Clicking on F12 developer tools will inspect the element and will show the result at the bottom.
    • Same process can be follow to disable the developer tool or to inspect element.
    Element Locator Tool for Firefox Locator

    WebDriver Element Locator is an add-on for Firefox browser. As this is a add on to Firebox, it is easy to use and to use this by just right click on the web element which is to be locate, selecting an appropriate locator string and copying to clipboard. It would show multiple options of element

    locators in the browser’s context menu. It displays the element locator with the complete Selenium script in different languages like C#, Java, Python and Ruby.

    This addon can be downloaded as Firefox Add-On from the browser as below.

    1. Go to Tools > Add-Ons, Search for WebDriver Element Locator, Click on Install,
    2. Restart the Firefox Browser Click on Add to Firefox

    The add-on provides below features:

    • This add-on will check the locators for uniqueness, signified by red crosses and green ticks.
    • If elements have long, fragile, auto-generated attributes such as

      id=”ctl00_ElementContainer_Inputs_txtForename”, the add-on will attempt to locate based on the final (and most significant) part of the value only.

    • If locating via attributes is difficult, this add-on will attempt to locate via text value.
    Firebug and Firepath Add-ons in Mozilla

    Firepath and Firebug are very useful and powerful Firefox add-ons that could be used to inspect and generate XPath 1.0 expressions. Firepath and Firebug are used to find out the XPath or CSS Locators of the required elements. Below are the steps to install firebug

    1. Go to firebug add-on Installation page using URL :- https://addons.mozilla.org/en- us/firefox/addon/firebug/. It show firebug add-on Installation button “Add to Firefox” as bellow.
    2. Click On “Add to Firefox” as shown In above Image. It will open Software Installation dialog as bellow.
    3. Click on “Install Now” button as shown In above Image.
    4. It will start Installing Firebug In Firefox browser. At the end of Installation, It will show message like “Firebug has been Installed successfully.” and show Firebug Icon In toolbar section as shown In bellow Image.
    5. Now Firebug Is Installed In Firefox browser.
    Steps to Install FirePath Add-On in Firefox Browser are as follow:
    1. Open Mozilla Firefox browser.

      Go to Fire path add on Installation page using URL: https://addons.mozilla.org/en- us/firefox/addon/firepath/. It will open the fire path Installation page as shown In bellow Image. Click on “Add to Firefox” button as shown In bellow given Image.

    2. It will show Software Installation dialog as shown In bellow Image. Click on “Install Now” button. It will start Installing fire path add-on.
    3. It will ask to restart Firefox browser at the end of Installation process as shown In bellow Image. Click on “Restart Now” as shown In bellow Image. It will restart Firefox browser.
    Finding out the ‘Xpath’ value of the inspected UI element using Firepath
    1. Launch Firefox and navigate to any site say www.google.com
    2. Click on the FireBug icon on the top right side of the page as shown below:
    3. Ensure that FireBug interface along with ‘FirePath’ tab is displayed on the bottom of the page as shown below:
    4. Click on the ‘Inspect Element’ FireBug option and select any UI element say ‘Google Logo’ as shown below:
    5. Click on the ‘Firepath’ tab to find out the Xpath value of the inspected element (i.e. Google Logo in this example) as shown below:
    6. Ensure that ‘Xpath’ property value of the selected UI element (i.e. Google Logo) is displayed by default as shown below:
    7. Copy the ‘Xpath’ propery value of the inspected element
    Finding out ‘CSS’ Selector value of the inspected UI element using Firepath:
    1. Repeat steps 1-3 of previous post.
    2. Click on the Dropdown field as shown below and select ‘CSS’
    3. Click on the ‘Inspect Element’ firebug option and select any UI element say ‘Google Logo’ to inspect as shown below:
    4. Ensure that ‘CSS’ property value of the inspected UI element (i.e. Google Logo) is displayed as shown below
    5. Copy the ‘CSS’ Selector property value of the inspected element
    Various HTML Locator Strategies

    CSS selectors are string representation of HTML tags, attributes, Id, Class. CSS selectors can be used to locate elements which don’t have Id or name or class. The different combinations of attributes which can be used to locate an element using CSS selector are:

      • Tag and ID:

        Syntax

        css=tag#id 

        Example:

        <input id="txtName" class="textboxcss"
                 tabindex="1" type="text">
                 css=input#txtName
                 WebElement cssele = 
                 driver.findElements(By.cssSelector("input#txtName"));
        

    Here input is tag name and Id is txtName with # sign.

    • Tag and Class:

      Syntax

      css=tag.classname.

      Example 1:

      <input id="txtName" class="textboxcss" 
      		tabindex="1" type="text">
              css=input.textboxcss
              WebElement cssele =
              driver.findElements(By.cssSelector("input.textboxcss"));
      

      Here input is tag name followed by dot and class name textboxcss

      Example 2:

      <input id="txtName" class="textboxcss top"
              tabindex="1" type="text">
              css=input.textboxcss.top 
              WebElement cssele =
              driver.findElements(By.cssSelector("input.textboxcss.top"));
      

      Here class name is textboxcss<space>top in that case the dot is put in between textboxcss and top.

    • Tag and Attribute:

      Syntax

      css=tag[attribute=‟value‟]

      Example:

      <input value="Reading" 
              type="checkbox"> 
              css=input[type=‟checkbox‟]

      Here in first case type is attribute and checkbox is its value, in other case value is an attribute and its value is Reading.

    • Tag, ID and Attribute:

      Syntax

      css=tag#id[attribute=‟value‟]

      Example:

      <input id="txtName" class="textboxcss" 
                   tabindex="1" name="taComment" type="text">
                   <input id="txtName" class="textboxcss" 
                   tabindex="1" name="tbComment" type="text">
                   css=input#txtName[name=‟taComment‟] 
      
                   WebElement cssele =
                   driver.findElements(By.cssSelector("input#txtName[name=‟taComm ent‟]"));
      

      Here for both textboxes id is same ever class name is also same, only name is different for both. So if to locate first text box go with the locator given in above example. For second text box value of name attribute need to be change in same combination.

    • Tag, Class and Attribute:

      Syntax

      css=tag.classname[attribute=‟value‟]

      Example:

      <input class="textboxcss" tabindex="1" 
              	 name="taComment" type="text">
                   <input class="textboxcss" tabindex="1"
                   name="tbComment" type="text">
                   css=input.textboxcss [name=‟taComment‟] WebElement cssele =
                   driver.findElements(By.cssSelector("input.textboxcss [name=‟taComment‟]"));
    • nth-child():

      Syntax

      css=tag:nth-child(n)

      n represent child number

      Example:

              	 <ul>
                   <li>C</li>
                   <li>C++</li>
                   <li>C#</li>
                   <li>Java</li>
                   <li>Python</li>
                   <li>Ruby</li>
                   </ul>
                   css= li:nth-child(n) 
                   WebElement cssele =
                   driver.findElements(By.cssSelector("li:nth-child(n)"));
      

      Here ul li parent child structure is shown. Only tag names are common to everyone. Here to locate sat Java, put n=4 in above command.

    • Inner Text:

      Syntax

      css= tag:contains(„inner text‟)

      Example:

                <span>Upload you pic :</span>
                  css= span:contains(„Upload you pic „) 
                  WebElement cssele =
                  driver.findElements(By.cssSelector("span:contains(„Upload you pic„)"));
              
    Xpath Helper Plug-in for Chrome

    XPath Helper Plug-in is the chrome browser plug-in for locating the GUI elements on the web pages. The steps to Install XPath Helper Plugin for Chrome Browser is as below:

    1. Go to https://chrome.google.com/webstore/detail/xpath- helper/hgimnogjllphhhkhlmebbmlgjoejdpjl?hl=en
    2. Click on Add to Chrome and then click on Add button.
    3. Once it is installed, it will display a pop up message for Successful installation.
    4. Now the icon for XPath Helper will appear on the top right most side of the Chrome browser. Just click on it to open the helper.

    The steps provide insight for using XPath Helper Tool.

      1. Open a new tab and navigate to any webpage. Here www.DemoQA.com is used for demo.
      2. Hit Ctrl-Shift-X (or Command-Shift-X on OS X), or click the XPath Helperbutton in the toolbar, to open the XPath Helper console.
      3. Hold down Shift on moving mouse over elements on the page. The query box will continuously update to show the XPath query for the element below the mouse pointer, and the results box will show the results for the current query.
      4. If desired, edit the XPath query directly in the console. The results box will immediately reflect your changes.
      5. Repeat step (2) to close the console.

    Note: If the console gets in the desired way, hold down Shift and then move the mouse over it; it will move to the opposite side of the page.

    Selection of Effective Xpath

    XPath can be viewed as a way to navigate round XML documents. Thus XPath has similarities to a set of street directions ie when one need to search for an address, he should know what is starting point to reach destination.

    There are different ways of choosing xpaths and choosing the most effective xpaths as below:

    Example: Let’s take an example of RSS button at the bottom of the page in the footer section of www.store.demoqa.com.

    Technique 1 | Absolute XPath: The easiest way of finding the xpath is to use the Browser Inspector tool to locate an element and get the xpath of it:

    XPath Generated by the tool is : /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a

    Technique 2 | Relative XPath: At times XPath generated by Firebug are too lengthy and there is a possibility of getting a shorter XPath. Above xpath will technically work, but each of those nested relationships will need to be present 100% of the time, or the locator will not function. Above chosen xpath is known as Absolute xpath. There is a good chance that xpath will vary in every release. It is always better to choose Relative xpath, as it helps us to reduce the chance of element not found exception.

    To choose the relative xpath, look for the recent Id attribute as in below screen shot.

    The recent or last Id produced is ‘footer_nav‘. This id would be appropriate in this case, so a quality xpath will look like this: //*[@id=’social-media’]/ul/li[3]/a

    The difference between the Absolute and Relative xpaths is:

    Absolute xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a 
    Relative xpath: //*[@id=’social-media’]/ul/li[3]/a

    Please note that Absolute xpath is using single slash at the start of the xpath and relative is using double slash.

    The difference between single ‘/’ or double ‘//’ is that a single slash at the start of Xpath instructs XPath engine to look for element starting from root node while a double slash at the start of Xpath instructs XPath engine to search look for matching element anywhere in the XML document.

    There is an alternate way to get the relative xpath with help of the FirePath tool. Click on the drop down menu on the Firepath button and Unselect ‘Generate absolute XPath’.

    Now click on the same element with the Inspector, the new xpath will look like this:

    If something gets changed above the id social-media, the xpath will still work.

    Handling Dynamic Objects/Ids on the Page

    In some applications, there are dynamic elements whose ids/xPaths change every time page reloads. A common example is listing of products on an E-commerce application. In this example, locators associated with different products can change if page is reloaded after use of sort, filter or add product function. For example, in order to interact with “Purchase buttons” associated with different Products. These buttons could have IDs in following format.

    Example:

    // Dynamic Element Locators
            <button id="Submit-901" />
            <button id="Submit-902" />
            <button id="Submit-903" />
    

    In this test scenario as element IDs can change on page reload, an id for each button has a common text “submit-” and a number that increments by value of 1. So, it need to understand this scenario requirements and also understand the behavior of these elements as the page is reloaded. Once it understand, a strategy can be devise to interact with these elements.

    Few common techniques used to handle dynamic elements are as below:

    • Absolute XPath

      Xpath Position or Absolute Xpath are most frequently used to resolve the dynamic element issues. Reason is, it does not change with page reloads. However, problem with using Absolute XPath locators is that they are very fragile. They are most prone to breakage in case of change in web page. This could create a big trouble for us in maintenance, if we start using these frequently, especially in large test suites. Therefore they should only be used as last option. Below is an example of Absolute XPath and XPath Position.

      web_element_name=html/body/div[30]/div[2]/div[2]/div/div/div/div[1]/ table/tbody/tr/td[2]/table/tbody/tr/td[1]/table/tbody/tr/td[1]/table
              /tbody/tr[2]/td[2]/em/button
              //p[6]/label[2]/div/ins
      
    • Identify Element by starting Text

      If the dynamic elements have a definite pattern to them, here JavaScript functions can be use like “starts-with” or “contains” in element locators to separate the dynamic part of locator from static part.

      For example, in case of dynamic submit button Id example which was discussed earlier, It can apply ‘starts-with’ function to access this locator irrespective of its dynamic part.

      XPath: //button[starts-with(@id, 'Submit-')]
    • Identify Element by containing Text

      Similarly, in some scenarios where dynamic element is surrounded by a static value, ‘contains’ function can be use. For example element locators are as follow:

      <input class="new-userfield-001">
                   <input class="old-userfield-002">
              

      As ‘usefield’ part of element is static, so ‘contains’ function can apply to access this element locator as shown below…

      XPath: //input[contains(@class, '-userfield-')].
    • Identify Element by Index

      If there are multiple elements present on page with same locator then use following Java code in the selenium WebDriver script to interact with element found at particular index.

      driver.findElements(By.xpath(“//*submit”)).get(0).click();
    • Identify Element with reference of a closest stable element

      Use the DOM structure to find the closest stable element first and then this stable element can be used as a reference element to find the required element.

      XPATH: //span1/../following-sibling::div//button1

      DOM structure could be found using Firefox extension like Firebug and FirePath. But in complex and large applications this approach is difficult to use because of large DOM structure.

    • Identify Element by stable preceding Text

      For web elements like text field and text areas we can identify them by using the stable text labels nearby. This approach might not be possible in all scenarios but it does resolve the dynamic element issues where possible.

    Summary
    • Inspecting elements in the browser helps web developers and designers to understand the process which occurs during the http request and response to and fro from the server
    • WebDriver Element Locator is an add-on for Firefox browser
    • Firepath and Firebug are Firefox add-ons used to inspect and generate XPath 1.0 expressions
    • CSS selectors are string representation of HTML tags, attributes, Id, Class
    • XPath Helper Plug-in is the chrome browser plug-in for locating the GUI elements on the web pages
    • XPath can be viewed as a way to navigate round XML documents

    Copyright 1999- Ducat Creative, All rights reserved.