selenium-webdriver Locating Web Elements Locating page elements using WebDriver
Example
To interact with WebElements in a webpage, first we need to identify the location of the element.
By is the keyword available in selenium.
You can locate the elements By..
- By ID
- By Class Name
- By TagName
- By Name
- By Link Text
- By Partial Link Text
- By CSS Selector
- By XPath
- Using JavaScript
Consider the below script example
<form name="loginForm">
Login Username: <input id="username" name="login" type="text" />
Password: <input id="password" name="password" type="password" />
<input name="login" type="submit" value="Login" />
In the above code the username and password are set using id's. Now you are going to identify the elements with id.
driver.findElement(By.id(username));
driver.findElement(By.id(password));
As selenium support 7 different languages, this document gives you an idea to locate the elements in all the languages.
By ID
Example of how to find an element using ID:
<div id="coolestWidgetEvah">...</div>
Java - WebElement element = driver.findElement(By.id("coolestWidgetEvah"));
C# - IWebElement element = driver.FindElement(By.Id("coolestWidgetEvah"));
Python - element = driver.find_element_by_id("coolestWidgetEvah")
Ruby - element = driver.find_element(:id, "coolestWidgetEvah")
JavaScript/Protractor - var elm = element(by.id("coolestWidgetEvah"));
By Class Name
Example of how to find an element using class name:
<div class="cheese"><span>Cheddar</span></div>
Java - WebElement element = driver.findElement(By.className("cheese"));
C# - IWebElement element = driver.FindElement(By.ClassName("cheese"));
Python - element = driver.find_element_by_class_name("cheese")
Ruby - cheeses = driver.find_elements(:class, "cheese")
JavaScript/Protractor - var elm = element(by.className("cheese"));
By Tag Name
Example of how to find an element using tag name:
<iframe src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3B...%26quot%3B%26gt%3B%26lt%3B%2Fiframe%26gt%3BJava%2520%2520%2520%2520%2520%2520%2520-%2520%2520WebElement%2520element%2520%3D%2520driver.findElement(By.tagName(%26quot%3Biframe%26quot%3B))%3BC%23%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2520IWebElement%2520element%2520%3D%2520driver.FindElement(By.TagName(%26quot%3Biframe%26quot%3B))%3BPython%2520%2520%2520%2520%2520-%2520%2520element%2520%3D%2520driver.find_element_by_tag_name(%26quot%3Biframe%26quot%3B)Ruby%2520%2520%2520%2520%2520%2520%2520-%2520%2520frame%2520%3D%2520driver.find_element(%3Atag_name%2C%2520%26quot%3Biframe%26quot%3B)JavaScript%2FProtractor%2520-%2520%2520var%2520elm%2520%3D%2520element(by.tagName(%26quot%3Biframe%26quot%3B))%3B%253C%2Fcode">By Name
Example of how to find an element using name:
<input name="cheese" type="text"/>
Java - WebElement element = driver.findElement(By.name("cheese"));
C# - IWebElement element = driver.FindElement(By.Name("cheese"));
Python - element = driver.find_element_by_name("cheese")
Ruby - cheese = driver.find_element(:name, "cheese")
JavaScript/Protractor - var elm = element(by.name("cheese"));
By Link Text
Example of how to find an element using link text:
<a href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dcheese%26quot%3B%26gt%3Bcheese%26lt%3B%2Fa%26gt%3B%26gt%3BJava%2520%2520%2520%2520%2520%2520%2520-%2520%2520WebElement%2520element%2520%3D%2520driver.findElement(By.linkText(%26quot%3Bcheese%26quot%3B))%3BC%23%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2520IWebElement%2520element%2520%3D%2520driver.FindElement(By.LinkText(%26quot%3Bcheese%26quot%3B))%3BPython%2520%2520%2520%2520%2520-%2520%2520element%2520%3D%2520driver.find_element_by_link_text(%26quot%3Bcheese%26quot%3B)Ruby%2520%2520%2520%2520%2520%2520%2520-%2520%2520cheese%2520%3D%2520driver.find_element(%3Alink%2C%2520%26quot%3Bcheese%26quot%3B)JavaScript%2FProtractor%2520-%2520%2520var%2520elm%2520%3D%2520element(by.linkText(%26quot%3Bcheese%26quot%3B))%3B%253C%2Fcode">By Partial Link Text
Example of how to find an element using partial link text:
<a href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fwww.google.com%2Fsearch%3Fq%3Dcheese%26quot%3B%26gt%3Bsearch%2520for%2520cheese%26lt%3B%2Fa%26gt%3B%26gt%3BJava%2520%2520%2520%2520%2520%2520%2520-%2520%2520WebElement%2520element%2520%3D%2520driver.findElement(By.partialLinkText(%26quot%3Bcheese%26quot%3B))%3BC%23%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2520IWebElement%2520element%2520%3D%2520driver.FindElement(By.PartialLinkText(%26quot%3Bcheese%26quot%3B))%3BPython%2520%2520%2520%2520%2520-%2520%2520element%2520%3D%2520driver.find_element_by_partial_link_text(%26quot%3Bcheese%26quot%3B)Ruby%2520%2520%2520%2520%2520%2520%2520-%2520%2520cheese%2520%3D%2520driver.find_element(%3Apartial_link_text%2C%2520%26quot%3Bcheese%26quot%3B)JavaScript%2FProtractor%2520-%2520%2520var%2520elm%2520%3D%2520element(by.partialLinkText(%26quot%3Bcheese%26quot%3B))%3B%253C%2Fcode">By CSS Selectors
Example of how to find an element using CSS Selectors:
<div id="food" class="dairy">milk</span>
Java - WebElement element = driver.findElement(By.cssSelector("#food.dairy")); //# is used to indicate id and . is used for classname.
C# - IWebElement element = driver.FindElement(By.CssSelector("#food.dairy"));
Python - element = driver.find_element_by_css_selector("#food.dairy")
Ruby - cheese = driver.find_element(:css, "#food span.dairy.aged")
JavaScript/Protractor - var elm = element(by.css("#food.dairy"));
Here's an article about creating CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp
By XPath
Example of how to find an element using XPath:
<input type="text" name="example" />
Java - WebElement element = driver.findElement(By.xpath("//input"));
C# - IWebElement element = driver.FindElement(By.XPath("//input"));
Python - element = driver.find_element_by_xpath("//input")
Ruby - inputs = driver.find_elements(:xpath, "//input")
JavaScript/Protractor - var elm = element(by.xpath("//input"));
Here's an article about XPath: http://www.w3schools.com/xsl/xpath_intro.asp
Using JavaScript
You can execute arbitrary javascript to find an element and as long as you return a DOM Element, it will be automatically converted to a WebElement object.
Simple example on a page that has jQuery loaded:
Java - WebElement element = (WebElement)
((JavascriptExecutor)driver).executeScript("return $('.cheese')[0]");
C# - IWebElement element = (IWebElement)
((IJavaScriptExecutor)driver).ExecuteScript("return $('.cheese')[0]");
Python - element = driver.execute_script("return $('.cheese')[0]");
Ruby - element = driver.execute_script("return $('.cheese')[0]")
JavaScript/Protractor -
Please note: This method will not work if your particular WebDriver doesn't support JavaScript, such as SimpleBrowser.
