Different Approaches To Write Automation Commands In Selenium Webdriver

Different approaches to write automation commands in Selenium WebDriver

Selenium WebDriver support different approaches to write automation commands while writing automated test scripts. In this blog we will understand about the implementation of click(), sendKeys(), keyUp(), keyDown() and moveToElement() automation commands. Following are the approaches which help to implement above mentioned automation commands:

  1. Using Generic Selenium Commands
  2. Using Selenium Action Library (Selenium Interactions API)
  3. Using JavaScript

Approach 1: Using Generic Selenium Commands

A common approach used by most automation engineers is to use the generic selenium commands like click() and sendKeys() to perform their automation task. This is shown in the example below:

WebElement textbox = driver.findElement(By.name("q"));
textbox.sendKeys("selenium commands");
WebElement button = driver.findElement(By.name("btnG"));
button.click();

In the code snippet shown above, I used generic selenium commands to first fill the textbox with a text value using textbox.sendKeys("selenium commands") method and then clicked the button using the button.click() method.
You can expand the snippet shown above to perform a Google search as shown below in a complete Java example:

package com.xebia.blog.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class UsingGenericSeleniumCommands {

    public static void main(String args[]){

        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://google.com");

        WebElement textbox = driver.findElement(By.name("q"));
        textbox.sendKeys("selenium commands");
        WebElement button = driver.findElement(By.name("btnG"));
        button.click();

        driver.quit();
    }
}

In the Java example shown above, I used code WebDriver driver = new FirefoxDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://google.com") method to open the Google search page. After that WebElement textbox = driver.findElement(By.name("q")) code used to find textbox webelement on page and textbox.sendKeys("selenium commands") method to type text into textbox. In next steps WebElement button = driver.findElement(By.name("btnG")) code used to find button webelement on page and button.click() method to click on button. At last driver.quit() method to quit the Webdriver.

alt text

Approach 2: Using Selenium Action Library (Selenium Interactions API)

Selenium Interactions API (commonly knowns as Selenium Action Library) is a new and more comprehensive approach for describing automation commands to perform action on a web page. Using this approach multiple actions can be perform for a webelement within single command. We can perform actions like keyUp(), keyDown() and sendKeys() automation commands using this approach. This is shown in the example below:

WebElement textbox = driver.findElement(By.name("q"));
Actions act = new Actions(driver);
act.keyUp(Keys.SHIFT).sendKeys(textbox, "test input").keyDown(Keys.SHIFT)
                .build().perform();

In the code snippet shown above, I used selenium action library commands to fill the textbox with a text value in block letters using act.keyUp(Keys.SHIFT).sendKeys(textbox, "test input").keyDown(Keys.SHIFT).build().perform() code line.
You can expand the snippet shown above to perform a Google search as shown below in a complete Java example:

package com.xebia.blog.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class UsingSeleniumActionLibrary1 {

    public static void main(String args[]) {

        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://google.com");

        WebElement textbox = driver.findElement(By.name("q"));
        Actions act = new Actions(driver);
        act.keyUp(Keys.SHIFT).sendKeys(textbox, "Selenium Framework").keyDown(Keys.SHIFT)
                .build().perform();

        driver.quit();
    }
}

In the Java example shown above, I used code WebDriver driver = new FirefoxDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://google.com") method to open the Google search page. After that WebElement textbox = driver.findElement(By.name("q")) code used to find textbox webelement on page. In next steps Actions act = new Actions(driver) code used to initialize the action library and act.keyUp(Keys.SHIFT).sendKeys(textbox, "Selenium Framework").keyDown(Keys.SHIFT).build().perform() code line to type text in block letters into textbox where keyUp(Keys.SHIFT) method is for press the SHIFT key, sendKeys(textbox, "test input") method is for type a text in text input, keyDown(Keys.SHIFT) method is to release the SHIFT key, build() method is to build the all action library methods and perform() method is to perform the all action library methods. At last driver.quit() method to quit the webdriver.

build() and perform() methods are required to execute the automation command using this approach. Program output should be like below screenshot:

alt text

This is another example shown below for moveToElement() automation commands using Selenium Action Library:

WebElement menu = driver.findElement(By
                .xpath("//a[@data-tracking-id='electronics']"));
Actions act = new Actions(driver);
act.moveToElement(menu).build().perform();

In the code snippet shown above, I used selenium action library commands to perform mouseover using act.moveToElement(menu).build().perform() code line.
You can expand the snippet shown above for mouseover action on a menu item at Flipkart.com as shown below in a complete Java example:

