Introduction to Identifiers
    • Dark
      Light

    Introduction to Identifiers

    • Dark
      Light

    Article Summary

    Welcome to the Xpaths 101 series. In this article, we'll be giving an introduction to identifiers, and why they are so important in automating your testing.

    What are Identifiers, and why are they important?

    If you've ever ran an automated test before, you may have come across a message that says this:

    This error lets us know that one of our identifiers failed to locate the element on the webpage we want to interact with. 

    Identifiers are a path that provide a way to locate elements, which can then be used in automation. By providing a way to target and interact with specific elements on a web page, they allow for more precise and reliable automation scripts. Xpaths are one popular type of Identifier.

    Identifiers are crucial to run automated web testing. Almost all automation failures are due to bad identifiers - fortunately, there are ways to create great identifiers!

    Webpage Basics

    To learn about Xpaths, we will first need to learn about the XML, HTML, and the DOM they navigate through.

    XML (eXtensible Markup Language) is a markup language that was designed to store and transport data. It looks like this:

    <note>  
      <to>Henry</to>  
      <from>Jill</from>  
      <heading>Reminder</heading>  
      <body>Don't forget the milk!</body>  
    </note>  

    HTML (Hyper Text Markup Language) is a type of XML used for creating webpages. It describes the structure of a webpage through a series of elements, which labels the content. 

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Page Title</title>
    	</head>
    	<body>
    		<h1>My First Heading</h1>
    		<p>My first paragraph.</p>
    	</body>
    </html>

    The DOM (Document Object Model) is the specific instance of a webpage. When a webpage is loaded, the browser creates a DOM of the page. If you've used Google inspect before, you would have been interacting with the DOM.

    A Node is part of the DOM tree, like you see above. An element is a particular type of node.

    XPaths, which stands for XML Path Language, uses syntax to identify and navigate through an XML document. They're used to locate elements on a web page, making it easier to interact with them during test automation. 

    This tree shows how two Xpaths would navigate to the label and input elements on the example XML shown above.

     

    Xpath Syntax

    Let’s get familiar with the terms used in Xpath syntax.

    Elements are the components that make up a webpage. If you look at an HTML document, you'll see that it is made up of elements that look something like this:


    Most elements will have an opening and closing tag, as well as inner text. For our purposes, we are interested in what the opening tag contains. 

    Opening tags will contain a combination of a tag name, attribute(s), and attribute value(s). Attributes are code that is put inside of an opening tag to give additional information. In the example below, our attribute name has the value of txtpassword. Xpaths can be used with different element attributes such as class, id, name, value, and text content to locate elements. 

    Now that we know what elements, tags, and attributes are, let's take a look at the syntax for a Xpath:


    You'll see that our example syntax starts with "//". This is an example of relative path formatting (more on this in the next article). 

    From there, we have our tag name, which shows which element we want to work with in our automation. 

    The attribute is a specific part of that element that we are selecting. We need to be specific, because an element can contain a variety of interactable pieces, some of which we might not want to use. The format for selecting an attribute is @attributeName.

    The attribute value is the specific value we want to target. We need to specify this because attributes can have multiple values, and we need to choose a specific one in order for the automation to be able to interact with the webpage.

    It's worth mentioning here that attributes are not the only selection method available with Xpaths. We'll cover additional methods in later parts of this course, but a great overview is available on this cheatsheet on the devhints.io site.

    Summary

    Identifiers, such as Xpaths, are a path that provide a way to locate elements within HTML which can then be used in automation. By providing a way to target and interact with specific elements on a web page, they allow for more precise and reliable automation scripts. Identifiers are crucial to run automated web testing.

    Xpaths is a query language we can use in order to locate elements that our automation can use. It follows specific syntax to create a path that locates a unique part of an element. 

    In the next article, we'll cover relative and absolute Xpaths, Xpath axes, and Xpath functions.