Using below methods, we can achieve drag and drop functionality.
a. Locator.hover(),
b. Mouse.down(),
c. Mouse.move() and
d. Mouse.up().
Example
page.locator("#circle").hover();
page.mouse().down();
page.locator("#square").hover();
page.mouse().up();
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();
}
}
}
DragManually.java
package com.sample.app.actions;
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 DragManually {
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.locator("#circle").dragTo(page.locator("#square"));
page.locator("#circle").hover();
page.mouse().down();
page.locator("#square").hover();
page.mouse().up();
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