When creating automated tests with Selenium, the most common thing you’ll find yourself doing over and over again is finding out your locators for the elements in which you wish to interact with.
There are no two ways about it, this is a tedious task. There are automated page scrapers that can do this for you (how well is debatable), and we will create our very own tool to do this down the line. But for the most part, you will be doing the job of checking each element and looking for a locator.
The trouble is, quite often an element can have multiple locators, and it’s a task in itself to work out which is the right one for you to use. First let's cover how we get our locators. I suggest using Chrome for this, as Chrome has always been the easiest and quickest (for me personally) to get an elements locator. Navigate to the page you wish to locate the element on, right click the element and choose ‘Inspect Element’.
You should see something like this (you may need to scroll across the code box to see it all):
<input class="gsfi" id="lst-ib" maxlength="2048" name="q" autocomplete="off"
title="Search" type="text" value=""
aria-label="Search" aria-haspopup="false" role="combobox"
aria-autocomplete="list" style="border: none; padding: 0px; margin: 0px; height: auto;
width: 100%; background:
url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D")
transparent; position: absolute; z-index: 6; left: 0px; outline: none;"
dir="ltr" spellcheck="false">
This belongs to the search bar on the Google homepage. So what can we see? The first line includes an id attribute, which is great news. Id is the best locator to use whenever possible, and we’ll cover why later. Other attributes that are useful to use are the class name and the title. The rest can be ignored as we aren’t that interested.
As well as looking at this, there is another thing you need to know. If you right click on the HTML code again, you’ll see another menu that says Copy->, if you hover over this, we can see ‘Copy Selector’ and ‘Copy XPath’. Both of these are extremely useful and you will need to use them.
So what are our locator types?
- Id = This is the most tidy, reliable and most favourable of all the locators. If your element has a locator then rejoice, for you are blessed with good web developers who appreciate you. These will not only be tidy and short locators to use, they will nearly always be descriptive and clear, which makes them great to use in your page objects classes.
- Class Name = Pretty self explanatory, an element will belong to a class, and the name of the class can be used as a locator
- CSS Selector = You’ll have a love hate relationship with these. They can be good to use on pages that are quite low on content, and if your element has an id, then you can normally just use a hash in front of the id to give you your CSS selector. However, find a page with lots of nested elements, tables or frames, then all of a sudden, they become a nightmare. They become very long and untidy, and become very fragile to use, as even the smallest change to the webpage can break your locators.
- Link Text/Partial Link Text = If your element is just a
string or a link, say in a menu, then you can use the string text as a locator. - Name = The name of the element, this isn’t always present on an element though, as demonstrated in our Google example above.
- XPath = Similar to CSS Selectors in that they can be horrible to use on content heavy web applications.
Once you have your locator that you wish to use, here is how we can find it using Selenium.
_driver.FindElement(By.Id("username"));
_driver.FindElement(By.ClassName("user form"));
_driver.FindElement(By.CssSelector("#username"));
_driver.FindElement(By.LinkText("Learn Automation"));
_driver.FindElement(By.Name("Locator"));
_driver.FindElement(By.PartialLinkText("Learn"));
_driver.FindElement(By.TagName("a"));
_driver.FindElement(By.XPath("//*[@id='panel']/div/h1"));
As mentioned earlier, you’ll develop a preference the more you write tests, to which locator you prefer to use. I highly recommend using id when possible though, especially when starting out.
XPath, as mentioned before can be extremely complex, but it can also be extremely powerful. They can be used to find the trickiest of elements, and can have code like syntax, or expressions, to do complex searches for elements. We will cover this later on, but I definitely wouldn’t worry about this to begin with.
The post Selenium – Locators appeared first on Learn Automation.
