Showing posts with label how to inspect element on the webpage. Show all posts
Showing posts with label how to inspect element on the webpage. Show all posts

Friday, October 19, 2018

How to Access Forms in WebDriver : Access Form, Checkbox, Radio button, Text Box, Password Field & Dropdowns

In this tutorial, I am going to discuss -

  • How to find web-elements on the webpage.
  • Commands available in Selenium to find web-elements.
  • Locators used to locate web-elements.
  • How to access different fields of Forms - text fields, password fields, checkboxes, dropdowns, radio buttons, buttons etc.
  • "sendKeys()" command.





Locator

A locator is one of the attributes or a property-value pair of web-elements on the webpage. It is used to identify the web-elements on the webpage or we can say it provides the location of web-elements on the webpage.



Note -  Open 'Google' page, right click on the page and select "Inspect Element" option. Now click on 'arrow' icon as shown in the image and hover on "Google Search" button. We can able to see all the locators for the button as shown in the image.

"input" is the tag name. "value", "name", "type" all are "Locators".

Below are some frequently used locators in Selenium scripts - 





  • classname.
  • class.
  • id.
  • linkText.
  • partialLinkText.
  • tagName.
  • XPath.
  • css.


  • findElement() and findElements() commands


    Above two commands are used to find web-elements on the webpage. They take "locators" as their parameters to find web-elements.
    • findElement() - It is used to find single web-element on the webpage. It returns a WebElement class object.
    • findElements() - It is used to find multiple web-elements on the webpage. It returns a list of WebElement class objects.

    WebElement Class -

    WebElement is a Class in Selenium WebDriver. It allows us to create a reference(of WebElement Class) that can be used to refer web-elements on the webpage.

     WebElement element = driver.findElement(By.id("email"));   
    

    Note - In order to use WebElement class, we have to import one package -

    import org.openqa.selenium.WebElement;

    Explanation - 
    • By is a class(provided in SeleniumWebDriver) which has some static methods that are actually used as locators(discussed above). Here, we used "id" as the locator.
    Note - In order to use By class, we have to import -

     import org.openqa.selenium.By;  
    

    • findElement() command returns WebElement class object, which is assigned to the "element" reference variable of WebElement class.
    • The locator is a "property-value" pair - Here "id" is the property and "email" is the value.


    Forms

    Forms contain several GUI web-elements like - Text fields, Password fields, Checkboxes, Radio buttons, dropdowns, buttons etc.

    Below we will see how to access forms' web-elements -

    1. Input field -  It is the field(web-element) that asks the user to input some text, for example - "username" field.

                                                

    Note - Facebook's Login Page has one text field - "Email or Phone".

    How to access?
    • First, identify the field on the webpage.
    • Then we can enter some text.
    Code

     WebElement username = driver.findElement(By.id("email"));//Identified the username field.   
     username.sendKeys("xyz@gmail.com");//Entered text in the field.   
    

    Explanation
    • "username" is the web-element refers to the "Email or Phone" text field.
    • sendKeys(String value) - This command is generally used to enter text in the input box. Here we used to enter the username.


    2. Password field -  It is the field(web-element) that asks the user to input password, for example - "password" field.



    Note - Facebook's Login Page has one password field - "Password".

    How to access?
    • First, identify the field on the webpage.
    • Then we can enter the password.
    Code

     WebElement password= driver.findElement(By.id("pass"));//Identified the password field.   
     password.sendKeys("********");//Entered password in the field.  
    

    Explanation 
    • "password" is the web-element refers to the "Password" text field.
    • sendKeys(String value) - Here we used to enter the password.

    3. Buttons -  It is the clickable field(web-element) that allows the user to perform certain actions, for example -

    • "Login" button is used to login to the application.
    • "Submit" button is used to submit the form.



    Note - Facebook's Login Page has one button field - "Log In".

    How to access?
    • First, identify the field on the webpage.
    • Then we can click on it.
    Code

     WebElement button= driver.findElement(By.id("u_0_2"));//Identified the Login button.   
     button.click();//clicked on it.   
    

    Explanation 
    • "button" is the web-element refers to the "Log In" button field.
    • click() - It is used to click on any web-element.

    4. Checkboxes -  It is the field(web-element) that allows the user to make choices from the available options on the webpage. We can check or uncheck the checkbox field.



    How to access?
    • First, identify the field on the webpage.
    • Then we can check or uncheck by clicking on it.
    Code

     WebElement checkoption= driver.findElement(By.id("myCheck"));//Identified the checkbox field.   
     checkoption.click();//clicked on it.   
    

    Explanation 
    • "checkoption" is the web-element refers to the "Checkbox" button field.
    • click() - It is used to check or uncheck the checkbox.


    5. Radio buttons-  It is the field(web-element) that allows the user to choose only one option from the available options on the webpage. We can select one option. However, to unselect it, we have to select other available options.




    How to access?
    • First, identify the field on the webpage.
    • Then we can select or unselect it.
    Code

     WebElement radio_female= driver.findElement(By.id("u_0_9"));//Identified the female radio field.    
      radio_female.click();//selected it.      
     WebElement radio_male= driver.findElement(By.id("u_0_a"));//Identified the male radio field.   
     radio_male.click();//selected male radio field as well as un-selected female radio field.  
    

    Explanation 
    • "radio_female" and "radio_male" are the web-elements refer to the "Female" and "Male" radio fields.
    • click() - It is used to select or unselect them.

    6. Dropdowns-  It is a list of options(web-element) that appear when clicking on a "button" or "text selection". It allows the user to choose one option from the available options in the list.




    Selenium WebDriver provides "Select" class to handle dropdowns.
    To use the Select class, we need to import a package provided by Selenium WebDriver -

    import org.openqa.selenium.support.ui.Select;  
    


    Select Class  -

    The select class has several methods to select or de-select dropdown's values -

    • selectByVisibleText("parameter")
    • deselectByVisibleText("parameter")
    • selectByIndex(index)
    • deselectByIndex(index)
    • selectByValue("value")
    • delectByValue("value")
    • The select class provides one method to check whether drop-down allows a user to select multiple values - isMultiple() - returns true if dropdown allows multiple selection, otherwise false.
    • To deselect multiple selected values - deselectAll()

    Note - 
    1. parameter - represents the value of dropdown.
    2. index - represents the index of the dropdown's value. It starts with 0, i.e., the index of the first value of dropdown is zero.
    3. value - represents the value of "value" property.

    How to access?
    • First, identify the dropdown field on the webpage.
    • Then we can select or unselect values from it.


    Code - 

    • selectByVisibleText() - 

     WebElement daytext = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.   
     Select select = new Select(daytext);//instantiating the dropdown elements as Select class object.   
      select.selectByVisibleText("10");//selecting value from dropdown.  
    

    Explanation 
    • "day" is the drop-down element having day values from (1-30/31).
    • "select" is the object of the Select class that refers to "day" dropdown's values. 
    • We are selecting "10" as the text parameter.


    • selectByIndex() - 
     WebElement dayIndex = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.   
     Select select = new Select(dayIndex);//instantiating the dropdown elements as Select class object.   
     select.selectByIndex(11);//selecting value from dropdown.  
    

    Explanation 
    • "day" is the drop-down element having day values from (1-30/31).
    • "select" is the object of the Select class that refers to "day" dropdown's values. 
    • We are selecting "11" as the index value. It will select "11" as the date in the drop-down.



    • selectByValue() - 

    Note - Here, I inspected "day" drop-down using developer tool. In the image you can see options available for the dropdown. You can see "value" property and its value  beside <option> tag. In the below code, we will use this value.

     WebElement dayValue = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.  
     Select select = new Select(dayValue);//instantiating the dropdown elements as Select class object.  
     select.selectByValue("11");;//selecting value from dropdown  
    

    Explanation 
    • "day" is the drop-down element having day values from (1-30/31).
    • "select" is the object of the Select class that refers to "day" dropdown's values. 
    • We are selecting "11" as the valueIt will select "11" as the date in the drop-down.

    Point to note :
    1. All the above mentioned deselect() methods can be used only when drop-down allows multiple selections. That means, we can deselect dropdown values only when dropdown allows the user to select multiple values.
    2. isMultiple() returns boolean.True means multiple selections allowed. False means not allowed.

     boolean status = select.isMultiple();//verifying dropdown allows multiple selection  
     System.out.println(status);//prints the status on the eclipse console  
    

    Complete Code -

     package com.sessions;  
     import org.openqa.selenium.By;  
     import org.openqa.selenium.WebDriver;  
     import org.openqa.selenium.WebElement;  
     import org.openqa.selenium.chrome.ChromeDriver;  
     import org.openqa.selenium.support.ui.Select;  
     public class SeleniumChrome {  
          public static Select select;//Making scope of select as global. Since we will use it at three different places for dropdowns below.  
          public static void main(String[] args) {  
               System.setProperty("webdriver.chrome.driver", "F:\\software\\chromedriver_win32\\chromedriver.exe");  
               WebDriver driver = new ChromeDriver();  
               driver.get("https://www.facebook.com");//launch facebook application.  
               driver.manage().window().maximize();//maximizing browser.  
               //InputTextField  
               WebElement username = driver.findElement(By.id("email"));//Identified the username field.   
               username.sendKeys("xyz@gmail.com");//Entered text in the field.   
               //PasswordField   
               WebElement password= driver.findElement(By.id("pass"));//Identified the password field.   
               password.sendKeys("********");//Entered password in the field.  
               //RadioButtons  
                WebElement radio_female= driver.findElement(By.id("u_0_9"));//Identified the female radio field.    
                radio_female.click();//selected it.      
                WebElement radio_male= driver.findElement(By.id("u_0_a"));//Identified the male radio field.   
                radio_male.click();//selected male radio field as well as un-selected female radio field.  
                //Dropdown - selectByVisibleText()  
                WebElement daytext = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.   
                select = new Select(daytext);//instantiating the dropdown elements as Select class object.   
                select.selectByVisibleText("10");//selecting value from dropdown.  
                //Dropdown - selectByIndex()  
                WebElement dayIndex = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.   
                select = new Select(dayIndex);//instantiating the dropdown elements as Select class object.   
                select.selectByIndex(11);//selecting value from dropdown.  
               //Dropdown - SelectBYValue()   
               WebElement dayValue = driver.findElement(By.id("day"));//identifing the 'day' dropdown available on facebook login page.  
               select = new Select(dayValue);//instantiating the dropdown elements as Select class object.  
               select.selectByValue("11");;//selecting value from dropdown  
               boolean status = select.isMultiple();//verifying dropdown allows multiple selection  
               System.out.println(status);//prints the status on the eclipse console  
               //Buttons  
               WebElement button= driver.findElement(By.id("u_0_2"));//Identified the Login button.   
               button.click();//clicked on it.   
          }  
     }  
    

    Note - Inspect the locator value of Login button of Facebook Login page. It keeps on changing frequently. Otherwise above code for buttons will fail. Inspect it and put the correct locator's value.




    This is all about locators, WebElement class, Different web element of Forms, Sendkeys, Select class.

    Share your views, how it helped you. Feel free to comment on your doubts. I will try to provide the best possible answer.