5) close():

1. name Attribute: On Dom structure name attribute is mostly used to represent an element on webpage. In Css name attribute is located using below syntax: css=tagName[name=’value’]

For css locator for the Email text box in facebook page is:

input[name=’email’]

2) class Attribute: In Css dot (.) represents the class attribute.So in Css class attribute represents by the syntax: css=td.attributeValue.

Css locator for the Emai or phone text in facebook page is:

td.html7magic

Note: The Css locator for class locator will not work if the ending tag for an attribute is not available and also will not work if there is space in the text of value of and attribute.

3) id attribute: In Css selector Hash (#) represents the id attribute.The basic syntax for id attribute in Css is-> tagName#attributeValue

Css locator for the Emai or phone text in facebook page is using id is:

input#email

Functions used with Css Locator are below:

1) contains(): “ * ” symbol represents contains function in css locator.This function helps the css locator to locate the element having particular string available in any of attribute value defined.The syntax for contains function is tagName[attributeName*=’attributeValue’]

Css locator for the Emai text Box in facebook page using contains :

input[id*=’em’]

2) starts-with(): The symbol (^) represents starts-with in css locator. Suppose in a Web page we want to locate Email whose type attribute is not static, its dynamic, the start 3 text is always same but the next part is dynamic and changes every time the page gets refresh, so in this case with the help of static string we can locate the element in css locator using starts-with ().The syntax is tagName[attributeName^=’attributeValue’]

Css locator for the password text Box in facebook page starts-with :

input[type^=’pas’]

3) ends-with: The symbol ($) represents ends-with in css locator. Suppose in a Web page we want to locate password text box whose type attribute is not static, its dynamic, the last 3 text is always same but the first part is dynamic and changes every time the page gets refresh, so in this case with the help of static string we can locate the element in css locator using starts-with ().The syntax is tagName[attributeName$=’attributeValue’]

Css locator for the password text Box in facebook page starts-with :

input[type$=’word’]

Object identification for parent child hierarchy using Css locator:

parent immediate child: (>) represents parent immediate child relationship. In similar condition for xpath (/) is used to represent direct or immediate child for ex:

form#login_form>table>tbody>tr>td>label

Previous topic, In this tutorial we will learn select value from dropdown & multiple selection using selenium webdriver.

Dropdown List box in selenium Webdriver can be handled using Select class. Select class in selenium provided the provision to select and deselect the options from the listbox using three approaches they are: by index , by value and Visible Text, Lets discuss the different approached of selection of option from drop down list box one by on.

How to select value from dropdown using selenium webdriver?

To understand, it lets take a scenario:

1. Open the url “www.facebook.com“
2. Under Create my option enter First name
3. Enter email
4. Enter password
5. Under Birthday list box-> select date
6. Birthday list box-> select month
7. Birthday list box-> select year

  // Create object of chrome driver 
     WebDriver driver =  new ChromeDriver();
     Thread.sleep(3000);       
    driver.get("https://www.facebook.com/");


          Thread.sleep(3000);

          // Locate the element for first name and enter "Rahul" on text box
           driver.findElement(By.xpath("//input[@name='firstname']")).sendKeys("Rahul");

         // Locate the element for email and enter "[email protected]" on text box
           driver.findElement(By.xpath("//input[@name='reg_email__']")).sendKeys("[email protected]");

        // Locate the element for password and enter "Rahul123" on text box
           driver.findElement(By.xpath("//input[@name='reg_passwd__']")).sendKeys("Rahul123");

           // Locate the element for day list box         
           WebElement  date =driver.findElement(By.xpath("//select[@name='birthday_day']"));

           //Create the object for Select class and pass Webelement as parameter
           Select selectData=new Select(date);

           //Select 5 index from the date list box
           selectData.selectByIndex(5);

        // Locate the element for month list box    
           WebElement  month =driver.findElement(By.xpath("//select[@name='birthday_month']"));

         //Create the object for Select class and pass Webelement as parameter
           Select selectMonth =new Select(month);

         //Select 5 index from the month list box
           selectMonth.selectByIndex(5);


        // Locate the element for year list box 
           WebElement  Year =driver.findElement(By.xpath("//select[@name='birthday_year']"));

         //Create the object for Select class and pass Webelement as parameter
           Select selectYear =new Select(Year);

         //Select 5 index from the month list box
           selectYear.selectByIndex(5);

