In order for Selenium to interact with a certain web pages it will have to gain access to certain elements in the code. To do that you must first get familiar with tools for Element Inspection. All common browsers have such tools:
Firefox: Right click on any element and select Inspect Element or F12. You can use Firebug as an add on (old versions of FF have it as a default)
Chrome: Right click on any element and select Inspect Element or F12.
IE: Go to Developers Tool (F12), then Right click on any element and select Inspect Element
Safari: Go to Preferences, click on Advanced tab and enable Show Developer Menu.
You can use different approaches to locate Elements and use them in your Selenium tests. You can choose from the following:
By ID
The first and most easy way is to match an ID to an element. This is most useful when there are unique IDs in the html body for the prefered element/s that you want to search for. They will look like this:
<p> <input id=”email” class=”inputText” type=”text”...> </p>
In this case the ID is “email”. The IDs can also be numeric values.
By XPATH
One of the most common ways of finding elements is by using xpath. All of the most commonly used browsers can copy the xpath path of an element to your clipboard. You can use this to get all needed elements just by using the following command:
driver.findElement(By.xpath("FIND"));
You can replace FIND with options for an “absolute path” of an element (html/body/div1/pic1), or you can use “relative path” (//pic1).
Using indexing in xpath is also available (//pic1[2]).
The attributes values is also common in xpath location (By.xpath(“img[@alt=’picture’]”)).
You can also specify the needed cell in a table using xpath (//table[@id=’table’]//tr[1]/td[3])
Building a reliable Selenium locators is the bases of all your automation tests. It is always good to keep the paths of the locators short. This includes locators like nth-child() and [n]. If for some reason there is a small change in DOM, the locators will remain the same. A small example for such short locators is:
//div//a
This means that “a” is a descendant element of a particular type. You can specify it further if needed:
//div//b//a
You can also use it with a specific attribute:
//a[@title=’Something’]
By NAME
The second case is using the Name of an element in the html. The name prefix is used similarly to the ID element. It looks like this:
<p> <input id=”email” class=”inputText” type=”text” name=”inputTextName”> </p>
In this case the name is “inputTextName”. Names can also contain numeric values.
By TEXT
Next option is through searching text in the webpage. This can be done by searching partial part of the text or searching for the text in full. Be warned that if the text is altered in any way, it will not be located by the selector. The text locators look like this:
<body> <a class="some link" href="https://sometext.com">Some text</a> </body>
You can use full text search as you can see here:
driver.findElement(By.linkText(“Some text”)
Or you can search by partial text:
driver.findElement(By.partialLinkText("Some"))
By TAG NAME
The tag name element is very easy to locate as long as the elements you are searching for are under the same tag name. They will look like this:
<body> <h1>Some text</h1> <h1>Some text more</h1> </body>
If not specified additionally the tag name element will match only with the first element that is found on the webpage. You can use it to pinpoint certain element, but you will need to get all the elements within that element criteria (e.g.: dropdown menu).
By CLASS
You can also focus on locating elements by class. They will look like this:
<p> <input id=”email” class=”inputText2” type=”text”...> </p>
In this case the locator will have to find:
driver.findElement(By.tagName(“inputText2”).
By CSS
The CSS locators are used as common as the xpath ones. It is used to locate element(s) and has a very similar construct as Xpath. They can pinpoint the element using several variables (tags, attributes and values) of the webpage. For instance:
- Tag and ID;
- Tag and class;
- Tag and attribute;
- Tag, class, and attribute;
- Inner text
Note: you can also use: Ids, Class, Tags, Values of Attributes individually as css locators.
What this means is css=<[attribute^=prefix]>
There is also a distinction about searching by find_elements_by_name and find_element_by_name. If you are searching by elements – it will return a collection/array of matching elements. If you are searching by element – it will only return the first instance of an element with the matching tag name.
CSS by ID
<p> <input id=”email” class=”inputText2” type=”text”...> </p>
The locators look like this:
driver.findElement(By.cssSelector("input[id='email']"))
CSS by Class
<div class="’username’"></div> <div class="’password’"></div>
The locators look like this:
driver.findElement(By.cssSelector(“.password”)
CSS by Attribute
<p> <input id=”text1” class=”inputText2” type=”textBox” name”usertext’> </p>
The locators look like this:
driver.FindElement(By.CssSelector(name=’usertext’)
CSS by Inner text
<body> <a class="some link" href="https://sometext.com">Some text</a> </body>
The locators look like this:
driver.FindElement(By.CssSelector(contains(‘Some’))
It is good to mention that you can select an element by multiple attributes:
driver.findElement(By.cssSelector(“input[id=’someting1’][value=’something2’]”))
Also keep in mind the difference between findElement() and findElements() method. Both are not the same and have different end results when no such element(s) are found in DOM. If there is more than one element to be found when using the findElement(), only the first element will be returned. If you are using the findElements() it will return a full list of the matching instances or if nothing is found it will return an empty list.
You can also use an a list to gather all the findElements() like an array[]. For example you can get all the text of a table:
List<WebElement> elements = driver.findElements(By.tagName("someTag"));
for (int i = 0; i<elements.size(); i++) {
System.out.println("Text:" + elements.get(i).getAttribute("value"));
}
Keep in mind that there are multiple other elements that can be located by Selenium Webdriver, but they are more difficult to find on a webpage. Such elements are Shadow DOM elements or Flash elements.
