Monday 18 July 2016

Selenium2: WebDriver: Locate elements using CSS selectors

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.,



Previous                                                 Next                                                 Home

No comments:

Post a Comment