2) selectByValue: Another way of selecting the options from dropdown list box is by providing the value under option tag. refer screenshot for reference below.Value highlighted in yellow

The syntaxfor the selectByValue is:

Select value=new Select(date);         
value.selectByValue("String");

Code of the above scenario as given below:

//System property of the Chrome driver 
               System.setProperty("webdriver.chrome.driver","C:\Users\XXXX\Desktop\Eclipse_Installer\GeckoDriver\chromedriver.exe");        
 // Create oject of chrome driver 
          WebDriver driver =  new ChromeDriver();
          Thread.sleep(3000);

          driver.get("https://www.facebook.com/");

          driver.manage().window().maximize();
          Thread.sleep(3000);

          // Locate the element for first name and enter "Rahul" on text box
           driver.findElement(By.xpath("//input[@name='firstname']")).sendKeys("Rahul");

         // Locate the element for email and enter "[email protected]" on text box
           driver.findElement(By.xpath("//input[@name='reg_email__']")).sendKeys("[email protected]");

        // Locate the element for password and enter "Rahul123" on text box
           driver.findElement(By.xpath("//input[@name='reg_passwd__']")).sendKeys("Rahul123");

           // Locate the element for day list box         
           WebElement  date =driver.findElement(By.xpath("//select[@name='birthday_day']"));

           //Create the object for Select class and pass Webelement as parameter
           Select selectData=new Select(date);

           //Select 5 as value from the date list box           
           selectData.selectByValue("5");

        // Locate the element for month list box    
           WebElement  month =driver.findElement(By.xpath("//select[@name='birthday_month']"));

         //Create the object for Select class and pass Webelement as parameter
           Select selectMonth =new Select(month);

         //Select 5 as value from the month list box
           selectMonth.selectByValue("5");

        // Locate the element for year list box 
           WebElement  Year =driver.findElement(By.xpath("//select[@name='birthday_year']"));

         //Create the object for Select class and pass Webelement as parameter
           Select selectYear =new Select(Year);

         //Select 2015 as value from the month list box
           selectYear.selectByValue("2015");

3) selectByVisibleText: Last approach for selecting the options from dropdown list box is using the Text on the list box. By this approach we can directly select he option on entering the text as displayed in web application. Syntax is mentioned below:

 Select text=new Select(month);
 text.selectByVisibleText("String"); 

Code of the above scenario using selectByVisibleText as given below:

//System property of the Chrome driver 
               System.setProperty("webdriver.chrome.driver","C:\Users\XXXX\Desktop\Eclipse_Installer\GeckoDriver\chromedriver.exe");         

// Create object of chrome driver 
  WebDriver driver =  new ChromeDriver();
  Thread.sleep(3000);
driver.get("https://www.facebook.com/");
driver.manage().window().maximize();
Thread.sleep(3000);

 // Locate the element for first name and enter "Rahul" on text box
           driver.findElement(By.xpath("//input[@name='firstname']")).sendKeys("Rahul");

// Locate the element for email and enter "[email protected]" on text box
           driver.findElement(By.xpath("//input[@name='reg_email__']")).sendKeys("[email protected]");

 // Locate the element for password and enter "Rahul123" on text box
           driver.findElement(By.xpath("//input[@name='reg_passwd__']")).sendKeys("Rahul123");

           // Locate the element for day list box         
           WebElement  date =driver.findElement(By.xpath("//select[@name='birthday_day']"));

           //Create the object for Select class and pass Webelement as parameter
           Select selectData=new Select(date);

           //Select 5 as Text from the date list box            
           selectData.selectByVisibleText("5");

        // Locate the element for month list box    
           WebElement  month =driver.findElement(By.xpath("//select[@name='birthday_month']"));

