Inspecting Web Elements

Overview

Element interaction is a key aspect of automating any user interface. To be able to interact with elements in the user interface, we need to be able to uniquely identify one element from another.

This tutorial demonstrates an alternative method for identifying elements which was discussed in the Interacting with Elements tutorial. You are encouraged to complete or at least review that tutorial before exploring this alternative.

Understanding HTML

Web elements rendered on a browser page are derived from the source of the page. We aren't going to do a deep dive into HTML, but a quick review will help reinforce how HTML is used to work with elements for automation. A very simple web page could have HTML source like this: 

<html>
<head>
  <title>This is my title</title>
</head>
<body>
  <p>The rendered page content goes here.</p>
</body>
</html>

When looking at HTML, you can immediately recognize the use of values being placed between the < and > characters. In HTML, these are referred to as tags and are the core construct used to define the content of a page. Most tags have an opening and closing tag where the opening tag starts with < and the closing tag starts with </. If you look at the sample source above, you will see tag pairs such as: <html>...</html>, <head>...</head>, <title>...</title>, <body>...</body>, and <p>...</p>.

Early HTML usage did not require that each opening tag have a closing tag, but it has evolved as a standard as the web has matured. You may also encounter self-closing tags that are not meant to have any content. These tags will have the / character at the end of the tag, such as the <br/> tag used for a line break.

Each HTML tag is used to markup the content for a given purpose, and this is where HTML tags are translated by web browsers into the visual elements rendered on a page. The a tag, for instance, is translated into a hyperlink.

Tags also support special values embedded in the opening tag called attributes. A hyperlink, for instance, needs to specify where the hyperlink will take you.

<a href="http://www.patterson-consulting.net">Patterson Consulting</a>

The sample HTML above shows the a tag with an href attribute. Tags can support many attributes, and it is through the combination of tag names and attribute values that we will be able to unique identify web elements.

Opening Developer Tools

Modern web browsers include sophisticated developer tools that allow you to look at the source code for a page and easily identify which HTML tags are associated with which rendered page elements. We will be using these tools to look at the source code of the page we need to automate.

This tutorial will be using Google's Chrome web browser, although code inspection can be performed with any of the supported browser. We are choosing Chrome in part because it has a rich ecosystem of extensions that can be installed to help with element identification.

Since the Interacting with Elements tutorial focused on automating the Google Search page, we will now inspect some of the elements on that page.

Chrome Open Developer Tools

  1. Launch Google Chrome and navigate to https://www.google.com.
  2. From the Chrome Menu, select More tools then Developer tools.

This will open a new pane in Chrome with the developer tools. You may need to resize your browser window or resize the pane to enable the best view of both the web page and the developer tools. For this tutorial, we will change the developer tools to dock at the bottom of the window.

Chrome Developer Tools Change Dock Side Steps

  1. Click the Developer Tools Menu button.
  2. Select Dock to Bottom.

As shown below, we can now scroll the content of the page to display the core elements and still clearly see the developer tools at the bottom. The Elements tab is displayed which includes the HTML source code of the page.

Chrome with Developer Tools at Bottom

Inspecting Elements

The developer tools include a feature to select any element on the page to inspect the source code. Let's use this feature to inspect the text box where you type a search query.

Chrome Element Spy in Action

  1. Make sure the Elements tab is selected in Developer Tools.
  2. Click the Select an element in the page to inspect it button on the toolbar.
  3. Move the mouse cursor to the Search text box. Notice that as you mouse over elements, they are highlighted.
  4. Click on the Search text box to inspect that element.

After inspecting the text box, the source code shown in the Developer Tools will now jump to the code that defines that element.

Chrome Element Spy With Attributes

Note: The red rectangles, red arrows, and yellow highlights seen in these screenshots were added to help draw attention to relevant aspects of the image and are not something you will see with the Developer Tools.
Note: The Google Search page will change over time and the HTML code you see will likely differ from that shown in the screenshots of this tutorial. While the HTML code may change, the concepts are the same.

As you can see, the modern web uses many attributes for a single tag, but the basics are still there. We can clearly see that this element uses the input tag and has key attributes defined for class, id, and name that we might use to uniquely identify this element.

At this point, you can use the Inspect Element tool to look at other elements. Try to inspect the Google Search button.

Chrome Element Spy With Attributes

Again, the source code shown in the Developer Tools will now jump to the code that defines the button. For this element, we see it also uses the input tag and has key attributes defined for value and name that we might use to uniquely identify this element.

Once you learn how to inspect the HTML code of an element, being able to uniquely identify that elements simply becomes an exercise of combining tag names and/or attribute values.