Monday 10 April 2023

Playwright: Get bounding box of an element

Locator.boundingBox() method returns the bounding box of the element, or null if the element is not visible.

 

Signature

BoundingBox boundingBox()
BoundingBox boundingBox(BoundingBoxOptions options)

 

Example

BoundingBox boundingBox = page.locator(".div1").boundingBox();

 

Find the below working application.

 

boundingBox.html
<!DOCTYPE HTML>
<html>

<head>
	<style>
		div.div1 {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 20px;
			height: 250px;
		}

		div.div2 {
			position: absolute;
			width: 100%;
			height: 100%;

		}

		div.div2:hover {
			background-color: rgb(244, 199, 236);
		}

		div.content {
			background-color: rgb(192, 233, 211);
		}
	</style>

</head>

<body>

	<div class="div1">
		<div class="div2"></div>
		<div class="content">Hi there!!!!</div>
	</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();
		}

	}
}

BoundingBoxDemo.java

package com.sample.app.locators;

import java.io.File;
import java.io.IOException;

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

public class BoundingBoxDemo {
	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("locators" + File.separator + "boundingBox.html");

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

			BoundingBox boundingBox = page.locator(".div1").boundingBox();

			double height = boundingBox.height;
			double width = boundingBox.width;
			double x = boundingBox.x;
			double y = boundingBox.y;

			System.out.println("height : " + height);
			System.out.println("width : " + width);
			System.out.println("x : " + x);
			System.out.println("y : " + y);

		}
	}
}

Output

height : 250.0
width : 250.0
x : 8.0
y : 8.0

  

Previous                                                 Next                                                 Home

No comments:

Post a Comment