//Create the object for Select class and pass Webelement as parameter
 Select selectMonth =new Select(month);

 //Select May as text from the month list box 
  selectMonth.selectByVisibleText("May");                   

 // Locate the element for year list box 
WebElement  Year =driver.findElement(By.xpath("//select[@name='birthday_year']"));
 //Create the object for Select class and pass Webelement as parameter
 Select selectYear =new Select(Year);
 //Select 2015 as text from the month list box
  selectYear.selectByVisibleText("2015");

This is the post for select value from dropdown and multiple value using selenium webdriver. if you have any query , feel free to comment

CheckBox and Radio button both are handled in same way, it is generally can be handled by finding the locator and directly clicking on the element on Web Page but most of time it happens that the checkbox is by default checked and we need to verify and uncheck it or may be conditional check box need to be handled same in case of Radio button.

Lets discuss one by one in details.

CheckBox: To handle a check box, first we find its locator using any of the technique as discussed in previous topic (by id, name, xpath , css etc ) and directly click to the that element. But if the checkbox is already checked then in case we need to check by our test case whether it is checked or not.

For this we have a mehod which is isSelcted() , it return a boolean and according to it we can make condition either to check or uncheck. Let go to the coding part to get it more clear.

public Boolean Flag =false; //Define this globally after the class at class level

//Take all the element of checkbox in list 
List checkBoxes = driver.findElements(By.xpath("//input[@name='firstname']"));  

// This line will check whether the first check box is checked or unchecked and will return boolean      
  Boolean  Flag = checkBoxes.get(0).isSelected();

// If the Boolean is true, it will check the second check box and come out of loop
          while(Flag){  
            driver.findElements(By.xpath("//input[@name='firstname']")).get(1).click();
     Flag=false;

            }  

Above code in eclipse will look like this at below in image

So the similar way we can handle the radio button on the web page.

When we talk about WebElements, we talk about source code or HTML documentation of a Web page. Web Elements in the user interface are the elements that are due to the HTML tag or syntax that are written in Dom structure.These tags have starting and ending tag.

So to interact with these webElements, first we need to take webElements as a return type from any of webdriver method. Take the return type from the findElements method as below:

WebElement driver= driver.findElement(By.name(“Email”));

1) click: This method is used to click to the element in web page and returns void(no return type).Command for click is below:

WebElement driver1= driver.findElement(By.name(“XXXXX”));
driver1.click();

2) clear: This method clears the value from the web element for ex: any text present in the text field gets cleared after evoke clear method. Command for clear is displayed below.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.clear();

3) getAttribute: This method gives the value of the attribute name passed as a parameter and return a string. Command for clear is displayed below.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.getAttribute(“name”); //This will return Email as a string

4) getCssValue: This method will return the string and provide the value of the css attribute value.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.getCssValue(“background-border”);

5) getSize: This method will give you the size of the element and return you the Dimension object.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.getSize();

6) getLocation: This method do not required any parameter and provided the x and y co-ordinated and return the object of Point.

WebElement driver1= driver.findElement(By.name(“Email”));
Point coOrdinates =driver1.getLocation();
coOrdinates.x;
coOrdinates.y;

7) getText: This method provide the text of the element and return the object as String.

WebElement driver1= driver.findElement(By.name(“Email”));
String coOrdinates =driver1.getText();

8) Submit: This method submits the the web page for its a form type image its works same as click.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.submit();

9) isDisplayed: This method helps in getting the presence of web element on web page.This method do not accept any parameter and returns a Boolean.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.isDisplayed();

10) isEnabled: This method helps to know whether the element is Enabled or not and return Boolean as an Object.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.isEnabled();

11) isSelected: This method helps to know whether the element in web page is selected or not . For example a check box is checked or not and return Boolean as Object.

WebElement driver1= driver.findElement(By.name(“Email”));
driver1.isSelected();