WebDriver interface
provides number of methods to locate elements in a web page. You can locate an
element by using class name, id, name, linktext etc., In this post, I am going
to explain how to locate an element using css selector.
What is a CSS selctor?
CSS stands for
Cascading style sheet. CSS selectors are used to locate an element in a web
page.
There are two types of
selectors used frequently.
a. id selector
b. class selector
id selector
id selector uses the id
attribute of HTML element. Since id must be unique in one web page, id selector
is used to select one unique element. Id selector is defined using # character.
For example, following style snippet adds the style to an element with id
para1.
#para1 {
text-align: center;
color: green;
}
class selector
The class selector
selects elements with a specific class attribute. Class selector is defined
using . operator. For example, following snippet applies style to all the
elements where the class has the value center.
center {
text-align: center;
color: blue;
}
How to locate an element using id selector?
Following syntax is
used to locate an element with given id.
‘elementName[id=idName]’
Following statement
locates a paragraph element with id para1.
WebElement element = driver.findElement(By.cssSelector("p[id=para1]"));
How to locate an element using class selector?
There is no special
syntax, following statement locate all the elements where class is center.
List<WebElement>
elements = driver.findElements(By.cssSelector(".center"));
Following is the
index.jsp file, i am going to use for the demo. Assume index.jsp, is running at
url "http://localhost:8080/application". Following application get
the text associated with elements that belong to class .center and belongs to
id #para1.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> #para1 { text-align: center; color: green; } .center { text-align: center; color: blue; } </style> </head> <body> <div class="center"> <h1>Simple application to demonstrate Selenium webdriver</h1> </div> <div class="center"> <p id="para1">WebDriver interface provides number of methods to locate elements in a web page. You can locate an element by using class name, id, name, linktext etc.,</p> </div> </body> </html>
import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class App { public static void main(String[] args) { WebDriver driver = new FirefoxDriver(); driver.get("http://localhost:8080/application"); System.out.println("Data specific to class center is"); System.out.println("------------------------------"); List<WebElement> elements = driver.findElements(By .cssSelector(".center")); for (WebElement element : elements) { System.out.println(element.getText()); } System.out.println("\nData specific to id para1 is"); System.out.println("------------------------------"); WebElement element = driver.findElement(By.cssSelector("p[id=para1]")); System.out.println(element.getText()); driver.close(); } }
Output
Data specific to class center is ------------------------------ Simple application to demonstrate Selenium webdriver WebDriver interface provides number of methods to locate elements in a web page. You can locate an element by using class name, id, name, linktext etc., Data specific to id para1 is ------------------------------ WebDriver interface provides number of methods to locate elements in a web page. You can locate an element by using class name, id, name, linktext etc.,
No comments:
Post a Comment