Time for action – moving an element with a drag-and-drop by offset - Selenium

There are times where we need to only move an image by a certain amount. A good example of this would be if you are working in a WYSIWYG editor and you wanted to just move an image to somewhere else but did not want to drop it on another element, you will be using dragAndDropBy(WebElement, x, y);.

Let us see this in action.

1. Open up inteliij and create a new Selenium WebDriver project.

2. Create a new class and a new test with the following code:

   WebDriver driver = new FirefoxDriver(); driver.get("http://www.wisdomjobs.com/demo2.html"); WebElement drag = driver.findElement(By.className("draggable")); Actions builder = new Actions(driver); Action dragAndDrop = builder.dragAndDropBy(drag, 10, 20) .build(); dragAndDrop.perform();

3. Run the test. You should see the following:

What just happened?

We have just seen how easy it is to do a drag-and-drop on the page by moving an item by an offset. You will have to pass in the element that you want to move and then the x and y offset that you want to move it by.

Doing a context click

If you are testing a highly rich application, like a WYSIWYG editor or an e-mail client, you will more than likely need to do a context click or right-click to get other menu items.This may seem like a simple task as a user but doing this within a browser and doing it programmatically has been a difficult task for some time. The interactions API allows us to do this and do it in a meaningful way.

We will now see it in action.