Saturday 15 July 2023

Playwright: get all the styles associated with an element

Using evaluate method and ‘getComputedStyle’ we can get all the styles associated with an element.

 

Example

Locator locator1 = page.locator("#para1");
Map<String, Object> styles1 = (Map<String, Object>) locator1.evaluate("locator => getComputedStyle(locator)");

 

Find the below working application.

 

stylesOfElement.html

 

<html>

<head>
	<title>
		Styles of element
	</title>

	<style>
		p#para1 {
			width: 450px;
			margin: 0 auto;
			padding: 25px;
			font: 2rem/2 sans-serif;
			text-align: center;
			background: rgb(114, 123, 27);
			color: white;
		}

		p#para2 {
			width: 550px;
			margin: 0 auto;
			padding: 35px;
			font: 3rem/3 sans-serif;
			text-align: center;
			background: rgb(122, 51, 114);
			color: white;
		}
	</style>
</head>

<p id="para1">Hello World!!!!</p>
<p id="para2">Hello World!!!!</p>

</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();
		}

	}
}

 

GetAllStylesOfElement.java

package com.sample.app.miscellaneous;

import java.io.File;
import java.io.IOException;
import java.util.Map;

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;
import com.sample.app.util.FileUtil;

public class GetAllStylesOfElement {
	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 + "stylesOfElement.html");

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

			Locator locator1 = page.locator("#para1");
			Map<String, Object> styles1 = (Map<String, Object>) locator1
					.evaluate("locator => getComputedStyle(locator)");

			Locator locator2 = page.locator("#para2");
			Map<String, Object> styles2 = (Map<String, Object>) locator2
					.evaluate("locator => getComputedStyle(locator)");

			System.out.println("Styles associated with the id para1 are : ");
			System.out.println("width : " + styles1.get("width"));
			System.out.println("margin : " + styles1.get("margin"));
			System.out.println("padding : " + styles1.get("padding"));
			System.out.println("font : " + styles1.get("font"));
			System.out.println("text-align : " + styles1.get("textAlign"));
			System.out.println("background : " + styles1.get("background"));
			System.out.println("color : " + styles1.get("color"));

			System.out.println("\n\nStyles associated with the id para2 are : ");
			System.out.println("width : " + styles2.get("width"));
			System.out.println("margin : " + styles2.get("margin"));
			System.out.println("padding : " + styles2.get("padding"));
			System.out.println("font : " + styles2.get("font"));
			System.out.println("text-align : " + styles2.get("textAlign"));
			System.out.println("background : " + styles2.get("background"));
			System.out.println("color : " + styles2.get("color"));
		}
	}
}

 

Output

Styles associated with the id para1 are : 
width : 450px
margin : 0px 382px
padding : 25px
font : 32px / 64px sans-serif
text-align : center
background : rgb(114, 123, 27) none repeat scroll 0% 0% / auto padding-box border-box
color : rgb(255, 255, 255)


Styles associated with the id para2 are : 
width : 550px
margin : 0px 322px
padding : 35px
font : 48px / 144px sans-serif
text-align : center
background : rgb(122, 51, 114) none repeat scroll 0% 0% / auto padding-box border-box
color : rgb(255, 255, 255)

 


 

Previous                                                 Next                                                 Home

No comments:

Post a Comment