Resizing a web element using movebyoffset

Normally when ever 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.

Below are the simple steps thats needs to be followed for the below example:-

Step 1: Open the URL
Step 2: Wait for the element that you want to resize. (Make sure if there are any frames then we need to shift to the frame and then perform operation).
Step 3: We will define a method using which we need to pass web element and the coordinates to the method.

We will now perform the below example on Jquery Website which has Resizable element.

package com.pack.jquery;

import org.openqa.selenium.By;
import org.openqa.selenium.NoSuchElementException;
import org.openqa.selenium.StaleElementReferenceException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.Test;

public class ResizeExample {
	WebDriver driver;

	@Test
	public void testToResizeElement() {

		driver = new FirefoxDriver();
		driver.manage().window().maximize();
		driver.navigate().to("http://jqueryui.com/resizable/");
		WebDriverWait wait = new WebDriverWait(driver, 5);
		wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector(".demo-frame")));
		WebElement resizeableElement = driver.findElement(By.cssSelector(".ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se"));
		resize(resizeableElement, 50, 50);
	}

	public void resize(WebElement elementToResize, int xOffset, int yOffset) {
		try {
			if (elementToResize.isDisplayed()) {
				Actions action = new Actions(driver);
				action.clickAndHold(elementToResize).moveByOffset(xOffset, yOffset).release().build().perform();
			} else {
				System.out.println("Element was not displayed to drag");
			}
		} catch (StaleElementReferenceException e) {
			System.out.println("Element with " + elementToResize + "is not attached to the page document "	+ e.getStackTrace());
		} catch (NoSuchElementException e) {
			System.out.println("Element " + elementToResize + " was not found in DOM " + e.getStackTrace());
		} catch (Exception e) {
			System.out.println("Unable to resize" + elementToResize + " - "	+ e.getStackTrace());
		}
	}

}

Hope the above example helped you. Please feel free to share the article.

Selenium Tutorials: 

Comments

This code is not working in the same site.

Thank you for comment.

There was a locator change which was not working. Now the locator is updated.

Earlier it was

WebElement resizeableElement = driver.findElement(By.cssSelector(".ui-resizable-handle.ui-resizable-se"));

Now updated to :
WebElement resizeableElement = driver.findElement((.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se"));

We have verified it and updated.

Thank You.

What is difference between WebDriverWait and Thread.Sleep() ??

Add new comment

Image CAPTCHA