What are Selenium Locators and Find Element Commands?
Selenium Locators
- ID
- Class Name
- Name
- Link Text
- Partial Link Text
- Tag Name
- Xpaths
- CSS Selector
Selenium Locators Video Tutorial (YouTube)
1. Locate by ID, Name and ClassName
- These three are the most common type of locators.
- Id, Name and ClassName are the attributes used along with html tags.
- These attributes are given by Front-end developers for CSS designing.
- Automation testers make use of these attributes for locating elements.
Example HTML Code for Login Page using Id, Name and ClassName attributes:
"
<html>
<title>Sample Login Page </title>
<body>
<input type='text' id='username' name='user' classname='user'>
<input type='password' id='password' name='pwd'>
<button id='login'></button>
</body>
</html>
"
In above sample html code, there are three elements present:
- Input tag for username text box, it has id, name and classname attributes. We can use anyone of it for locating username textbox.
- Input tag for password box, it has id and name attributes only. We can use anyone of the two.
- Button tag for login button, it has only id attribute so we can only use id.
Code for Id-
driver.findElement(By.id("some-id"));
Code for Name -
driver.findElement(By.name("some-name"));
Code for ClassName -
driver.findElement(By.className("some-className"));
How to find ID of an element on a Web Page?
- Open a webpage say - https://www.techlistic.com/p/selenium-practice-form.html
- Click F12 to open firebug or right click on the element (whose id to be find) and click on inspect element.
- Html console of the page will be opened.
Now let's find id of 'Male' radio box
- Click on the cursor icon on left side of firebug.
- Now move the cursor to the element whose id you want to find. We will move cursor to 'Male' radio box and click on it.
- You will observe in the firebug some html code will be highlighted. It is the html code of 'Male' radio box.
- In that html code find something like id='some_value'. It is the id to be used in selenium command. For 'male' radio box id is 'sex-0'.
- Code - driver.findElement(By.id("sex-0"));
- Refer following pic.
Key Points to remember about Id, Name and ClassName:
2. Locate by Link Text and Partial LinkText
- Both these locators are used to click on links.
- LinkText is used to click on a static link, whose value is not changing.
- And Partial link text is used to click on a link which is half dynamic. A link whose half text is static and half text is changing.
- Like Profile Page link, XYZ Profile.
- Here XYZ is name of person, which will be different for every user/person but 'Profile' text will remain unchanged.
Example:
- Open https://www.techlistic.com/
- I want to click on any menu link let's say on 'Selenium Tutorial' link using Selenium.
- You have to write text of the link (which is displaying on the page) in the Selenium command.
Code for Link Text -
driver.findElement(By.linkText("Selenium Tutorial"));
Code for Partial Link Text -
driver.findElement(By.partialLinkText("some-partial-link-text"));
3. Locate by Tag Name
Using this command one locate elements using html tag name.
Code:
// Example - Get all options from a dropdown and print them WebElement select = driver.findElement(By.tagName("select")); // Get all options in a list with tagname 'option' ListallOptions = select. findElements(By.tagName("option"));
Selenium Find Element Commands
These are the different commands to locate/find the GUI elements on the web page using 8 different locators. We can perform actions on elements only after finding them. You can use any of the one locator to find element. Below is the command to find any element on Web page.// Find Element
driver.findElement(arg0);
All Find Element Commands:
/**************************
* Find Element Commands *
**************************
*/
// Find Single WebElemnt
driver.findElement(arg0);
// Find Multiple WebElements, it returns a list of WebElements
driver.findElements(arg0);
// Find by different locators
driver.findElement(By.className("class-name"));
driver.findElement(By.cssSelector("some-css-selctor"));
driver.findElement(By.id("some-id"));
driver.findElement(By.linkText("some-link-text"));
driver.findElement(By.name("some-name"));
driver.findElement(By.partialLinkText("some-partial-link-text"));
driver.findElement(By.tagName("some-html-tag-name"));
driver.findElement(By.xpath("some-xpath-expression"));
// Find web element and store value in WebElement variable for re-usability
WebElement element = driver.findElement(By.xpath("/some/xpath");
We will learn about xpath and css selector in upcoming tutorials.
What is Selenium WebDriver? << Previous || Next >> Selenium WebDriver Commands
Follow Us
Feel free to ask queries or share your thoughts in comments or email us.
Comments
Post a Comment