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)
No comments:
Post a Comment