How to Locate an Element Using DOM | Document Object Model Examples
We have come across different types of locators, and located elements using CSS selectors so far! Let’s understand how to locate an element using DOM or Document Object Model which is also the last type of Selenium locator that we will be seeing.
Yeah! That was a long ass topic.
Let’s get it over with quickly, shall we?
How to Locate an Element Using DOM
DOM or Document Object Model is nothing but an API meant for HTML and XML, basically a model that defines the logical structuring of documents and the way they can be accessed and changed.
Good news is Selenium IDE can easily use DOM to access elements.
Since we are going to use DOM, the target box in our Selenium IDE box should start with:
dom=document…
However you could choose to not mention “dom=” since Selenium IDE is intelligent enough to interpret anything that starts with “document” as a path inside DOM. So chill!
You can locate elements using the following four methods via DOM:
- getElementByID
- getElementsByName
- dom:name
- dom:index
We will take a look at them one by one to understand how elements are located using Selenium IDE. By the end of this tutorial you will know How to Locate an Element Using DOM by all its popular methods.
Locating an Element using getElementByID
As it is easy to guess from the moniker, getElementByID is used to grab an element using its ID, something similar to the concept of tag and ID we saw with the CSS Selectors.
The syntax to remember here is:
document.getElementByID(“ID of the element”)
where ID of the element is the value of the ID attribute
Let’s see a step by step process to locate one of the elements from the goodreads website:
Step 1: Open your Firefox browser then Selenium IDE using Ctrl + Alt + S. You can also use the Selenium IDE button located at the top right-hand side corner.
Step 2: Stop recording by clicking on the red button on the top right-hand side corner.
Step 3: Click on the first line of the Editor pane and then type “open” in the Command box. Then follow it up by “https://www.goodreads.com/” in the Target box.
Step 4: Click on the second line of the Editor pane and then type “type” in the Command box.
Step 5: To confirm open the website of goodreads on your browser. Then open Firebug (you can use F12)
Step 6: Click on the Inspect button on Firebug and then on Email Address text box.
Step 7: Copy the id value “userSignInFormEmail” and put it in the syntax that was mentioned above.
This is what you will get:
document.getElementById(“userSignInFormEmail”)
Use this in the target box of Selenium IDE and then click on Find.
There! Email Address box gets highlighted in Yellow. It has been located successfully!
Locating an Element Using getElementsByName
Another method in “How to Locate an Element Using DOM” chapter is the getElementsByName method. It basically grabs an array of elements using the name you enter. Each element in is provided an index number based on the place where it appears. So if it appears first, it will have an index no. 0, if it appears second it will have index 1, and so on.
This happens generally in the case of radio buttons or checkboxes.
The syntax to remember here is:
document.getElementsByName(“name”)[index]
Let’s see an example:
On a website called “http://www.ironspider.ca/forms/checkradio.htm” I have seen the following radio box with its HTML corresponding to the same name:
Now the first time it appears the index would be 0, for the second value Mozilla the index would be 1 and for the third “Opera” it would be 2.
We will try to highlight Mozilla by putting 1 in the index in our syntax.
So the stuff that we will put inside the target box would be:
document.getElementsByName(“browser”)[1]
When you click on Find this will happen:
As you can see it highlights Mozilla, (in green if not in yellow) when we click on Find. It has been located.
Locating an Element Using dom: name
Then there is dom: name in How to Locate an Element Using DOM section.
Herein forms are involved. However, this method holds only true when there is a form with a name.
The syntax to remember here is:
document.forms[“name of the form”].element[“name of the element”]
Let’s take an example to get this.
There’s this website link: “http://www.teach-nology.com/teachers/testing/” that has a form with a name, as well as a Search Box with a name on it as shown in the HTML below:
As you can see we have a form name: SearchBox
and the element that is in it named: zoom_query:
We will use the above info in our Syntax which will become something like this:
document.forms[“SearchBox”].elements[“zoom_query”]
Let’s put this in our Target box in Selenium IDE and then click on Find:
As you can see the Search Box at the top highlights in Yellow.
Locating an Element Using dom: index
Another one of those ways in How to Locate an Element Using DOM topic is the one that talks about indices once again. Here we deal with form indices as well as element indices.
The syntax to remember here is:
document.forms[index of the form].elements[index of the element]
You can use any form here really. If the form appears for the first time on the page, the index number it will have will be 0.
Remember you have to pay attention to hidden elements as well. So if there is a hidden element prior to your element. Start your count from that!
Let’s take an example:
We will once again try this on goodreads.com:
As you can see the form appears for the first time, and hence its index would be 0.
Our element appears after two more inputs, and hence the index here would be 2.
Let’s put this info in our syntax. You will get:
document.forms[0].elements[2]
Time to copy the info to the target in Selenium IDE and then click on Find.
It highlights successfully.
You could also choose to enter the name of the element instead of index, and the result would be the same.
Locating an Element Using XPath
When you are defining parts in XML you use XPath. It uses Path Expressions to navigate through elements and attributes inside an XML document. Since HTML and XML are fairly similar with the latter being the extension of HTML, we can make use of XPath logic to navigate through elements.
With the help of XPath you can access literally any element you wish on a page. Yep it’s that cool. The only problem being it is a tad complicated. The good news to beat that – Firebug can generate XPath Locators, and Firebug’s our buddy, right?
So let’s see an example where it is hard to locate an element using any of the methods we have seen so far – an image! How do we access an image, right?
XPath makes it a piece of cake!
Let’s see the example of Facebook again.
Facebook has got this image of a map in the center of it. We will try to locate it.
Step 1: Inspect the element by clicking on the inspect button and then clicking on the image.
As you can see it tells us that it is a .png file.
Step 2: Right click on its HTML code and then select Copy XPath:
Step 3: Navigate to Selenium IDE and type ‘/’ in the target box before pasting the copied XPath. It should look something like this:
Step 4: Time to click on Find. Go ahead!
There! Isn’t that a beau-T?
Now that you know how to locate an element using DOM, I think there is nothing left in our Selenium locators topic. Go ahead and experiment on different websites! There are plenty of them lying around waiting to be gnawed at.
