i
Search icon

Selenium Step By Step Guide

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

Handling JQuery Elements - Drag and Drop, Sliders, Resizable – Code

Drag and Drop:

Let us see the sample codes for Drag and Drop of a JQuery element below:

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/");

// Find the locator for the drag element

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

// Find the locator for the drop element

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

//Instantiate the Actions class to build the actions of drag and drop.

        Actions action=new Actions(driver);

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

 

    } 

}

Handling Slider operation Code:

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");

// Switch to the iframe where slider element is located

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

//Get the locator for the Slider element

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

// Get the locator for the target range element

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

// Instantiate the Actions class to build the action

       Actions action=new Actions(driver);

// Build the actions of sliding the element    

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

    } 

}

Handling 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]"));

// Instantiate the Actions class to build all the actions.

       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