i
Search icon

Selenium Step By Step Guide

Self Learning   /   Study Material   /   Handling JQuery Elements - Drag and Drop, Sliders, Resizable
Previous
Next

Handling JQuery Elements - Drag and Drop, Sliders, Resizable

Drag and Drop?

We get scenarios in web pages where we need to drag and drop an item from one element to another element. This situation can be handled in Selenium easily by using the Actions class in Selenium. We need to import the “org.openqa.selenium.interactions.Actions” package to use the Actions class in our Selenium test suite.

We do not have a web page example to describe this situation right now, so I am illustrating this by using the below example:

So, we need to drag the Task3 from In-progress state and drop it to Completed state as shown above. We need to get the WebElement for “Task1” as drag element and Drop2 as drop element.

Let us see the complete sample code to handle this situation:

package SeleniumTest.SeleniumTest;

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.chrome.ChromeOptions;

import org.openqa.selenium.interactions.Actions;

import org.openqa.selenium.remote.DesiredCapabilities;

public class DragAndDrop

{

    public static void main( String[] args )

    {

        System.setProperty("webdriver.chrome.driver",driverPath);

        ChromeOptions options=new ChromeOptions();

        options.addArguments("start-maximized");

        DesiredCapabilities dc=new DesiredCapabilities();

        dc.setCapability(ChromeOptions.CAPABILITY, options);

        WebDriver driver=new ChromeDriver(dc);

        driver.get("https://selflearning.io/");

        WebElement ele1=driver.findElement(By.id("drag"));

        WebElement ele2=driver.findElement(By.id("drop"));

        Actions action=new Actions(driver);

        action.dragAndDrop(ele1, ele2).build().perform();

 

    } 

}

Sliders:

Sliders are very common in the Real state, E-commerce web sites, financial consulting apps, and web pages, where they usually show a slider bar to represent the amount of investment, a loan, or several years ranges. This feature can also be automated using a different way. So basically these types of sliders are most commonly seen in below types of web pages:

  1. Real state property web pages for Price filters.
  2. E-commerce web sites for price, brand, product, and other filters.
  3. Financial loan and insurance web sites for interest and loan amount filters.

We can automate the slider by using the Actions class in Selenium. Let us see step by step how we need to perform slider operation using selenium script:

  1. Get the element of the slider.
  2. Get the target element: Last value in the slider.
  3. Instantiate the Actions class to build the actions.

Once we have identified our steps, we can now start writing some sample code to achieve the targets.

Get the element of the slider:

package SeleniumTest.SeleniumTest;

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.chrome.ChromeOptions;

import org.openqa.selenium.interactions.Actions;

import org.openqa.selenium.remote.DesiredCapabilities;

public class SliderSelenium

{

    public static void main( String[] args )

    {

        System.setProperty("webdriver.chrome.driver",driverPath);

        ChromeOptions options=new ChromeOptions();

        options.addArguments("start-maximized");

        DesiredCapabilities dc=new DesiredCapabilities();

        dc.setCapability(ChromeOptions.CAPABILITY, options);

        WebDriver driver=new ChromeDriver(dc);

        driver.get("https://www.syncfusion.com/javascript-ui-controls/js-range-slider");

        driver.switchTo().frame(driver.findElement(By.xpath("//*[@id='control-content']/div[1]/iframe")));

        WebElement sliderElement=driver.findElement(By.xpath("//*[@id='default']/div[2]"));

        WebElement targetElement=driver.findElement(By.xpath("//*[@id='default']/ul/li[21]/span"));

       Actions action=new Actions(driver);

       action.moveToElement(sliderElement).dragAndDrop(sliderElement,targetElement).build().perform();

      

      

    } 

}

 

Resizable:

We see some web pages have JQuery resizable elements and user needs to perform resize operation on such elements using Selenium. Let us figure out the steps to handle this situation using Selenium WebDriver.

  1. Get the locator for the corner of the resizable element.
  2. Now use the selenium Actions class method dragAndDropBy(WebElement element, x-offset, y-offset) to move the element into the x and y offsets.
  3. Alternatively, we can also resize this element by using the clickAndHold(WebElement element) method by moving the corner element to another element by using the moveByOffset() method.

Let us see the sample code to resize the JQuery resizable element:

package SeleniumTest.SeleniumTest;

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.chrome.ChromeOptions;

import org.openqa.selenium.interactions.Actions;

import org.openqa.selenium.remote.DesiredCapabilities;

public class ResizableElement

{

    public static void main( String[] args ) throws InterruptedException

    {

        System.setProperty("webdriver.chrome.driver",driverPath);

        ChromeOptions options=new ChromeOptions();

        options.addArguments("start-maximized");

        DesiredCapabilities dc=new DesiredCapabilities();

        dc.setCapability(ChromeOptions.CAPABILITY, options);

        WebDriver driver=new ChromeDriver(dc);

        driver.get("https://selflearning.io/");

        // This is the locator of corner of the resizable element

        WebElement resizableElement=driver.findElement(By.xpath("//*[@id='default']/div[2]"));

       Actions action=new Actions(driver);

       action.dragAndDropBy(resizableElement,250,250).build().perform();

       //Again we can resize th element by alternate method

       action.clickAndHold(resizableElement).moveByOffset(-90, -90).build().perform();

    } 

}

© All rights Reserved | SelfLearning.io