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.