How To Find Out Where Your Property Line Ends

This article is for anyone who is using Selenium or Endtest and wants to know the best ways to observe elements.

The key here is to detect the most stable and reliable locator for each element.

Continue in mind that asking Selenium to locate an element is like telling someone from out of town how to find a certain java shop in your city.

We'll exist using the Github Sign Up page every bit an instance.

I'll also be making some comparisons between Selenium and Endtest:

Even if you are using our Endtest Chrome Extension to locate your elements, you lot might however meet situations where you need to fetch a locator.

We're going to use different locator types to observe the Username input:

Find Element Past ID
Find Element By Name
Observe Chemical element Past Class Name
Find Element Past XPath
Find Element By CSS Selector
Detect Element By Link Text
Find Element By Partial Link Text
Find Chemical element By Tag Name

1) Find Element By ID

E'er the commencement choice.

In gild to get the ID of your element, you merely have to right click on your element and click on the Inspect option.

The construction of your chemical element will be highlighted in the console:

Information technology seems that our chemical element has the post-obit ID:

user_login

This means that your line of lawmaking will look like this:

              username = driver.find_element_by_id("user_login")

Since an ID should exist unique on a folio, information technology's the almost reliable locator type that yous can use.

It's like having but i Starbucks in your city and telling your friends to meet yous there, they can't miss.

2) Find Element By Proper name

But every bit good every bit ID, but you won't encounter it as oftentimes as you'd expect.

Elements from forms usually have the Name aspect.

Nosotros can easily see that our chemical element has the following Name:

user[login]

              username = driver.find_element_by_name("user[login]")

3) Discover Element Past Class Name

Not so reliable, since a Grade Proper name is unremarkably shared by multiple elements.

We can hands see that our chemical element has the following Form Name:

form-command

And if we take a closer wait at the rest of the inputs from that course, we'll see that all of them have the form-control Class Proper name.

              username = commuter.find_element_by_class_name("form-command")

This means that the you lot won't be able to locate that Username input with the Course Name locator type, since Selenium will throw an error.

Endtest has a more than elegant approach here than Selenium. If you lot provide that Class Name, it will just give you a warning, telling you how many elements it institute with that Class Name and that the first one will be used.

If Starbucks had a Course Proper name, information technology would probably be coffee-shop. If y'all tell your friend Encounter me at that coffee shop, they might not know which one you're talking most.

The well-nigh common mistake done by beginners is extracting all the Grade Names instead of only one.

Let's accept a look at this element:

A novice user might say that the chemical element has the following Form Name:

HeaderMenu-link d-inline-cake no-underline border border-gray-dark

Simply information technology actually has 5 different Class Names:

HeaderMenu-link d-inline-block no-underline border border-gray-nighttime

That's right, Course Names are separated by spaces.

Selenium does not have a validation for that, but Endtest does:

four) Observe Element By XPath

You merely can't avert having to utilise XPath for at least some elements. Information technology's non as bad as they say.

An XPath is like a route. There are a lot of routes that your friend can accept to go to that Starbucks.

Usually, an XPath looks something like this:

/html/body/div[four]/main/div/div/div[i]/p

The fastest way to get the XPath is from the Chrome console:

In this case, nosotros got the post-obit XPath:

//*[@id="user_login"]

If you accept a stable ID, you shouldn't carp to use XPath.

And if you lot don't accept a stable ID, the XPath that we got is not reliable.

In that location are lots of web applications which are using dynamic IDs for some elements.

An element with a dynamic ID is like a coffee shop which is changing its proper name every day.

Yous know that the coffee shop was called iCoffee yesterday, but you have no thought what name is information technology going to accept today.

Telling your friend to meet you at iCoffee will exist confusing.

That's when we need to write our own XPath.

Find out what are the stable attributes and characteristics of that element.

Going dorsum to the case with the java store that has a unlike name.

What is something that doesn't alter about it?

Mayhap the location and the fact that information technology's a coffee shop.

This means that you tin can tell your friend from out of town to meet y'all at the coffee store from the West Shopping Mall.

Let'due south take a look at our chemical element and get the XPath of its parent:

This is the XPath that we got for its parent:

//*[@id="signup-form"]/auto-cheque[i]/dl/dd

This is practically the address of the Westward Shopping Mall in our example.

