Reading list Switch to dark mode

    Performing Events in Selenium WebDriver

    Updated 4 July 2018

    In the previous post, we learnt how to locate elements in webpage using WebDriver. After locating an element, we obviously need/want to perform some activity/event on it. The event could be clicking the element, typing something (filling a form) or getting the content present under the element. Now let’s see some common events which we can use while writing a script in selenium WebDriver.

    1. Selecting/accessing an input element.
    2. Accessing a button.
    3. Accessing/operating drop-downs.

    Selecting/accessing an input element.

    Input elements are most commonly used elements in a form or a webpage (which takes some input from user). An input element can be of a text type or can be a password type (which shows ‘*’ while writing something on them). The text fields accept the entered value and show as it is (the way they are typed). In a password filed, they generally mask the typed value usually by dots or asterisks to avoid the sensitivity of the content.
    Consider the following example, we will select an input element and  will try to enter some value to it.

    In the above images, we have two elements. The first element takes email as its input type and the other takes password as its input type. Consider we want to enter values as email-‘[email protected]’ and password- ‘secret’. We can get the first element by it’s attribute id and second by it’s name (Different type of locators are explained here).

    Entering values to input element :

    To enter some values in an element, we use the method ‘sendKeys’.

    • driver.getElementBy.id(“email”).sendkeys(“[email protected]”);
    • driver.getElementBy.name(“password”).sendkeys(“secret”);

    Deleting values form input element :

    To enter some values in an element, we use the method ‘clear’.

    Start your headless eCommerce
    now.
    Find out More
    • driver.getElementBy.id(“email”).clear();
    • driver.getElementBy.name(“password”).clear();

    Lets see a simple code which  invokes the sendKeys method to enter text in the username and password element.

    package accessInputElements;
    import org.openqa.selenium.By;
    import org.openqa.selenium.Keys;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.testng.annotations.Test;
    public class AccessInputElements { 
     WebDriver driver; 
     @Test 
     public void accessInputElements() throws InterruptedException {
       chrome_path = System.getProperty("user.dir") + "/chromedriver";
       System.setProperty("webdriver.chrome.driver", chrome_path);
       driver = new ChromeDriver(); 
       driver.manage().window().maximize(); 
       driver.navigate().to("https://himanshu-shop.myshopify.com/admin");
       driver.findElement(By.id("Login")).clear(); //To clear the pre-filled content of element
       driver.findElement(By.id("Login")).sendKeys("[email protected]"); 
       driver.findElement(By.id("Password")).sendKeys("secret"); 
       driver.close(); 
     }
    }

    Accessing a button

    A button can majorly be divided in three types. A submit button, radio button and a check box. We can access a button and preform an event by simply clicking on it.
    Lets see how we can perform events on different types of button:

    A simple button:

    To access a button we can just look for the best element locator which refers the button. We can perform a click action using “click” method.

    • driver.getElementBy.name(“password”).click();

    Submit Button:

    <input type=”submit”> defines a button for submitting the form data to a form-handler. We can perform a submit auction to submit the form at any input which is under a particular form.

    • driver.getElementBy.name(“password”).submit();

    Note:

    <input type=”button” /> buttons will not submit a form – they don’t do anything by default. They’re generally used in conjunction with JavaScript as part of an AJAX application, so we need to click a these types of inputs.

    <input type=”submit”> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript. We can use “Enter” key-press on a form and submit the form automatically if there is a submit button

    Lets see a simple code which  invokes a click event to a button and a submit event :

    package accessInputElements;
    import org.openqa.selenium.By;
    import org.openqa.selenium.Keys;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.testng.annotations.Test;
    public class AccessInputElements { 
     WebDriver driver; 
     @Test 
     public void accessInputElements() throws InterruptedException {
       chrome_path = System.getProperty("user.dir") + "/chromedriver";
       System.setProperty("webdriver.chrome.driver", chrome_path);
       driver = new ChromeDriver(); 
       driver.manage().window().maximize(); 
       driver.navigate().to("https://himanshu-shop.myshopify.com/admin");
    // To clear the pre-filled content of element
       driver.findElement(By.id("Login")).clear(); 
       driver.findElement(By.id("Login")).sendKeys("[email protected]"); 
       driver.findElement(By.id("Password")).sendKeys("secret");
    // Here the button input type is 'submit' so we can submit the form using to methods
    // 1. By clicking the button 
       driver.findElement(By.id("LoginSubmit")).click();
    // 2. By using .submit to any input which exists under the form   
       driver.findElement(By.id("Password")).submit();
       driver.close(); 
     }
    }
    
    

    Radio Buttons and Check Box:

    Radio Buttons and check box too can be toggled on by using the click() method. But only toggling a checkbox/radio button is not a job, before it we need to first see if a check box is already checked or if the Radio Button is selected by default.

    Lets see a simple code which  selects a radio button and checks a checkbox:

     List  radioButtons = driver.findElements(By.name("radio_button"));
     boolean bSelected = false;
     bSelected = radioButtons.get(0).isSelected(); // check if first radio button is selected
     if(bSelected )
        radioButtons.get(1).click();        // if first radio button is selected, we select second button
     else
        radioButtons.get(0).click();        // if first radio button is not selected then we select it

     

    Accessing/operating drop-downs.

    Just like CheckBox & Radio Buttons, DropDown works almost the same way. Before we can control drop-down boxes, we must import a package ‘org.openqa.selenium.support.ui.Select’. Select is a class which is provided by Selenium to perform multiple operations on DropDown object and Multiple Select object. The object of Select class is created by a ‘new’ keyword.
    Select ddSelect = new Select();

    Once we have an object of select class, we can access all the methods which resides in the select class. Now lets see a simple code  to select a drop-down.

    @Test 
     public void accessDropDown() throws InterruptedException {
       chrome_path = System.getProperty("user.dir") + "/chromedriver";
       System.setProperty("webdriver.chrome.driver", chrome_path);
       driver = new ChromeDriver(); 
       driver.manage().window().maximize(); 
    // navigate top a url   
       driver.navigate().to("https://192.168.1.164/registration-form.html");  
    // creating an oblect of class Select
       SelectddSelect = new Select();
    // here we selectddSelect by it's visible text.
       ddSelect.selectByVisibleText("Friend");
    // closing browser
       driver.close(); 
     }

    We have many select methods which can be used to access a drop-down. Some of them are stated below:

    Method Description
    selectByVisibleText()
    deselectByVisibleText()
    Example:
    ddSelect.selectByVisibleText(“Friends”);
    Selects/deselects the option form dropdown that contains the exact matching text given in the parameter. (the parameter are case sensitive)
    <option>Friends</option>
    SelectByValue()
    deselectByValue()
    Example:
    ddSelect.selectByValue(“Friends”);
    Selects/deselects the option whose attribute matches the given parameter. It always looks of the value attribute and matches with that attribute value.
    <option value=”Friend”>Friend</option>
    <option value=”Advert”>Advert</option>
    selectByIndex()
    deselectByIndex()
    Example:
    ddSelect.selectByIndex(“Friends”);
    Selects/deselects the option at the given index(index is given as a parameter).
    isMultiple()
    Example:
    boolean ddMultiple=ddSelect.isMultiple();
    Returns TRUE if the drop-down element allows multiple selection and FALSE if not.

    Now, from here we would be able to perform operation to fill a form or to access a web page. For any doubts feel free to comment, suggestions/improvements are highly appreciated.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content