Post#68.How to interact with Resizable Element in Selenium WebDriver

Resizable Element in Selenium WebDriver

Normally whenever we want to change the size of an element we do with the help of mouse manually. Now we will see to resize / change the size of an element using WebDriver actions class with moveByOffset which moves the mouse position from its current position by the given offset.

Scenario:
1. Launch https://jqueryui.com/resizable/
2. Resize jQuery resizable element by 250 pixels X, Y offset

Java Code:

package pack7;

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 Selectable {

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

  // TODO Auto-generated method stub

  System.setProperty("webdriver.gecko.driver", "D:\\BrowserDrivers\\geckodriver.exe");

  WebDriver driver = new FirefoxDriver();

 

  driver.get("https://jqueryui.com/slider/");

  driver.manage().window().maximize();

  driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@class='demo-frame']")));

//Locate resizable element's bottom-right corner.

  WebElement resizeElement = driver.findElement(By.xpath("//*[@id='resizable']/div[3]")); 

       

  //To resize jQuery resizable element by 250 pixel X,Y offset using dragAndDropBy method of Actions class.

  new Actions(driver).dragAndDropBy(resizeElement, 250, 250).build().perform();

  Thread.sleep(5000);

 

  //After 5 seconds, This will resize jQuery resizable element by -100 pixel X,Y offset using the combination of clickAndHold, moveByOffset and release methods of Actions class.

  new Actions(driver).clickAndHold(resizeElement).moveByOffset(-100,-100).release().perform();

 }   

}