In this blog we will be utilizing Playwright Java to handle double click, drag and drop.
Topics that we will cover:
- Handle double click
- Handle drag and drop
- Source code (double click)
- Source code (drag and drop)
Handle ‘double click’
To understand double click, go to https://api.jquery.com/dblclick/

As can be seen above, there is a blue color block that we can double click.
When we double click, the color changes to yellow

When we double click again, the color changes back to blue

Let us see how to automate this event.
Let us inspect the block and copy the xpath

So we can locate this block using below xpath:

The next action is to double click this box.
The below code snippet will do the needful

The color changes to yellow (due to first double click)

Handle ‘drag and drop’
Let us now navigate to https://jqueryui.com/resources/demos/droppable/default.html

Let us see how to automate this event.
The small box that needs to be dragged has a horizontal x-axis and vertical y-axis.
Let us inspect this box that we need to drag and copy the css selector

So we can write

The next action is to move mouse to middle of the smaller box so that we can drag it

The below code snippet will move mouse to the middle of drop box

We will than fire an event to move the mouse down

So logic will be

Execute.
Notice below the drag and drop operation is success

This is how we can handle double click and drag/drop events using playwright java.
Source code (double click)
package com.rsa.playwrightjava;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class Blog30_DblClick_PWJava {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://api.jquery.com/dblclick/");
//dbl click to change color from blue to yellow
page.frameLocator("//iframe").locator("//html/body/div").dblclick();
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//dbl click to change color from yellow to blue
page.frameLocator("//iframe").locator("//html/body/div").dblclick();
page.pause();
}
}
Source code (drag and drop)
package com.rsa.playwrightjava;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class Blog30_DragDrop_PWJava {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
page.navigate("https://jqueryui.com/resources/demos/droppable/default.html");
Locator draggable = page.locator("#draggable");
Locator droppable = page.locator("#droppable");
page.mouse().move(draggable.boundingBox().x + draggable.boundingBox().width/2, draggable.boundingBox().y + draggable.boundingBox().height/2);
page.mouse().down();
page.mouse().move(droppable.boundingBox().x+ droppable.boundingBox().width/2, droppable.boundingBox().y + droppable.boundingBox().height/2);
page.mouse().up();
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
page.pause();
//page.close();
//playwright.close();
}
}
Thanks.