Library/Technical Support/Janova 101

How to inspect an Element in Internet Explorer

Jackson Ridenour
posted this on June 08, 2011 11:22

Synopsis:

This guide explains how to inspect an Element on a web application using Internet Explorer to retrieve identifiable information and to help troubleshoot.

Applicable to:

Naming Location Strings within a Page File and troubleshooting test errors.

Prerequisite:

Need to download the IE Developer Toolbar (free download here).

How to:

  1. Go to the application being tested by Janova.  This example uses the Google homepage.
  2. Open the Tools menu from Internet Explorer.
     
    Developer_Tool.png
  3. Select the Developer Tools option. The F12 button can be used as a shortcut.
  4. If a new window is opened select the Pin button in the right corner of the window. Ctrl+P can be used as a shortcut. This will pin the new window inside of the Internet Explorer window.
     
    Pin.png 
  5. Click the arrow button inside of the Developer Toolbar window at the bottom of the screen.
     
     Arrow_Inspect.png
  6. Select which Element needs to be inspected by placing the cursor over the Element and then click on that Element. This example uses the Google Search Button.
     
    Google.png 
  7. The source code relating to that Element will then be displayed and highlighted at the bottom of the page.
     
    Inspect.png 
  8. You can access other information by expanding or contracting the code using the '+' and '-' boxes respectively.
  9. To inspect new elements on the website repeat steps 5-7 or scroll over the code which automatically highlights the corresponding element on the page.
  10. Once the element details have been inspected they can be used to create the location strings in the page file.
     
    Following the Google Search Button from above with the name="btnG" representing the button on the page. 
     Location_String.png
  11. The same process is repeated for the search text box, 'I'm Feeling lucky' button and the Google logo elements.
     
    Multiple_Elements.png
  12. Once the necessary elements have been defined in the page file they can then be used to build the features and scenarios for testing.
 
Topic is closed for comments