Monday 13 March 2023

Playwright : drag and drop example

'page.dragAndDrop()' method drags the source element to the target element.

 

Signature

dragAndDrop(String source, String target)
dragAndDrop(String source, String target, DragAndDropOptions options)

 

'dragAndDrop' method first move to the source element, perform a mousedown, then move to the target element and perform a mouseup.

 

Find the below working application.

 

dragAndDrop.html

 

<!DOCTYPE HTML>
<html>

<head>
	<style>
		.square {
			height: 100px;
			width: 100px;
			background-color: #555;
		}

		.circle {
			height: 50px;
			width: 50px;
			background-color: #f00;
			border-radius: 50%;
		}
	</style>

	<script>
		function allowDrop(event) {
			event.preventDefault();
		}

		function dragObject(event) {
			event.dataTransfer.setData("text", event.target.id);
		}

		function dropObject(event) {
			event.preventDefault();
			var data = event.dataTransfer.getData("text");
			event.target.appendChild(document.getElementById(data));
		}
	</script>

</head>

<body>

	<div id="square" class="square" draggable="true" ondrop="dropObject(event)" ondragover="allowDrop(event)"></div>
	<br />
	<div id="circle" class="circle" draggable="true" ondragstart="dragObject(event)" width="336" height="69"></div>

</body>

</html>

 

FileUtil.java

package com.sample.app.util;

import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;

public class FileUtil {
	
	public static String resourceAsString(String resourceName) throws IOException {
		ClassLoader classLoader = FileUtil.class.getClassLoader();
		URL url = classLoader.getResource(resourceName);
		if (url == null) {
			return null;
		}

		URLConnection urlConnection = url.openConnection();

		urlConnection.setUseCaches(false);

		try (InputStreamReader inputStreamReader = new InputStreamReader(urlConnection.getInputStream())) {
			char[] buffer = new char[1048];
			StringBuilder builder = new StringBuilder();

			int count = -1;
			while ((count = inputStreamReader.read(buffer, 0, buffer.length)) != -1) {
				builder.append(buffer, 0, count);
			}

			return builder.toString();
		}

	}
}

 

DragAndDrop.java

package com.sample.app.miscellaneous;

import java.io.File;
import java.io.IOException;
import java.nio.file.Paths;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.sample.app.util.FileUtil;

public class DragAndDrop {

	public static void main(String[] args) throws IOException {

		try (Playwright playwright = Playwright.create()) {
			Browser browser = playwright.chromium()
					.launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(100));
			final String content = FileUtil.resourceAsString("miscellaneous" + File.separator + "dragAndDrop.html");

			Page page = browser.newPage();
			page.setContent(content);

			String filePath = "/Users/Shared/playwright/before.png";
			page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(filePath)));

			page.dragAndDrop("#circle", "#square");

			filePath = "/Users/Shared/playwright/after.png";
			page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get(filePath)));
		}

	}

}

 

Run the above program, you will see two files before.png and after.png.

 

before.png

 

 


after.png

 



 

 

Previous                                                 Next                                                 Home

No comments:

Post a Comment