How to Inspect Web Elements & Methods to Locate Them with Chrome Devtools

The following tutorial is the second step in Creating a Test Automation Framework with C#, Nunit & Selenium Webdriver, in which we’ll be learning about the various methods to inspect web elements and the methods to locate them with Chrome Devtools to create an automated test with C# and Selenium WebDriver.


Tutorial Overview:

Class 1 – Creating an Automated Test Using Selenium WebDriver 3 and C#

Class 2 – How to Create a Test Automation Framework Architecture with Selenium WebDriver 3

Class 3 – Utilizing Test Automation Framework with Advanced Capabilities


There are some browser tools that you can use in order to inspect web elements in the DOM easier:

In this tutorial we’ll be focusing on Chrome DevTools and the numerous ways to inspect web elements on the site we are willing to test with Selenium. The following list will cover 6 of them:

Element ID Field Name

Each input field in a form has a name. Generally, field names are unique to the form, but not always. Usually, a Field Name locator for the username and password fields on a Login page work great. Although, each button in a related group will have the same name and different values. Therefore, a different locator must be used to click on a specific button in the group.

Text

The text locator looks for elements that contain the supplied text. It is handy for finding links and buttons on the page that have visible text, but not an image that contains the text. This locator is custom to Load Tester and is not available in Selenium/Webdriver.

Under the covers, it is implemented with a XPath locator that looks at these items (in this order):

  1. Button labels
  2. Input values (e.g. text fields, etc)
  3. Link text
  4. Labels
  5. Elements with a title attribute
  6. Elements with text

Link Text

If case there is a visible element with text that exactly matches the provided text, the Link Text locator will find it.

CSS Class

The CSS Class locator finds the first element with a specific CSS class attribute. This is useful for locating items that have a unique style on the page. A common example is Submit and Login/Logout buttons because frequently, there is only one control on the page with that style.

XPath

XPath is a language for traversing the structure of the DOM (Document Object Model) of the web page. XPath locators are very powerful and flexible. Any element on the page can be located via one or more XPaths and most other locators can be expressed as an XPath. Except CSS Selectors, no other locators share this feature. A well-written XPath can be very robust, but a poor XPath can be fragile, and may break when the application changes.

Web pages and the underlying DOM are structured hierarchically. XPath allows you to navigate that structure.

CSS Selector

CSS Selectors are similar to XPaths – they are flexible and powerful. Unlike XPath, they are not based on the structure of the DOM and don’t navigate the DOM in that manner. However, it is  easier to perform some actions than it is with XPath. If your application uses a lot of CSS, then your developers are likely very familiar with the concept and can help you devise CSS Selectors to find any element on the page.

ID

The ID is a unique identifier for the element that is typically assigned by the developer of the code. The ID should be unique on the page, but browsers do allow violation of this rule, therefore occasionally it isn’t unique. This is usually the best locator as only one should exist on the page. If it appears in a list or table, then there is a good chance that the IDs can change for future visits to the page and a more complex locator may be required.

Now, we’ll focus on the field: ‘Your Name’. To be able to inspect this element via Selenium, we need to find a way to reach it by a right click on the element> Inspect.

Chrome’s console will open and the element will receive focus as shown in the screenshot:

 

 

 

 

The element we are inspecting is the INPUT type, which has an attribute of the NAME type. The NAME has a unique value.

 

It’s clear that the web element has an ID, which is also one of the methods to inspect web elements with the assistance of Selenium.

Let’s inspect the element on the header of the page – Contact Us.


In the Next part in the tutorial for creating a test automation framework, we’ll be learning How to Find  Elements with Selenium WebDriver.

-Comment your questions, recommendations or ideas in the comments below! Also, I’m curious to know which method you use to locate web elements!