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.


Tags


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}