Now all we take to practise add some details at the end.

Our Username chemical element is an input and information technology has the form-control Class Name.

This means that we need to append the following to the parent:

/input[@grade="form-control"]

And that part translates to: Expect in that parent for an input which has the class-control Class Proper name.

And the final XPath for our Username element volition wait similar this:

//*[@id="signup-grade"]/auto-check[one]/dl/dd/input[@class="form-command"]

Always verify your XPath in the Chrome console by striking Ctrl + F and searching for it, y'all should see your element highlighted like this:

Writing your ain XPaths isn't so scary. You will encounter situations where your element might not have an ID, merely it volition have a certain reliable aspect which makes it unique.

In that instance, your XPath will look like this:

//*[@attribute = "attribute_value"]

Yous tin can as well write an XPath which locates the element by using simply part of the value of the attribute:

//*[contains(@aspect, "part_of_attribute_value")]

For case, our Username element has the post-obit attributes:

aria-describedby="description_2822cb3d798c" proper name = "user[login]" autocapitalize = "off" autofocus = "autofocus" required = "required" class = "form-control" type = "text" id = "user_login" autocomplete = "off" spellcheck = "false"

If we want to use the aria-describedby attribute, this volition be the XPath:

//*[@aria-describedby = "description_2822cb3d798c"]

If y'all're using Endtest instead of Selenium, their recorder volition know how to automatically extract these custom XPaths.

v) Discover Chemical element By CSS Selector

The CSS Selector locator type is similar to XPath.

Some people actually claim that it's faster.

Unremarkably, a CSS Selector looks like this:

body > div.application-primary > master > div > div

And we excerpt it in a similar way:

In this case, we got the following CSS Selector:

#user_login

If y'all're familiar with CSS, y'all'll know that # stands for ID.

The similarities with XPath don't end here.

If you have a stable ID, you shouldn't bother to use CSS Selector.

And if you lot don't have a stable ID, the CSS Selector that we got is not reliable.

The solution?

To write our own custom CSS Selector.

Let's start by extracting the CSS Selector for the parent of the Username chemical element:

This is what we become:

#signup-grade > auto-cheque:nth-child(4) > dl > dd

At present, just like nosotros did for XPath, we need add some details at the end.

In example you forgot, our Username element is an input and it has the form-control Course Proper noun.

This ways that we need to append the following to the parent:

> input.form-control

And that role translates to:

Look in that parent for an input which has the class-control Form Proper name.

If yous're familiar with CSS, the dot stands for Class Name.

And the terminal CSS Selector for our Username chemical element will look like this:

#signup-form > auto-check:nth-child(iv) > dl > dd > input.form-command

It's not mandatory to add together both the element type and the Grade Name.

You tin just use i of them:

#signup-form > auto-bank check:nth-kid(four) > dl > dd > input

#signup-form > car-check:nth-kid(4) > dl > dd > .course-command

Again, if yous're using Endtest instead of Selenium, their recorder will know how to automatically extract these custom CSS Selectors.

six) Find Element By Link Text

The Link Text locator type but works for links.

Your element is a Link if it has the following format:

The a stands for Anchor.

Since our Username chemical element is an input and not a link, we won't be able to locate it by using Link Text.

It'south worth remembering that the Link Text is simply the text between the tags.

In the case of the link from the screenshot, the Link Text is Enterprise.

Our Selenium lawmaking would expect like this:

              enterprise_link = driver.find_element_by_link_text("Enterprise")

7) Find Chemical element By Partial Link Text

As the name suggests, it's exactly like Link Text, only with the difference that you but demand to add together office of the Link Text.

And this would be our Selenium code:

              enterprise_link = driver.find_element_by_partial_link_text("Enterp")

viii) Notice Element By Tag Proper name

Equally we have seen from the previous examples, an element always has a tag.

You lot can use the Tag Proper name locator type if that'due south the only unique characteristic of the element that you tin can take hold of on to.

Realistically speaking, I don't think you'll ever apply this one.

Endtest has an actress locator type, Text Inside, similar to Partial Link Text, but information technology works for all types of elements.

Even if your locators are reliable, y'all will see situations where your spider web application goes through a revamping and yous'll consume fourth dimension on keeping your tests in sync with your web applications.

Ane selection to avert this situation is to use Self-Healing Tests.