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.
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>
.
/
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.
Since the Interacting with Elements tutorial focused on automating the Google Search page, we will now inspect some of the elements on that page.
- Launch Google Chrome and navigate to
https://www.google.com
. - 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.
- Click the Developer Tools Menu button.
- 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.
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.
- Make sure the Elements tab is selected in Developer Tools.
- Click the Select an element in the page to inspect it button on the toolbar.
- Move the mouse cursor to the Search text box. Notice that as you mouse over elements, they are highlighted.
- 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.
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.
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.