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.


    Tuesday, October 9, 2018

    First WebDriver Script on Chrome browser : Selenium WebDriver tutorial

    Hi guys, In this post, I am going to discuss how to execute first selenium script in Chrome browser.


     Pre-requisite - 

    • Make sure you have already installed Eclipse IDE.
    • Make sure you have already configured WebDriver-jar file with your java project.
    • Make sure you have downloaded the latest version of WebDriver-jar file. Otherwise, you will get a compiler error.
    • Make sure you have downloaded the driver for Chrome. I will show you below how to do it. 
    Note - If you don't know how to configureWebDriver-jar with your java project, then refer the link Configure WebDriver jar files with Java Project





    How to run Selenium WebDriver script in Chrome browser




    1. Open Eclipse.

    2. Create one Java Project for example SeleniumTutorial.






    3.  Right click on SeleniumTutorial and navigate as shown below - 






    4. Create one package lets say com.selenium and click on Finish.
    5. In the same way, right click on com.selenium and create one class for example SeleniumTutorial.







    6.  Finally, your class will be created and will be shown as - 











    How to download ChromeDriver?

    • Refer the link - Download Chrome Driver
    • Download the latest version zip file based on 32-bit or 64-bit supported by your PC and also based on your OS. 





    • I am using window 64 bit. Open the downloaded file and extract it. It will look like - 





    • Open the extracted folder and copy the path of the file. We are going to use it in our program.














    Now, we will start writing script - 

    1. Under the main section, write - 

    System.setProperty("webdriver.chrome.driver", "F:\software\chromedriver_win32");

    System.setProperty has two parameters -

    • First parameter - We pass the name of the driver.
    • Second parameter - We pass the path of the extracted jar file. 







    Note - If you notice you are getting an error. The reason is that Eclipse IDE does not understand single '\'. So, we have to provide '\\' and append the provided path with the file name with .exe extension as shown below -





    Note - Now, you won't get any error.

    2. Next, Write below statement -

    WebDriver driver = new ChromeDriver();

    Here, 'driver' is the reference variable of WebDriver Interface. An object of ChromeDriver class has been created. 'driver' reference is referring to the ChromeDriver object. Chromium provides 'ChromeDriver' to control Chrome browser while automating. Since the reference to the object of ChromeDriver is assigned to 'driver', now 'driver' has control over the Chrome browser.



    Note - You will get two errors. We have used an Interface and a Class and as discussed above, an Interface and Class implementations reside in a particular package, we need to import those respective packages. If you hover over where the errors are showing, you will be suggested with some actions to perform. what you need to do is to import below two packages -

    • org.openqa.selenium.WebDriver;
    • org.openqa.selenium.chrome.ChromeDriver;

    3. We will open the Google homepage.

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

    Note:- get() - command is used to open a specific URL in the opened browser.

    4. Now, we will close the browser.

     - driver.quit();


    Complete Code -

      package com.selenium;   
      import org.openqa.selenium.WebDriver;   
      import org.openqa.selenium.chrome.ChromeDriver;   
      public class SeleniumTutorial {   
       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.google.com/");   
        driver.quite();   
       }   
      }   
    



    That all guys!!! 


    In my next post, I will discuss how to create selenium script to execute in IE.



    Do comment in the comment box and share your views about the post. If you have any query, please comment on it. It will help me to reach to you and help you to resolve your query.











    Thursday, October 4, 2018

    First WebDriver Script on Firefox browser : Selenium WebDriver tutorial

    Hi guys, In this post, I am going to discuss how to execute first selenium script in Firefox.


    first selenium script in firefox


     Pre-requisite

    • Make sure you have already installed Eclipse IDE.
    • Make sure you have already configured WebDriver-jar file with your java project.
    • Make sure you have downloaded the latest version of WebDriver-jar file. Otherwise, you will get a compiler error.
    • Make sure you have downloaded the driver for Firefox. I will show you below how to do it.

    Note - If you don't know how to configureWebDriver-jar with your java project, then refer this link -  ConfigureWebDriver-jar with your java project


    Package?

    It is a collection of classes, sub-packages, and Interfaces
    Suppose, you have declared a package called com.facebook and under this, you created one class called Facebook, where you have defined one method login() to login to Facebook. Now, you have created one more package called com.test under whichyou created one class called TestApplication. Now you want to write one method that will click on the 'Home' tab of the Facebook application. Definitely, you have to log in first then only you can go to the 'Home' tab and click on it. So, what you can do you can just import com.facebook package and create one object of the Facebook class and with the help of this object, you can simply call the method login(). Once you logged in,  you can reach to 'Home' tab and click on it. 

    This is what you will do most of the time while creating Selenium script. We will import packages which contain some specific classes to use their methods in the script.

    How to run Selenium WebDriver script in Firefox browser


    Point to note - 

    • If your browser version is 47+, then you have to download 'gecko driver'. If it is below 47,  then no need to download.
    Version above 47  
    1. Open Eclipse.
    2. Create one Java Project for example SeleniumTutorial.

    3. Right click on SeleniumTutorial and navigate as shown below - 



    4. Give package name for example com.selenium and click on Finish.
    5. In the same way, right click on com.selenium and create one class for example SeleniumTutorial.



    6. Finally, your class will be created and will be shown as - 



    How to download geckoDriver?


     Refer this link download gecko driver
    • Download the latest version zip file based on 32-bit or 64-bit supported by your PC and also based on your OS. 



    • I am using window 64 bit. Open the downloaded file and extract it. It will look like


    • Open the extracted folder and copy the path of the file. We are going to use it in our program.

    Now, we will start writing script


    1. Under the main() function write  -
     -  System.setProperty("webdriver.gecko.driver", "F:\software\firefox\geckodriver-v0.21.0-win64");

    System.setProperty has two parameters -

    • First parameter - We pass the name of the driver.
    • Second parameter - We pass the path of the extracted jar file. 




    Note - If you notice you are getting an error. The reason is that Eclipse IDE does not understand single '\'. So, we have to provide '\\' and append the provided path with the file name with .exe extension as shown below -




    Now, you won't get any error.


    2.  Next, Write below statement -

    - WebDriver driver = new FirefoxDriver();

    Here, 'driver' is the reference variable of WebDriver Interface. An object of FirefoxDriver class has been created and reference to the object is assigned to 'driver'. Mozilla provides 'GeckoDriver' to control Firefox browser while automating. Since the reference to the object of FirefoxDriver is assigned to 'driver', now 'driver' has the control over the Firefox browser.

    Note - You will get two errors. We have used an Interface and a Class and as discussed above, an Interface and Class implementations reside in a particular package, we need to import those respective packages. If you hover over where the errors are showing, you will be suggested with some actions to perform. what you need to do is to import below two packages -

    • org.openqa.selenium.WebDriver;
    • org.openqa.selenium.ChromeDriver;

    3. We will open the Google homepage.
    -  driver.get("https://www.google.com");

    Note:- get() - command is used to open a specific URL in the opened browser.


    4. Now, we will close the browser.
    driver.quit();


    Complete Code -
     package com.selenium;  
     import org.openqa.selenium.WebDriver;  
     import org.openqa.selenium.firefox.FirefoxDriver;  
     public class SeleniumTutorial {  
      public static void main(String args[])  
      {  
      System.setProperty("webdriver.gecko.driver", "F:\\software\\firefox\\geckodriver-v0.21.0-win64\\geckodriver.exe");  
      WebDriver driver = new FirefoxDriver();  
      driver.get("https://www.google.com/");  
      driver.quit();  
      }  
     }  
    


    Version below 47


    You don't need to download and set the path of GeckoDriver in your program. Simply remove System.setProperty() from the above program and execute it. It will run.

    That all guys!!! 

    In my next post, I will discuss how to create selenium script to execute in chrome.


    Do comment in the comment box and share your views about the post. If you have any query, please comment on it. It will help me to reach to you and help you to resolve your query.