package com.xebia.blog.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class UsingSeleniumActionLibrary2 {

    public static void main(String args[]) {

        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://flipkart.com");

        WebElement menu = driver.findElement(By
                .xpath("//a[@data-tracking-id='electronics']"));
        Actions act = new Actions(driver);
        act.moveToElement(menu).build().perform();

        driver.quit();
    }
}

In the Java example shown above, I used code WebDriver driver = new FirefoxDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://flipkart.com") method to open the Flipkart homepage. After that WebElement menu = driver.findElement(By.xpath("//a[@data-tracking-id='electronics']")) code used to find menu webelement on page. In next steps Actions act = new Actions(driver) code used to initialize the action library and act.moveToElement(menu).build().perform() code line to perform mouseover on menu where moveToElement(menu) method is for mouseover on menu, build() method is to build the all action library methods and perform() method is to perform the all action library methods. At last driver.quit() method to quit the webdriver.

As already explained above, build() and perform() methods are required to execute the automation command using this approach. Program output should be like below screenshot:

alt text

Approach 3: Using JavaScript

JavascriptExecutor executes JavaScript in the context of the currently selected frame or window.
In this approach we can write automation commands using JavaScript with help of JavascriptExecutor available in Selenium WebDriver. Using this approach DOM actions can be perform for a webelement. This is the example to change the value of a webelement shown below using JavascriptExecuter and JavaScript:

WebElement button = driver.findElement(By.name("btnK"));
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("arguments[0].value='Google Search Button';", button);

In the code snippet shown above, I used JavaScript code to change the value of a input using jsExecutor.executeScript("arguments[0].value='Google Search Button';", button) code line.
You can expand the snippet shown above at Google Search page as shown below in a complete Java example:

package com.xebia.blog.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class UsingJavaScript1 {

    public static void main(String args[]) {

        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://google.com");

        WebElement button = driver.findElement(By.name("btnK"));
        JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
        jsExecutor.executeScript("arguments[0].value='Google Search Button';", button);

        driver.quit();
    }
}

In the Java example shown above, I used code WebDriver driver = new FirefoxDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://google.com") method to open the Google search page. After that WebElement button = driver.findElement(By.name("btnK")) code used to find button webelement on page. In next steps JavascriptExecutor jsExecutor = (JavascriptExecutor) driver code used to initialize the JavascriptExecutor library and jsExecutor.executeScript("arguments[0].value='Google Search Button';", button) code line to change the value of input button where arguments[0].value='Google Search Button' is the JavaScript code executed using JavascriptExecutor. At last driver.quit() method to quit the webdriver.

alt text

Before program execution button should be display like below screenshot:

alt text

This is another example shown below to show the hidden webelement using JavascriptExecuter and JavaScript:

WebElement hidden = driver.findElement(By.name("Language"))
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("arguments[0].type='text';", hidden);

In the code snippet shown above, I used JavaScript code to show the hidden webelement using jsExecutor.executeScript("arguments[0].type='text';", hidden) code line.
You can expand the snippet shown above as shown below in a complete Java example:

package com.xebia.blog.automation;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class UsingJavaScript2 {

    public static void main(String args[]) {

        WebDriver driver = new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("http://www.echoecho.com/htmlforms07.htm");

        WebElement hidden = driver.findElement(By.name("Language"));
        JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
        jsExecutor.executeScript("arguments[0].type='text';", hidden);

        driver.quit();
    }
}

In the Java example shown above, I used code WebDriver driver = new FirefoxDriver() to initialize the Webdriver, driver.manage().window().maximize() method to maximize the browser window and driver.get("http://www.echoecho.com/htmlforms07.htm") method to open the webpage. After that WebElement hidden = driver.findElement(By.name("Language")); code used to find webelement on page. In next steps JavascriptExecutor jsExecutor = (JavascriptExecutor) driver code used to intialize the JavascriptExecutor library and jsExecutor.executeScript("arguments[0].type='text';", hidden) code line to show the hidden webelement where arguments[0].type='text' is the JavaScript code executed using JavascriptExecutor. At last driver.quit() method to quit the webdriver.

In the above program, value='string' is used to change the value of a button text using JavascriptExecuter and JavasScript code. Program output should be like below screenshot:

alt text

Before program execution page should be display like below screenshot:

alt text

Leave a Reply

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